Chrome 拡張機能のアイコンファイルを確実に見つける方法

カスタマイズ好き必見！Chromeの拡張機能のアイコンを変える方法 - 情報系大学生のWebあれこれ備忘録の補足記事です。

上記記事の手順中に、大きさが 19×19 で、拡張子が png のアイコンファイルを探したら、条件に合うファイルが複数見つかることがあります。これらのファイルの中からアイコンファイルを確実に見つける方法があります。

Evernote Web Clipper を例にして、アイコンファイルを確実に見つける方法を説明します。

アイコンファイルを見つける方法

1. エクスプローラーを起動し、C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data\Default\Extensions\<拡張機能の ID>\<バージョン名> を開きます。

   Evernote Web Clipper の場合、C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data\Default\Extensions\pioclpoplcdbaefihamjohnefbikjilc\<バージョン名> を開きます。

2. 開いたフォルダ内にある manifest.json をメモ帳などのテキストエディタで開きます。

   

   

3. default_icon と書かれているプロパティを探し、その中に書かれているファイルが目的のアイコンファイルです。

   Evernote Web Clipper の場合、web-clipper-19x19.png が目的のファイルです。

    "browser_action": {
       "default_icon": {
           "19": "images/web-clipper-19x19.png",      // optional
           "38": "images/web-clipper-19x19@2x.png"      // optional
       },
       "default_title": "__MSG_BrowserActionTitle__"
    },
   

   

   

Retina ディスプレイ用のアイコンファイル

default_icon プロパティにある web-clipper-19x19@2x.png は Retina ディスプレイ用のアイコンファイルです。ファイル名の末尾にある @2x が、Retina ディスプレイ用に用意されたアイコンファイルの目印です。

もし、自分の端末が Retina ディスプレイの場合は、web-clipper-19x19@2x.png が目的のアイコンファイルとなります。

おまけ：公式の解説

Evernote Web Clipper の manifest.json では 19px と 38px のアイコンが用意されていましたが、公式サイトでは拡張機能のアイコンの大きさについて以下のように説明されています。

If you only provide one of the 19px or 38px icon size, the extension system will scale the icon you provide to the pixel density of the user's display, which can lose detail or make it look fuzzy.The old syntax for registering the default icon is still supported:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon19.png"  // optional
    // equivalent to "default_icon": { "19": "images/icon19.png" }
  },
  ...
}

ざっくり意訳すると、

もし 19px か 38px のどちらかだけを用意すると、アイコンはユーザーのディスプレイのピクセル密度に合うように調整されますが、画質が落ちてしまう可能性があります。下記のコードのような default_icon を登録するための古い構文はまだサポートされています。（コード略）

と述べられています。

つまり、19px と 38px のアイコンが用意されている拡張機能もあれば、19px のアイコンしか用意されていない古い拡張機能もあるということです。実際は 38px 以上のアイコンも指定できるらしいのですが、供述通り縮小されて画質が低下してしまうので、そのような拡張機能を目にすることは滅多にないでしょう。

雑感

アイコンファイルの大きさについて検索すると、「19px 以上のアイコンを用意すると圧縮されて画質が落ちるので、19px ぴったりのアイコンを用意しましょう」と述べている（日本の）サイトが非常に多いです。先に述べた通り、実際は Retina ディスプレイ用に 38px のアイコンを用意してもいいことになっています。

このアイコンの大きさの相違はマニフェストのバージョンによって引き起こされたものと思われます。バージョン 2.0 未満では、19px のアイコンを1つだけ用意しなければなりませんでしたが、バージョン 2.0 では 38px のアイコンを用意してもいいことになっています。

古いバージョンに則った解説ばかりなので、バージョン 2.0 に則った解説をするサイトが増えてくれるといいですね。