情報系大学院生のWebメモ

ソフトウェアや Web サービス、Windows や Mac に関する情報系大学院生の備忘録ブログ

カスタマイズ好き必見!Chrome の拡張機能のアイコンを変える方法

このエントリーをはてなブックマークに追加

f:id:sherlock_kjs:20141214071445p:plain

Google Chrome にインストールされた拡張機能のアイコンは任意のアイコンに変えることができるということを知っていますか?「このアイコン、機能は便利なのに見た目が気に入らない」、「アイコンの色が背景色と重なって見にくい」などと不満を持っている人は必見です。

常に目にするアイコンだからこそ、見た目よくカスタマイズしてみましょう!

拡張機能のアイコンの視認性

Chrome拡張機能をインストールすると、ブラウザの右上にアイコンが表示されるものがあります。このアイコンは、Chrome のテーマ(背景色)によって見づらくなるものがあります。

下記の画像の左から3番目の拡張機能Evernote Web Clipper」のアイコンを見てください。

f:id:sherlock_kjs:20141214071531p:plain

Evernote の象さんってかわいいのに、見にくいですよね。そこで、今回は Evernote Web Clipper のアイコンを変更する方法を例にして、Chrome拡張機能のアイコンの変える方法を解説します。

拡張機能の ID を確認する

始めに、アイコンを変えたい拡張機能の ID を調べます。Chrome のオムニバーに chrome://extensions と入力して、拡張機能の ID を確認します。

Evernote Web Clipper の場合、 ID は「pioclpoplcdbaefihamjohnefbikjilc」です。

f:id:sherlock_kjs:20141214071638p:plain

アイコンファイルがあるフォルダを開く

エクスプローラーを起動し、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 を開きます。

f:id:sherlock_kjs:20141214071615p:plain

このパスの詳細を解説すると、以下のようになります。次の手順まで読み飛ばしても構いません。

拡張機能の ID

C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data\Default\Extensions を開くと、Chrome にインストールしているすべての拡張機能のフォルダがあります。これらのフォルダ名はそれぞれの拡張機能の ID を表します。

Evernote Web Clipper の場合、拡張機能の ID は「pioclpoplcdbaefihamjohnefbikjilc」であるので、「pioclpoplcdbaefihamjohnefbikjilc」フォルダを開きます。

f:id:sherlock_kjs:20141214071701p:plain

拡張機能のバージョン

<拡張機能の ID> フォルダを開くと、その拡張機能のバージョンを表すフォルダがあります。

Evernote Web Clipper の場合、「pioclpoplcdbaefihamjohnefbikjilc」フォルダを開くと、その拡張機能のバージョンを表す <6.2.6_0> などのフォルダがあります。

f:id:sherlock_kjs:20141214071742p:plain

アイコンファイルがあるフォルダ

<拡張機能のバージョン> フォルダを開くと、「css」 フォルダや「js」フォルダなど様々なフォルダがあります。この中からアイコンがあるフォルダを探します。拡張機能によっては、「img」フォルダであったり、「icn」フォルダであったりします。

Evernote Web Clipper の場合、アイコンファイルは「images」フォルダにあります。

f:id:sherlock_kjs:20141214071800p:plain

アイコンファイルを探す

<アイコンファイルがあるフォルダ> を開くと、様々な画像ファイルがあります。この中から、ブラウザの右上に表示されるアイコンファイルを探します。アイコンファイルの大きさは 19×19 や 38×38 なので、これを目安に探すといいでしょう。また、拡張子は大抵 png です。

Evernote Web Clipper の場合、アイコンファイルは web-clipper-19x19.png または web-clipper-19x19@2x.png です。

f:id:sherlock_kjs:20141214071820p:plain

このアイコンファイルを探す手順が最も大変な作業です。拡張機能によっては、大きさが 19×19 で拡張子png のアイコンファイルが複数あることもあり、どれがアイコン用のファイルなのか分からないことがあります。そんな時のために、確実にアイコンファイルを探す方法があるのですが、文字数を考慮して別記事で解説します。

新しいアイコンファイルを用意する

探し出したアイコンファイルと同じ大きさと同じ拡張子のアイコンファイルを用意します。deviantART などで探すか、Photoshop などで自作するといいでしょう。

Evernote Web Clipper の場合、アイコンファイルは web-clipper-19x19.png であることが分かったので、大きさが 19×19 で拡張子png のアイコンファイルを用意します。ファイル名は元のアイコンファイル名と同じ web-clipper-19x19.png とします。新しいアイコンとして、Evernote らしく緑色のアイコンを用意します。

f:id:sherlock_kjs:20141214071906p:plain

元のアイコンファイルを新しいアイコンファイルで書き換える

用意した新しいアイコンファイルを、元のアイコンファイルがあった <アイコンファイルがあるフォルダ> 内に移動します。念のため、元のアイコンファイルは他のフォルダにバックアップしておくといいでしょう。

f:id:sherlock_kjs:20141214071919p:plain

Chrome を再起動する

Chrome を再起動すると、Evernote Web Clipper のアイコンが新しいアイコンに変わります。

変更前

f:id:sherlock_kjs:20141214071531p:plain

変更後

f:id:sherlock_kjs:20141214071950p:plain

注意点

拡張機能がアップデートされると、せっかく用意した新しいアイコンが元のアイコンに上書きされてしまいます。そのため、拡張機能がアップデートされるたびにアイコンを変える必要があります。用意した新しいアイコンは他のフォルダにバックアップしておくことをオススメします。

雑感

説明がかなり長くなりましたが、慣れればすぐにできます!拡張機能のアイコンに不満を持っている方は、ぜひ好きなアイコンに変えてみましょう!

それにしても、Evernote Web Clipper のアイコンって見にくくないですか?昔は緑色のアイコンだったのですが、いつの間にか灰色のアイコンになってしまいました。Evernote Web Clipper 自体は、とても便利な拡張機能ですね。

Evernote を使ったことがない人はEvernote アカウントを作成(1ヶ月無料でプレミアムアカウントにアップグレードできます)して、Evernote Web Clipper を使用してみましょう!

参考サイト

この記事の画像で用いられている Chrome のテーマ Gradient と拡張機能 Evernote Web Clipper です。