Chrome拡張機能でアイコンを変更してみる

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"});
});
アイコン(19x19)


起動すると、青いアイコンが表示され、

クリックすると赤いアイコンになる。


応用

クリックするたびにアイコンが切り替わって、
アイコンの状態をローカルストレージに保存する場合は、
下記のような感じでできた。

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']});
});