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

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

Firefox 57から古き良きアドオンたちが使えなくなったので、

とりあえず手始めにマウスジェスチャーを作りました。

このページではとりあえず基本的な準備まで。

0. はじめに

使用言語は生JavaScript。ライブラリは使ったら負け。

Firefox 57以降向けに書いていくので、ES6も7もasync/await含めごりごり使っていきます。

そもそもWebExtensionsとは

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/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に誤りがあるとそもそもアドオンを読み込めません。

---

とりあえずここまで。