Google Chromeの拡張機能。 パート1 はじめに

こんにちは、Habr。



Google Chromeの拡張機能の作成に関する一連の記事を書きたいです。 これは、第一に、開発プロセスの実際の使用とその後の使用によって促されます：ブラウザーを離れることなく解決する他のタスクを決定し、第二に、ロシア語でわかりやすいガイド、チュートリアル、ディレクトリがないことを決定します、おそらく、 これとHabréに関するこの記事を除きます。 サイクルの主な目標は、Habrが適切にインデックスを作成するため、異種の情報を体系化し、潜在的な開発者の検索を容易にすることです。



最初の（これ、つまり）記事では、最も単純な拡張機能を例として使用して、拡張機能の開発、デバッグ、使用、manifest.json構成ファイル、およびchromeの先頭に関連するすべての主要な点を検討します。 最初の記事は、経験豊富な開発者にはあまり役に立たないと思います（これは免責事項です）。

ハローワールド

最良の理論は実践であるため、遅滞なくhello_worldフォルダーとその中にテキストドキュメントmanifest.jsonを作成し、そこに次のコードを出力します。

{  "name" : "Hello world", //   "version" : "1.0", //  "description" : "This is a simple chrome extention" //  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは最小限のプログラムです。 「レンチ」→「ツール」→「拡張機能」に移動し、「開発者モード」チェックボックスを設定し、「解凍された拡張機能をダウンロード...」ボタンをクリックして「Hello world」フォルダーを選択すると、拡張機能がインストール済みのリストに表示されますが、できないため、まだ何もありません。

学習とデバッグ

そして彼は方法がわからないので、彼は教えられなければなりません。 manifest.jsonを編集します。

 { "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バックグラウンドで実行するスクリプトを記述するbackground.htmlファイルを作成します。 たとえば、これ：

 <script type="application/javascript"> window.onload = function() { window.setInterval( function() { console.log("Hello world"); }, 10000); } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

background.htmlのスクリプトは、ブラウザーと拡張機能の開始時に1回実行されます。つまり、別のタブまたはウィンドウを開いたときに、スクリプトは再度実行されません。 私たちの場合、彼は10秒ごとに聖句をコンソールに書きます。これは、ちなみにチェックする必要があります。



デバッグには、開発者モードを有効にしてchrome：// extensions / serviceページを使用すると便利です。







原則として、それは「レンチ」の拡張機能管理ページの機能を複製しますが、主観的にはより気に入っています。 どういうわけかよりコンパクト、または何？



ここでは、2つの位置に関心があります。内部拡張識別子を持つ「ID」行と、作成したbackground.htmlを確認する「アクティブな表示モードを確認する」サブセクションです。クリックすると、実行可能スクリプトを制御できます。



スクリプトがhalloworldコンソールに正しく書き込むことを確認します。







chrome-extension：// ID / filename形式のヘッダーに注意してください。 この方法で拡張子識別子を知っていると、そのファイルのいずれかにアクセスできます。 繰り返しますが、拡張機能をデバッグするプロセスで便利です。

ブラウザの相互作用

拡張機能はそれ自体が一種のことを表しますが、バックグラウンドで特定のシナリオを実行します。 ブラウザとそのコンポーネントとの対話を開始するには、chrome。* APIに精通する必要があります。 そのため、たとえば、chrome.browserActionメソッドを使用してブラウザウィンドウと対話し、デフォルト値がmanifest.jsonで次のように設定されます。

 { "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html", "browser_action" : {  "default_title" : "Hello world!!!", //,       (  ,    )  "default_icon" : "img/icon_world.png", //    ( )  "default_popup" : "popup.html" //      } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

popup.htmlを作成することを忘れないでください（今のところは空白のままにします）。アイコンをimgフォルダーに配置し、 chrome：// extensions / pageで「Reload」をクリックして結果を確認します。 拡張機能のアイコンが拡張機能パネルに表示され、クリックすると空のポップアップウィンドウが表示されます。







手順に従う人のアイコン：





これらはすべて、スクリプトのchrome.browserActionメソッドを使用して制御できます。

 <script type="text/javascript"> chrome.browserAction.setTitle({title:"New title"}); //        chrome.browserAction.setPopup({popup:"new_popup.html"}); //        chrome.browserAction.setIcon({path:"new_icon.png"}); //   chrome.browserAction.setBadgeText({text:"text"}); //    chrome.browserAction.setBadgeBackgroundColor({color:[0,0,0]}); //     </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

練習のために、コンソールで単にがらくたをするのではなく、background.htmlに何か便利なことをさせましょう。 ここで、少なくとも時計。 アイコンの上に分数が表示されます。ホバーすると、時間はHH：MM：SSの形式で表示され、ポップアップウィンドウでは矢印付きの時計が表示されます。



background.html

 <script type="application/javascript"> window.onload = function() { window.setInterval( function() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var badge_text = (m < 10 ? "0" + m : m).toString(); var title_text = (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); chrome.browserAction.setBadgeText({text: badge_text}); chrome.browserAction.setTitle({title: title_text}); }, 1000); } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

popup.html

 <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } body { background: #000; } </style> <script type="text/javascript"> Clock = function() { this.canvas = false; this.pi = Math.PI; } Clock.prototype = { get_time: function() { var now = new Date(); var result = { milliseconds: now.getMilliseconds(), seconds: now.getSeconds(), minutes: now.getMinutes(), hours: now.getHours() } return result; }, init: function() { this.canvas = document.getElementById("clock").getContext("2d"); }, draw: function() { var now = this.get_time(); var hangle = (this.pi/6)*now.hours + (this.pi/360)*now.minutes + (this.pi/21600)*now.seconds + (this.pi/21600000)*now.milliseconds; var mangle = (this.pi/30)*now.minutes + (this.pi/1800)*now.seconds + (this.pi/1800000)*now.milliseconds; var sangle = (this.pi/30)*now.seconds + (this.pi/30000)*now.milliseconds; this.canvas.save(); this.canvas.fillStyle = "#000"; this.canvas.strokeStyle = "#000"; this.canvas.clearRect(0,0,200,200); this.canvas.fillRect(0,0,200,200); this.canvas.translate(100,100); this.canvas.rotate(-this.pi/2); this.canvas.save(); this.canvas.rotate(hangle); this.canvas.lineWidth = 8; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#ffffff"; this.canvas.lineCap = "round"; this.canvas.beginPath(); this.canvas.moveTo(-10,0); this.canvas.lineTo(50,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(mangle); this.canvas.lineWidth = 4; this.canvas.strokeStyle = "#ffffff"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-20,0); this.canvas.lineTo(75,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#333"; this.canvas.beginPath(); this.canvas.arc(0,0,8,0,this.pi*2,true); this.canvas.fill(); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(sangle); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ff0000"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-30,0); this.canvas.lineTo(85,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.fillStyle = "#ff0000"; this.canvas.beginPath(); this.canvas.arc(0,0,3,0,this.pi*2,true); this.canvas.fill(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.strokeStyle = "#ffffff"; this.canvas.beginPath(); this.canvas.arc(0,0,95,0,this.pi*2,true); this.canvas.stroke(); this.canvas.restore(); this.canvas.restore(); } } window.onload = function() { var clock = new Clock(); clock.init(); window.setInterval(function() { clock.draw(); }, 10); } </script> </head> <body> <canvas id="clock" width="200" height="200"></canvas> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

保存、再起動、確認-美しさ！





実際には、単純な拡張を作成しました（同時に、キャンバスを記憶しました）。 いずれにしても、Getting Startedで十分です。 配布に適した形式にするためだけに-梱包するために残っています。 これを行うには、同じページchrome：// extensions /をクリックし、「Packing extensions ...」をクリックして、ルートディレクトリ（manifest.jsonが存在するディレクトリ）を指定し、「OK」をクリックして、出力に* .crxファイルを取得します。 これはパッケージ化された拡張機能です。 Chromeを使用して開き、拡張機能をインストールします。



インストール記事のパッケージ例

ソース付きアーカイブ



シリーズの次の記事では、chrome。* APIの詳細を分析し、将来、さまざまなサイトとの相互作用およびローカルデータストアの使用を分析する予定です。 あなたが私が基本の何かを見逃したと思うか、あなたがサイクルの以下の記事に関して提案を持っていると思うならば、コメントでそれらを書いてください。



またね！