エントリー
Kangoでは、JavaScriptのみを使用して人気のあるブラウザーの拡張機能を作成できます。コードはすべてのブラウザーで同じです。 現在、Chrome、Firefox、Internet Explorer（ChromeおよびFirefoxをサポートするパブリックドメインのみのバージョン）でサポートされており、OperaおよびSafariをサポートするための作業が進行中です。 以下では、簡単なクロスブラウザGmailチェッカーを簡単に作成する方法について説明します。
結果はどうなりますか：
Kango環境の準備
Kangoを使い始めるには、いくつかの手順を実行する必要があります。
- Pythonバージョン2.7をインストールします（ http://www.python.org/download/ ）
- リンクからダウンロードし、フレームワークを含むアーカイブを任意のフォルダーに解凍します。
新しいプロジェクトを作成する
ディスク上にプロジェクトのフォルダーを作成し、フレームワークフォルダーからkango.pyを実行します
d:\dev\kango\kango.py create
プロジェクト名の要求に応じて、Gmail Checkerと入力します。
これで、拡張機能のコードの記述に進むことができます。
将来、拡張機能の名前とバージョンは、common \ extension_info.jsonファイルを使用してインストールできます。
Gmailチェッカーの作成
拡張機能は、Gmailの未読メッセージの数を定期的に確認し、この数をブラウザーのボタンに表示します。
プロジェクトを作成したら、src \ commonフォルダーに移動して、main.jsファイルのソーステンプレートが既に作成されていることを確認します。
拡張機能の初期化
UIモジュール準備イベントにサブスクライブします。 あなたはそれを使用する必要があります 拡張機能には視覚的なコンポーネント、つまりブラウザのボタンがあります。
kango.ui.addEventListener(kango.ui.event.Ready, function() { return new MyExtension(); });
未読メールの数を取得する
未読メッセージの数は、
https：//mail.google.com/mail/feed/atomで
Atom 0.3形式で取得できます（正しい操作を行うには、ユーザーは現在のブラウザーでGmailにログインする必要があります）。
AJAXリクエストの場合、
kango.xhr.sendメソッドが
使用されます。
var details = { url: 'https://mail.google.com/mail/feed/atom', method: 'GET', async: true, contentType: 'xml' }; kango.xhr.send(details, function(data) { if(data.status == 200) { var doc = data.response; var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue; } });
ボタンにメッセージの数を表示します
ボタンのプロパティは、
kango.ui.browserButtonオブジェクトを使用して制御されます。
_setUnreadCount: function(count) { kango.ui.browserButton.setTooltipText('Unread count: ' + count); kango.ui.browserButton.setIcon('icons/icon16.png'); kango.ui.browserButton.setBadge((count != 0) ? {text: count} : null); }
すべてをまとめる
特定の頻度で新しいメッセージの数とエラー処理をチェックするタイマーを追加します。その結果、次のコードのようなものが得られます。
function GmailChecker() { var self = this; self.refresh(); kango.ui.browserButton.addEventListener(kango.ui.browserButton.event.Command, function() { self.refresh(); }); window.setInterval(function(){self.refresh()}, self._refreshTimeout); } GmailChecker.prototype = { _refreshTimeout: 60*1000*15,
拡張機能の合計50行のコード。これは、すべての一般的なブラウザーで機能します。
アイコン
common /アイコンフォルダーで、PNGアイコンを、それぞれ16x16、32x32、48x48、128x128ピクセルのサイズのicon16.png、icon32.png、icon48.png、icon128.pngの名前と、非アクティブステータスを表示するicon16_gray.pngアイコンを配置する必要があります。 。
プロジェクトの組み立て
プロジェクトをビルドするには、ビルド引数とプロジェクトフォルダーへのパスを指定してkango.pyを実行します
d:\dev\kango\kango.py build ./
Chrome拡張機能を作成するには、Windows用のGoogle ChromeまたはLinux用のChromiumをインストールする必要があります。
出力は、既製の拡張ファイルであるgmailchecker_0.1.0.xpiおよびgmailchecker_0.1.0.crxである必要があります。 Chromeの場合、gmailchecker.pemファイルも生成されるため、拡張機能は後で更新できます。
さらなる視点
ほとんどのAPIはクローズドベータテストフェーズにあり、間もなくページのコンテンツを変更できるバージョン（DOMへのフルアクセス）とボタンをクリックしてポップアップHTMLウィンドウを開く機能を備えたバージョンが公開されます。
参照資料