[Chrome extension] 高速勉強 #3「background処理」
Chromeエクステンションを使うとChromeブラウザをカスタマイズできます。
ブラウザをカスタマイズできると、自分の使いやすいブラウザが構築できるようになります。
もし仮にWEB関連の仕事をしているとしたら、テストや検証のツールを作ることなどは簡単にできます。
こりゃあ、覚えておくと、仕事の効率がアップするって事だな・・・って考えたんですが、浅はかでしょうか？
background処理
目的
拡張機能のアイコンをクリックするだけでページの背景色を変更する
リンク
目的
popupウィンドウを表示せずにIconをクリックしただけで背景色を変更する。
作業
「ex2」をフォルダ毎コピーして「ex3」を作成
必要なファイル
icon19.png
manifest.json
background.js
１、manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "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)
|
1 2 3 4 5 |
chrome.browserAction.onClicked.addListener(function(){ chrome.tabs.executeScript(null, { "code": "document.body.style.backgroundColor='green';" }); }); |
* 解説
function callback : スクリプトが起動された時に実行されるコード
３、確認
・拡張機能に登録
・アイコンボタンをクリックしてページの背景色が変更されることを確認（緑色になるだけ）