chrome extensionsで使うアイコンのサイズ整理

はじめに

chrome extensionsで機能拡張を作るときアイコンをいくつか用意するけどなんかサイズがいろいろあってよくわからん。
合ってるかわからないけど、調べてみたパターンをメモっておきます

アイコンパターン

サイズ順ではなく用途でまとめてます

iconサイズ	用途	サンプル
主に拡張機能そのもの系
48	拡張機能ページ(chrome://extensions)用	manifest.jsonに icons:{48:"icon48.png"} で指定
128	ユーザが拡張機能をインストールする際に使われる?	manifest.jsonに icons:{128:"icon128.png"} で指定
32	拡張機能をギャラリーに登録する時用	manifest.jsonに icons:{32:"icon32.png"} で指定
browserAction pageAction系
19	browserAction、pageAction用	manifest.jsonに browser_action:{"default_icon":"icon19.png"} で指定
38	browserAction、pageAction用	manifest.jsonに browser_action:{"default_icon":"icon38.png"} で指定
context menus系
16	contextMenus用	manifest.jsonに icons:{16:"icon16.png"} で指定

※他にもあれば追記してきます
※基本的に指定しなければデフォルトで用意されている画像(パズルのピース)みたいなのになるようです

用途例

上の48,19,16のアイコンを用意して表示の具合を試してみました
参考程度にどーぞ

48

chromeに拡張機能ページに表示されるアイコンです

19(browserAction)

ブラウザアクションに表示されるアイコンです。

19(pageAction)

ページアクションに表示されるアイコンです。

16(contextMenus)

右クリック時に表示されるアイコンです

上記に使用したサンプルです

ファイル構成

ex_sample_icon

-- background.js

-- icon16.png

-- icon19.png

-- icon38.png

-- icon48.png

-- icon128.png

`-- manifest.json

manifest.json

{
  "name": "icon pattern sample",
  "version": "0.1",
  "manifest_version": 2,
  
  "description": "アイコンのパターンサンプル",
  "permissions" : [
    "tabs", "http://*/*", "https://*/*", "contextMenus"
  ],
  
  "icons" : {
    "16" : "icon16.png",
    "48" : "icon48.png",
    "128" : "icon128.png"
  },
  
  "browser_action" : {
    "default_icon" : {
      "19" : "icon19.png",
      "38" : "icon38.png"
    },
    "default_title" : "ぶらうざあくしょん"
  },
  
//  "page_action": {
//    "default_icon": "icon19.png",
//    "default_title": "ぺーじあくしょん"
//  },

  "background" : {
    "scripts" : ["background.js"]
  }
}

※browser_actionとpage_actionは共存できないためコメントしてます。
browser_actionにコメントつけてpage_actionのコメントをはずす＆下のbackground.jsのコメントもはずすと表示されます

background.js

// page action
//chrome.tabs.onCreated.addListener(function (tab){
//  chrome.pageAction.show(tab.id);
//});

// context menus
chrome.contextMenus.create({
  "title" : "アイコンのサンプル",
  "type"  : "normal",
  "contexts" : ["all"]
});