[Chrome extension] 高速勉強 #3「background処理」

Chromeエクステンションを使うとChromeブラウザをカスタマイズできます。 ブラウザをカスタマイズできると、自分の使いやすいブラウザが構築できるようになります。 もし仮にWEB関連の仕事をしているとしたら、テストや検証のツールを作ることなどは簡単にできます。 こりゃあ、覚えておくと、仕事の効率がアップするって事だな・・・って考えたんですが、浅はかでしょうか？

background処理

目的

拡張機能のアイコンをクリックするだけでページの背景色を変更する。

リンク

#09 クリックだけで背景色を変えてみよう

目的

popupウィンドウを表示せずにIconをクリックしただけで背景色を変更する。

作業

「ex2」をフォルダ毎コピーして「ex3」を作成

必要なファイル

icon19.png manifest.json background.js

１、manifest.json

{ "name": "ex3", "version": "0.1", "manifest_version": 2, "description":"背景色を変更する！2", "permissions":[ "tabs", "http://*/*" ], "background":{ "scripts":["background.js"] }, "browser_action":{ "default_icon":"icon19.png", "default_title":"ex3" } }

２、background.jsの作成

* 参考 - https://developer.chrome.com/extensions/browserAction#event-onClicked - chrome.browserAction.onClicked.addListener(function callback) chrome.browserAction.onClicked.addListener(function(){ chrome.tabs.executeScript(null, { "code": "document.body.style.backgroundColor='green';" }); });

* 解説 function callback : スクリプトが起動された時に実行されるコード

３、確認

・拡張機能に登録 ・アイコンボタンをクリックしてページの背景色が変更されることを確認（緑色になるだけ）

• #1 Browser Action
• #2 バッジテキスト
• #3 background処理