追記

最新Firefox(ver57)で動作させるためにWebExtensionで作り直しました。
こちらをお使いください。

自分が欲しいと思った機能があるFirefoxアドオンがなかったので、開発しました。前回はアドオンの開発環境構築まで書きました。今回は開発したアドオンについて書きます。

開発したアドオン

内容

表示されているページのURLに指定したキーワードが入っている場合、そのページのタブを赤くします。以下、指定キーワードに「yahoo」を入れた場合です。キーワードは複数選択可能です。

URLに「yahoo」がある為、タブが赤くなっている。

URLに「yahoo」がない為、タブの色は変わらない。

開発した理由

開発環境サイトと本番環境サイトを見分けるためです。開発環境と本番環境の違いをURLを毎回見て確認していました。本番環境のURLを指定キーワードに追加することで、タブが赤くなったら本番環境と認識できます。その結果、本番環境での操作ミスを減らすことができるのではないかと考えました。

導入方法

このアドオンは、公開するために必要なMozilaに申請を行っていません。そのため、ローカルでのみアドオン導入が可能です。ローカルでのアドオンの導入方法についても前回の記事に記述しています。

以下、大まかな導入までの流れです。
・Githubからソースをclone
・任意の指定キーワードを設定するためにコードを修正
・xpiファイルを作成
・Firefoxに導入

アドオンの中身

メインのファイルであるindex.jsを添付します。ウィンドウ内のレイアウトを変更することは簡単なのですが、タブの色を変更する処理の実装方法が分からず少し躓きました。 userChrome.cssを変更する必要があることが分かり、XPCOMという技術を利用して実装しました。 (var sss, var ios の箇所)

gist2f90c2568bf39275267fd59c28dcd72d