カスタマイズ好き必見!Chrome の拡張機能のアイコンを変える方法
Google Chrome にインストールされた拡張機能のアイコンは任意のアイコンに変えることができるということを知っていますか?「このアイコン、機能は便利なのに見た目が気に入らない」、「アイコンの色が背景色と重なって見にくい」などと不満を持っている人は必見です。
常に目にするアイコンだからこそ、見た目よくカスタマイズしてみましょう!
- 拡張機能のアイコンの視認性
- 拡張機能の ID を確認する
- アイコンファイルがあるフォルダを開く
- アイコンファイルを探す
- 新しいアイコンファイルを用意する
- 元のアイコンファイルを新しいアイコンファイルで書き換える
- Chrome を再起動する
- 注意点
- 雑感
- 参考サイト
拡張機能のアイコンの視認性
Chrome に拡張機能をインストールすると、ブラウザの右上にアイコンが表示されるものがあります。このアイコンは、Chrome のテーマ(背景色)によって見づらくなるものがあります。
下記の画像の左から3番目の拡張機能「Evernote Web Clipper」のアイコンを見てください。
Evernote の象さんってかわいいのに、見にくいですよね。そこで、今回は Evernote Web Clipper のアイコンを変更する方法を例にして、Chrome の拡張機能のアイコンの変える方法を解説します。
拡張機能の ID を確認する
始めに、アイコンを変えたい拡張機能の ID を調べます。Chrome のオムニバーに chrome://extensions と入力して、拡張機能の ID を確認します。
Evernote Web Clipper の場合、 ID は「pioclpoplcdbaefihamjohnefbikjilc」です。
アイコンファイルがあるフォルダを開く
エクスプローラーを起動し、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\<拡張機能のバージョン>\images を開きます。
このパスの詳細を解説すると、以下のようになります。次の手順まで読み飛ばしても構いません。
拡張機能の ID
C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data\Default\Extensions を開くと、Chrome にインストールしているすべての拡張機能のフォルダがあります。これらのフォルダ名はそれぞれの拡張機能の ID を表します。
Evernote Web Clipper の場合、拡張機能の ID は「pioclpoplcdbaefihamjohnefbikjilc」であるので、「pioclpoplcdbaefihamjohnefbikjilc」フォルダを開きます。
拡張機能のバージョン
<拡張機能の ID> フォルダを開くと、その拡張機能のバージョンを表すフォルダがあります。
Evernote Web Clipper の場合、「pioclpoplcdbaefihamjohnefbikjilc」フォルダを開くと、その拡張機能のバージョンを表す <6.2.6_0> などのフォルダがあります。
アイコンファイルがあるフォルダ
<拡張機能のバージョン> フォルダを開くと、「css」 フォルダや「js」フォルダなど様々なフォルダがあります。この中からアイコンがあるフォルダを探します。拡張機能によっては、「img」フォルダであったり、「icn」フォルダであったりします。
Evernote Web Clipper の場合、アイコンファイルは「images」フォルダにあります。
アイコンファイルを探す
<アイコンファイルがあるフォルダ> を開くと、様々な画像ファイルがあります。この中から、ブラウザの右上に表示されるアイコンファイルを探します。アイコンファイルの大きさは 19×19 や 38×38 なので、これを目安に探すといいでしょう。また、拡張子は大抵 png
です。
Evernote Web Clipper の場合、アイコンファイルは web-clipper-19x19.png
または web-clipper-19x19@2x.png
です。
このアイコンファイルを探す手順が最も大変な作業です。拡張機能によっては、大きさが 19×19 で拡張子が png
のアイコンファイルが複数あることもあり、どれがアイコン用のファイルなのか分からないことがあります。そんな時のために、確実にアイコンファイルを探す方法があるのですが、文字数を考慮して別記事で解説します。
新しいアイコンファイルを用意する
探し出したアイコンファイルと同じ大きさと同じ拡張子のアイコンファイルを用意します。deviantART などで探すか、Photoshop などで自作するといいでしょう。
Evernote Web Clipper の場合、アイコンファイルは web-clipper-19x19.png
であることが分かったので、大きさが 19×19 で拡張子が png
のアイコンファイルを用意します。ファイル名は元のアイコンファイル名と同じ web-clipper-19x19.png
とします。新しいアイコンとして、Evernote らしく緑色のアイコンを用意します。
元のアイコンファイルを新しいアイコンファイルで書き換える
用意した新しいアイコンファイルを、元のアイコンファイルがあった <アイコンファイルがあるフォルダ> 内に移動します。念のため、元のアイコンファイルは他のフォルダにバックアップしておくといいでしょう。
Chrome を再起動する
Chrome を再起動すると、Evernote Web Clipper のアイコンが新しいアイコンに変わります。
変更前
変更後
注意点
拡張機能がアップデートされると、せっかく用意した新しいアイコンが元のアイコンに上書きされてしまいます。そのため、拡張機能がアップデートされるたびにアイコンを変える必要があります。用意した新しいアイコンは他のフォルダにバックアップしておくことをオススメします。
雑感
説明がかなり長くなりましたが、慣れればすぐにできます!拡張機能のアイコンに不満を持っている方は、ぜひ好きなアイコンに変えてみましょう!
それにしても、Evernote Web Clipper のアイコンって見にくくないですか?昔は緑色のアイコンだったのですが、いつの間にか灰色のアイコンになってしまいました。Evernote Web Clipper 自体は、とても便利な拡張機能ですね。
Evernote を使ったことがない人はEvernote アカウントを作成(1ヶ月無料でプレミアムアカウントにアップグレードできます)して、Evernote Web Clipper を使用してみましょう!
参考サイト
この記事の画像で用いられている Chrome のテーマ Gradient と拡張機能 Evernote Web Clipper です。