ChromeとFirefoxにてHello World表示する拡張機能(アドオン)を作成する方法

Google Chrome / Firefoxの拡張機能(アドオン)を作ってみたい。まずは指定したドメインのページにアクセスするとalertとconsole.logで「Hello World」表示するといったものを作りたい。以下に拡張機能の作成からブラウザへのインストール方法までメモ。

事前準備

(必要に応じて)アイコン画像の作成

アイコン画像ジェネレーター等でアイコン画像を作成しておく。今回は128x128サイズのpng画像を「128.png」というファイル名で作成した。

ディレクトリの用意

以下ディレクトリをPC内に作成しておく。拡張機能に関するファイルはhello_world内に作成する。

hello_world/
└icons/
  └ 128.png

拡張機能の作成

拡張機能のための各種設定ファイル(manifest.json)

以下をmanifest.jsonというファイル名でhello_worldディレクトリに作成。ファイル名は固定。

尚、対象サイト部分(content_scripts内のmatches)は適宜変更すること。

{
    //拡張機能の開発仕様
    "manifest_version": 3,

    //拡張機能の名前
    "name": "Hello World表示",

    //拡張機能の名前
    "version": "1.0",

    //拡張機能の説明
    "description": "Hello Worldを表示します",

    //アイコン設定
    "icons": {
        "128": "icons/128.png"
    },

    //特定のブラウザ専用の設定
    "browser_specific_settings": {
        //firefox用設定
        "gecko": {
            //ユニークID(実際のメールアドレスにはしない)
            "id": "hello@sample.org",

            //データを収集する際の権限設定
            "data_collection_permissions": {

                //収集しない設定
                "required": ["none"]
            }
        }
    },

    //対象サイトと読み込むファイルの設定
    "content_scripts": [
        {
            //対象サイト
            "matches": ["*://test.com/*"],

            //全サイトを指定したい場合は以下
            //"matches": ["<all_urls>"],

            //読み込むファイル
            "js": ["main.js"]
        }
    ]
}

Hello Worldを表示するファイル(main.js)

以下をmain.jsというファイル名でhello_worldディレクトリに作成。ファイル名は任意で異なるファイル名にする場合はmanifest.jsonのcontent_scripts内のjsを書き換える。

const msg = 'Hello World';
alert(msg);
console.log(msg);

補足

ディレクトリ構造とファイル設置状況

以下のようになっていればOK。

hello_world/
├── icons/
│   └── 128.png
├── main.js
└── manifest.json

CSSも使用可

今回はJavaScriptファイル(main.js)のみ使用しているが、CSSファイルも使用可能。

manifest.jsonのcontent_scripts内に「"css": ["style.css"]」のように指定する。

ブラウザへ拡張機能をインストール

Google Chromeの場合

Chromeで「chrome://extensions/」を開き、ページ右上の「デベロッパーモード」をOnにする。すると「パッケージ化されていない拡張機能を読み込む」ボタンが表示されるのでクリックし、hello_worldディレクトリを読み込むとインストールされる。

対象サイト部分(content_scripts内のmatches)に記載しているサイトへアクセスすると「Hello World」表示が確認できる筈。また、アイコンを用意している場合はその表示も確認できる筈。

Chromeだと以上でインストール完了となる。

Firefoxの場合

Firefoxの場合、一時的なインストールと永続インストールがあり、以下がざっくりとした違い。

• 一時的なインストール -> インストール後、再起動すると自動的に削除される。Mozillaの開発者センターへの申請等は不要。テスト段階の場合に最適。
• 永続インストール -> インストール後、再起動しても削除されず、通常の拡張機能として使用できる。Mozillaの開発者センターへの申請が必要だが、拡張機能の公開 or 非公開は選択可。本番段階の場合に最適。

まずは一時的なインストール方法は以下の通り。

一時的なインストール方法

Firefoxで「about:debugging#/runtime/this-firefox」を開き「一時的なアドオンを読み込む」をクリックし、manifest.jsonを読み込むとインストールされる。

対象サイト部分(content_scripts内のmatches)に記載しているサイトへアクセスすると「Hello World」表示が確認できる筈。また、アイコンを用意している場合はその表示も確認できる筈。

以上で一時的なインストールが完了。

永続インストール

まずhello_worldディレクトリのファイルをまとめてzipファイル化する。

その際の注意点としてzipファイルを展開した際に以下ディレクトリ構造になっている必要がある。

hello_world/
├── icons/
│   └── 128.png
├── main.js
└── manifest.json

ただ、Windowsの場合、hello_worldディレクトリをzipファイル化すると以下のようになっている筈(Macの場合は知らない)。

hello_world/
└── hello_world/
    ├── icons/
    │   └── 128.png
    ├── main.js
    └── manifest.json

正解のディレクトリ構造にするためにはhello_worldをzipファイル化するのではなく「iconsディレクトリ」「main.js」「manifest.json」を範囲選択→右クリック→圧縮先→ZIPファイルでzipファイル化すること。

次に開発者センターページ右上の「拡張機能を登録または管理」ボタンをクリックする。

Firefoxアカウントがある場合はそのままログイン、無い場合は新規作成後にログインする。

ログイン後に新しいアドオンを登録の際「このバージョンの配布手段」に以下2択のラジオボタンが表示されるが、非公開にしたい場合は「On your own」の方を選択すること。

• このサイトでは、あなたの投稿が addons.mozilla.org に公開されています。
• On your own. After your submission is signed by Mozilla, you can download the .xpi file from the Developer Hub and distribute it to your audience. Please make sure the add-on manifest’s update_url is provided, as this is the URL where Firefox finds updates for automatic deployment to your users.
  You can learn more about these options by reading Add-on Distribution and Signing on Firefox Extension Workshop.All add-ons must comply with Mozilla’s Add-on Policies and are subject to manual review at any time after submission.

念のため「On your own」の翻訳した内容は以下の通り。

ご自身で配布を行う場合、提出したアドオンがMozillaによって署名された後、Developer Hubから.xpiファイルをダウンロードし、ユーザーに配布することができます。その際、アドオンのマニフェストに`update_url`が指定されていることを必ず確認してください。これは、Firefoxがユーザーへの自動展開用に更新情報を取得するためのURLとなります。

アップロードページに進むので先ほどのzipファイルをアップロードする。問題が無ければそのまま進めると審査に入る。

審査(数分～数十分程度)が完了するとxpiファイルがダウンロードできるので、Firefoxで「about:addons」を開いて右上の歯車マークをクリック→ファイルからアドオンをインストールを選び、先ほどのxpiファイルを選択してインストールする。

以上で永続インストールが完了。

補足

console.logの確認方法

console.logはブラウザの開発者ツール(F12)で確認できる。

開発者センターに登録したアドオンは削除した場合

開発者センターから審査後の拡張機能を削除した場合、xpiファイルの署名が無効化され、Firefoxへインストールできないもしくはインストールできても機能しなくなる可能性あり。

今後一切使わない場合は削除してもよいが、使用するのであれば削除してはいけない。

リファレンス

Chrome

https://developer.chrome.com/docs/extensions/reference?hl=ja

Firefox

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions