概要
この記事は初心者のブラウザ拡張機能 Advent Calendar 2024の1日目の記事です。
Firefoxを使ってブラウザ拡張機能を作るときの流れを説明します。
今回はサンプルとしてQiitaの拡張機能を作ることにして、記事内のタグの背景色を変更してみます。
大まかな流れ
-
manifest.jsonを作る - メインの処理を書いたJavascriptを作る
- アイコンを作る
- 公開する
1. manifest.jsonを作る
manifest.jsonとはブラウザ拡張機能の仕様書のようなもので、バージョンや詳細な説明、使用するJavascriptファイル、ブラウザの権限などを設定します。
最小限のファイルを作ります。
{
"manifest_version": 3,
"name": "init-extention",
"version": "0.1",
"description": "これは初めてのブラウザ拡張機能です。Qiitaの記事内のタグの背景色を変えます。",
"icons": {
"48": "icons/icon-48.png"
},
"content_scripts": [
{
"matches": ["*://qiita.com/*"],
"js": ["main.js"]
}
]
}
| 項目 | 説明 | 注意点 |
|---|---|---|
| manifest_version | マニフェストファイルのバージョンです。2か3を選びます。 | Firefoxは2でも3でも現在動くのですが、Google Chromeは3のみのようです。なので3にしておいたほうがよさそうです |
| name | 拡張機能の名称 | |
| version | 拡張機能のバージョン | 正式に公開する際はこのバージョンを上げていくのでバージョン管理を考えてつけたほうがよいです |
| content_scripts | 拡張機能に登録するJavascriptで、主にページ内の要素に対する変更を行います。matchesでスクリプトを実行する対象のドメインを指定し、jsでファイルを指定します。 |
ブラウザのメニューなどページ要素以外はbackgroundスクリプトに記述します |
2. メインの処理を書いたJavascriptを作る
処理はタグを表示しているHTMLの要素を取り出し、背景色を変えるだけです。
ここでは簡単に背景色を赤色に変えます。
const tags = document.querySelectorAll("a.style-mp1hhj");
tags.forEach(tag => {
tag.style.backgroundColor = "red";
});
document.querySelectorAllは指定したセレクタに一致する要素をリスト（NodeList）で返します。
Document: querySelectorAll() メソッド
これはループ処理ですべての要素にアクセスできるので、forEachで一つづつ取り出しstyle.backgroundColorに好きな色を指定します。ここでは"red"を使いました。
3. アイコンを作る
アイコンはなくても問題ないですが、拡張機能を表すものにしておくとわかりやすいです。
基本は48ピクセル✕48ピクセルです。
今回はこれを使いました。こちらを使っていただいても大丈夫です。
4. 公開する
FirefoxのURLバーにabout:debugging#/runtime/this-firefoxを入力して検索します。
するとデバッガー画面に遷移します。一時的なアドオンを読み込むを押して
エクスプローラーより今回作成したファイルのうちmanifest.jsonを選びます。
すると登録されます。
これはあくまで一時的な公開で完全にローカルでの利用です。再起動などで無効になってしまいます。開発中はここで動作をチェックするとよいでしょう。
正式な公開方法はアドベントカレンダーの別記事で扱います
この状態でQiitaの画面に接続すると、タグの色が変わって見えます。
タグ名ごとに色を変える、タグ名の前にアイコンをいれるなども工夫次第でできそうです。