Chrome拡張機能でアイコンを変更してみる
基本
chrome.browserAction.setIconでアイコンを変更することができる。
manifest.json
{ "name": "Sample Extension", "version": "0.0.1", "manifest_version": 2, "description": "拡張機能のサンプルです", "browser_action" : { "default_icon": "blue.png" }, "background": { "scripts": ["background.js"] } }
background.js
chrome.browserAction.onClicked.addListener(function(tab) { chrome.browserAction.setIcon({path:"red.png"}); });
応用
クリックするたびにアイコンが切り替わって、
アイコンの状態をローカルストレージに保存する場合は、
下記のような感じでできた。
manifest.json
{ "name": "Sample Extension", "version": "0.0.1", "manifest_version": 2, "description": "拡張機能のサンプルです", "browser_action" : { }, "background": { "scripts": ["background.js"] } }
background.js
// ローカルストレージが設定されていない場合は初期化する。 if (localStorage['icon'] === undefined) { localStorage['icon'] = 'blue.png'; } // 起動時にローカルストレージの値を見てアイコンを設定する。 chrome.browserAction.setIcon({path:localStorage['icon']}); // アイコンがクリックされた場合、ローカルストレージを変更して、アイコンも変更する。 chrome.browserAction.onClicked.addListener(function(tab) { if (localStorage['icon'] === 'blue.png') { localStorage['icon'] = 'red.png' } else { localStorage['icon'] = 'blue.png' } chrome.browserAction.setIcon({path:localStorage['icon']}); });