概要

この記事は初心者のブラウザ拡張機能 Advent Calendar 2024の1日目の記事です。

Firefoxを使ってブラウザ拡張機能を作るときの流れを説明します。

今回はサンプルとしてQiitaの拡張機能を作ることにして、記事内のタグの背景色を変更してみます。

大まかな流れ

manifest.jsonを作る
メインの処理を書いたJavascriptを作る
アイコンを作る
公開する

1. manifest.jsonを作る

manifest.jsonとはブラウザ拡張機能の仕様書のようなもので、バージョンや詳細な説明、使用するJavascriptファイル、ブラウザの権限などを設定します。

最小限のファイルを作ります。

manifest.json

{
    "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の要素を取り出し、背景色を変えるだけです。
ここでは簡単に背景色を赤色に変えます。

main.js

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の画面に接続すると、タグの色が変わって見えます。

タグ名ごとに色を変える、タグ名の前にアイコンをいれるなども工夫次第でできそうです。

参考

初めての拡張機能