前回おこなったこと
前回はGoogle Chrome 拡張開発の下準備として、「空っぽのChrome 拡張を作り、ブラウザに認識させる」ということをやりました。
前回作ったChrome 拡張の名前は「My First Chrome Extension」です。
今回やりたいこと
ということで今回は、前回作った「My First Chrome Extension」のデフォルトアイコン [M] を画像に差し替えてみようと思います。
公式情報
英語ですが、公式サイト「Chrome Developers」にアイコンに関する情報があったのでリンクを掲載しておきます。
内容をざっくり要約すると、
- サイズは3パターンあると良い（単位はピクセル）：
- 128x128：主にChrome Web Store 関連で使用
- 48x48：拡張機能の管理ページで使用：chrome://extensions
- 16x16：faviconとして使用
- 上記3パターン以外のサイズを用意しても、Chrome は適切な場所で最適なサイズのアイコンを使用する
- PNG 形式がオススメ
- WebP とSVG ファイルは非対応
- manifest.json に記述が必要
manifest.json への記述例：
"icons": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},
実装してみよう
1. アイコン画像を用意
とりあえずこんな感じのアイコンを作ってみました。サイズは左から16x16, 48x48, 128x128 です。
2. images フォルダを作成
Chrome 拡張のフォルダの直下にアイコン画像ファイルを置きたくなかったので、images フォルダを用意しました。Chrome 拡張のフォルダのディレクトリ構成は以下のようになります。
┗ MyFirstChromeExtension/
┣ images/
┗ manifest.json
3. images フォルダにアイコン画像を配置
Chrome 拡張のフォルダのディレクトリ構成は以下のようになります。
┗ MyFirstChromeExtension/
┣ images/
┃ ┣ icon16.png
┃ ┣ icon48.png
┃ ┗ icon128.png
┗ manifest.json
4. manifest.json の内容を更新
{
// 情報
"name": "My First Chrome Extension",
"description": "初めてのChrome 拡張開発。",
"version": "2023.09.16.001",
"manifest_version": 3,
// アイコン
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
「// 情報」と「// アイコン」はコメントアウトされていて、バージョン表記はとりあえず「2023.09.16.001」に変更しました。
アイコンの記述に関しては、公式情報の「"16": "icon16.png",」はルートフォルダ直下（今回の場合はMyFirstChromeExtension フォルダ）にPNG ファイルを置いた場合の書き方だったので、「images/」を書き足しています。
5. Chrome 拡張を更新
拡張機能のページにアイコンが適用されました。
グレーアウトされていますが、ブラウザの右上でもアイコンが適用されました。
ブラウザの右上のアイコンがグレーアウトされている件については、アクション（action）を実装することでオリジナルの色（今回は赤）になるようなので、今回も目的を達成したことにします！
次回
次回はブラウザの右上のアイコンをクリックしたらウィンドウがポップアップするような実装をしたいと考えています。