Firefox 57から古き良きアドオンたちが使えなくなったので、
とりあえず手始めにマウスジェスチャーを作りました。
このページではとりあえず基本的な準備まで。

0. はじめに

使用言語は生JavaScript。ライブラリは使ったら負け。
Firefox 57以降向けに書いていくので、ES6も7もasync/await含めごりごり使っていきます。

そもそもWebExtensionsとは

昔のアドオン (Legacy Add-on) に比べてセキュリティが強化された（らしい）
W3Cで標準化されているらしく、ChromeやEdgeにもコードが使い回せる（らしい）

開発環境

Windows 10 x64
Visual Studio Code（使いやすい！）

基本的なファイル構造

src/
- manifest.json
  - アドオンの基本情報を書く。ファイル名もこの通りじゃないとダメ。
- background.js
  - バックグラウンドで動くスクリプト。つまりブラウザを起動すると一緒に動き始める。
  - 全WebExtensions APIが使えるが、各ページにはアクセスできない。
- content.js
  - それぞれのタブ（ページ）で動くスクリプト。コンテンツスクリプトを言うらしい。
  - WebExtensions APIのうちruntime, i18n, storageくらいしか使えない。

1. マニフェストを書く

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json
manifest.jsonにアドオンの基本情報を書きます。JSON形式だがコメントも書けるらしい。

manifest.json

{
    "manifest_version": 2, // 必ず2
    "name": "アドオンの名前",
    "version": "バージョン",
    "description": "簡単な説明",
    "developer": {
        "name": "開発者の名前",
        "url": "開発者のページとか"
    },
    "permissions": ["*://*/", "notifications", "sessions", "storage"], // 必要なパーミッション
    "icons": { // アイコンは48×48pxと96×96pxのものを準備する（とりあえずなくてもOK）。SVGなら同じでいい。
        "48": "icon.svg",
        "96": "icon.svg"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "all_frames": true, // trueだとフレームごとにスクリプトが動く。falseだとwindow.topだけ（デフォルト）。
            "js": ["content.js"],
            "match_about_blank": true, // about:blankで動かすか
            "matches": ["<all_urls>"], // どのURLの場合に動かすか
            "run_at": "document_start" // どのタイミングで動かすか
        }
    ],
    "content_security_policy": "default-src 'self'", // なくてもよし
    "options_ui": {
        "page": "options.html", // 設定ページ
        "open_in_tab": true // タブで開く(true) かアドオンマネージャーに組み込む (false) か
    }
}

必要なパーミッションについては https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions

スクリプト書いている内に必要なパーミッションがわかってくるので、とりあえず形だけ作っておきましょう。
アイコン、設定ページは必要な場合のみ。不必要ならごっそり削除。

content_scriptsのrun_atは次の3通り。

"document_start" - ページを読み込み始めてすぐ。
"document_end" - DOMを読み込み終わったら。いわゆるDOMContentLoaded。
"document_idle" - ページを読み込み終わってから（画像含め）。window.onloadと同じ。デフォルトはコレなので要注意。

2. スクリプトを書く

WebExtensions APIはグローバル変数browserに入っています。ちなみにChromeの場合はchromeに入っているようです。Firefoxでは両方使えます。
癖で即時関数を使ってしまいました。

background.js

(function () {
    console.log('Hello, background script!');
    console.log(browser);
})();

content.js

(function () {
    console.log('Hello, content script!');
    console.log(browser);
})();

3. デバッグしてみる

about:debuggingにアクセス
アドオンのデバッグを有効化 にチェック
[一時的なアドオンを読み込む] からmanifest.jsonを選択
読み込まれたアドオンの[デバッグ]をクリック
“リモートデバッグ接続要求”なるものを許可（わかりにくい）

これでアドオン (background.js) のコンソールが表示されます。
また各ページのコンソールには Hello, content script! などとふざけた文字列が表示されるはずです。
browserの中身は先述の通り、利用できるAPIの数が違うのでbackground.jsとcontent.jsで大きく異なります。パーミッションによっても変わります。

ちなみにmanifest.jsonに誤りがあるとそもそもアドオンを読み込めません。

とりあえずここまで。

Firefox Quantum向けのWebExtensionsアドオンを作ってみる0