エントリー

Kangoでは、JavaScriptのみを使用して人気のあるブラウザーの拡張機能を作成できます。コードはすべてのブラウザーで同じです。 現在、Chrome、Firefox、Internet Explorer（ChromeおよびFirefoxをサポートするパブリックドメインのみのバージョン）でサポートされており、OperaおよびSafariをサポートするための作業が進行中です。 以下では、簡単なクロスブラウザGmailチェッカーを簡単に作成する方法について説明します。



結果はどうなりますか：

Kango環境の準備

Kangoを使い始めるには、いくつかの手順を実行する必要があります。

1. Pythonバージョン2.7をインストールします（ http://www.python.org/download/ ）
2. リンクからダウンロードし、フレームワークを含むアーカイブを任意のフォルダーに解凍します。

新しいプロジェクトを作成する

ディスク上にプロジェクトのフォルダーを作成し、フレームワークフォルダーから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, // 15 minutes _feedUrl: 'https://mail.google.com/mail/feed/atom', _setOffline: function() { kango.ui.browserButton.setTooltipText('Offline'); kango.ui.browserButton.setIcon('icons/icon16_gray.png'); kango.ui.browserButton.setBadge(null); }, _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); }, refresh: function() { var details = { url: this._feedUrl, method: 'GET', async: true, contentType: 'xml' }; var self = this; kango.xhr.send(details, function(data) { if(data.status == 200) { var doc = data.response; var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue; self._setUnreadCount(count); } else { // something went wrong self._setOffline(); } }); } }; kango.ui.addEventListener(kango.ui.event.Ready, function() { return new GmailChecker(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

拡張機能の合計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ウィンドウを開く機能を備えたバージョンが公開されます。

参照資料

• Gmailチェッカーの例の完全なソース
• Freymovrk自体
• フレームワークのドキュメント