読者です 読者をやめる 読者になる 読者になる

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

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

てことで、間違ってる&ぜんぜん足りないとかあったらすみません(>_<)