Firefox拡張機能でbackgroundスクリプトを使うときの手順とサンプル

概要

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

Backgroundスクリプトを使うときの手順とサンプルを記載します。

Backgroundスクリプトについて

Contentスクリプトと異なりWebページの要素を直接操作するのではなく、ブラウザ自体の機能を拡張するものだといえます。

たとえば右クリックして出てくるメニューに自分のボタンを追加したり、拡張機能用にWebページを作ったりできます。

Background scripts

作り方

BackgroundスクリプトもContentスクリプトと同様にJavascriptで記述します。ここではサンプルとして右クリックしたときのメニューを追加してみます。

background.js

browser.menus.create(
  {
    id: "sample",
    title: "sample menu",
    contexts: ["page"],
  }
);

マニフェストファイルは以下のように作ります。
重要なのはpermissionsです。ブラウザ自体にアクセスして機能を追加するため適切な権限を割り当てます。今回はメニューを追加するためmenusとactiveTabを割り当てます。

詳しくは下記ページを参照ください。
permissions

また作成したbackground.jsをbackground.scriptsで追加します。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "[e-mail]"
        }
    },
    "manifest_version": 3,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "これは初めてのブラウザ拡張機能です。Qiitaの記事内のタグの背景色を変えます。",
  
    "icons": {
      "48": "icons/icon-48.png"
    },
    
    "background": {
        "scripts": ["background.js"]
      },
  
      "permissions": [
        "menus",
        "activeTab"
      ]
}

使っているアイコン画像や拡張機能の読み込み方法は以下を参照ください。

はじめてブラウザ拡張機能を作るときの流れ（Firefox）
Firefox拡張機能を開発者センターに限定公開する手順

この状態で読み込むと一番下にメニューが追加されます。