[Chrome extension] 使っているタブのURLを判別してアイコンを切り替える方法
Chrome-extensionを自分で作って使っていたら気がついたんだけど、アイコンの数が増えると何だかアドレスバーが短くなってきて使いづらくなってくるね。
そして、アイコンもたくさんあるとごちゃごちゃして分かりにくくなってくるよね。
という事で、今回は特定のドメインでしか動作しない拡張機能は、使わないドメインの時はアイコンをグレーアウトするような処理を入れるほうがユーザビリティが高いと判断して、アイコンの変更を自動で行う処理を書いてみた。
事前準備
必要なファイル
・manifest.json
・background.js
・on.png
・off.png
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "tab-check", "version": "0.1", "manifest_version": 2, "description":"tab切り替えで「ideacompo.com」ドメインの場合にアイコンを変更する", "permissions":[ "tabs", "http://*/*", "https://*/*" ], "background":{ "scripts":["background.js"] }, "browser_action":{ "default_icon":"off.png", "default_title":"tab-check" } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function checkDomain(domain){ // on if(domain.match(/(.*?)google.com$/i)){ chrome.browserAction.setIcon({path:"on.png"}); } // off else{ chrome.browserAction.setIcon({path:"off.png"}); } } chrome.tabs.onSelectionChanged.addListener(function(tabid){ chrome.tabs.get(tabid, function(tab){ //domainの取得 var domain = tab.url.split("/")[2]; // changeIcon checkDomain(domain); }); }); chrome.windows.onFocusChanged.addListener(function(winid){ chrome.tabs.getSelected(winid, function(tab){ //domainの取得 var domain = tab.url.split("/")[2]; // changeIcon checkDomain(domain); }); }); |
解説
拡張機能として登録すると、「google.com」のタブでアイコンが白色になるのが確認できます。
ポイントは、chromeブラウザの「タブ切り替え」と「window切り替え」のタイミングでそれぞれ表示されているタブのURLを取得して、そこからドメインを正規表現マッチングしています。
javascriptが分かる人であれば、ソースを見るとそんなに難しくなく理解できると思いますが、少し困惑したポイントとしては、
chrome.tabsとchrome.windowsの内部でタブのURLを取得するのを、tabsとwindowsで別々の書き方をしています。
それぞれイベントで取得できるIDが違っているので、このような書き方してますが、もしかすると、同じ処理でもできるかもしれません。
もし見つけたら追記しますね。