[Chrome extension] 使っているタブのURLを判別してアイコンを切り替える方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Chrome-extensionを自分で作って使っていたら気がついたんだけど、アイコンの数が増えると何だかアドレスバーが短くなってきて使いづらくなってくるね。
そして、アイコンもたくさんあるとごちゃごちゃして分かりにくくなってくるよね。
という事で、今回は特定のドメインでしか動作しない拡張機能は、使わないドメインの時はアイコンをグレーアウトするような処理を入れるほうがユーザビリティが高いと判断して、アイコンの変更を自動で行う処理を書いてみた。

事前準備

必要なファイル

・manifest.json
・background.js
・on.png
on
・off.png
off

ソースコード

解説

拡張機能として登録すると、「google.com」のタブでアイコンが白色になるのが確認できます。
ポイントは、chromeブラウザの「タブ切り替え」と「window切り替え」のタイミングでそれぞれ表示されているタブのURLを取得して、そこからドメインを正規表現マッチングしています。
javascriptが分かる人であれば、ソースを見るとそんなに難しくなく理解できると思いますが、少し困惑したポイントとしては、
chrome.tabsとchrome.windowsの内部でタブのURLを取得するのを、tabsとwindowsで別々の書き方をしています。
それぞれイベントで取得できるIDが違っているので、このような書き方してますが、もしかすると、同じ処理でもできるかもしれません。
もし見つけたら追記しますね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です