takedajs ログ

備考録

タブの色を変えるFirefoxアドオンを開発した

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

開発したアドオン

内容

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

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

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

開発した理由

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

導入方法

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

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

アドオンの中身

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

gist2f90c2568bf39275267fd59c28dcd72d

まとめ

ローカルのみでしか導入できませんが、欲しかった機能を持ったアドオンを開発できました。 今後改良していく予定は未定ですが、やるとしたら以下を行っていきたいです。
Chromeと互換性があるWebExtensionで作り直して公開する。
・メニューバーから指定キーワードの設定、色の設定を可能にする。

参考

tabs - Mozilla | MDN

GitHub - func0der/colorfulTabs: A firefox extension originally written by binaryturf with some modifications

スタイル | Firefoxアドオン開発

XULで動的にスタイルシートを読み込む方法が分かった - mollifier delta blog

nsIStyleSheetService - Mozilla | MDN