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 : スクリプトが起動された時に実行されるコード
３、確認
・拡張機能に登録
・アイコンボタンをクリックしてページの背景色が変更されることを確認（緑色になるだけ）
0 件のコメント:
コメントを投稿