Firefox用WebExtensions拡張機能を作成する

2018/02/142020/11/08

下記の記事で作成したuserChrome.js用ユーザスクリプトを拡張機能で作成します。

Firefox userChrome.js用ユーザスクリプトを作成する

Firefoxの拡張機能を作成する

Firefox拡張機能(WebExtensions)を作成／公開には、以下の作業が必要となります。

拡張機能を作成する
拡張機能を試験する
拡張機能の署名をもらう
拡張機能を公開する

拡張機能を作成する

manifest.jsonは、拡張機能の様々な情報を書いておく為のファイルです。
background.jsは、manifest.jsonに記載してあるバックグラウンドで動作処理です。
以上の2つのファイルだけで本拡張機能は動作します。

manifest.json{
  "manifest_version": 2,
  "name": "CopyTabTitleUrl",
  "description": "コンテキストメニューを追加して、クリップボードへタイトルとURLをコピーします。",
  "version": "0.0.1",
  "applications": {
    "gecko": {
      "id": "CopyTabTitleUrl@bugbugnow.net"
    }
  },

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "permissions": [
    "activeTab",
    "contextMenus",
    "clipboardWrite",
    "tabs"
  ]
}

background.jsfunction copyToClipboard(text) {
    function oncopy(event) {
        document.removeEventListener("copy", oncopy, true);
        event.stopImmediatePropagation();

        event.preventDefault();
        event.clipboardData.setData("text/plain", text);
    }
    document.addEventListener("copy", oncopy, true);

    document.execCommand("copy");
}

browser.contextMenus.create({
    id: "context-copytab-title-url",
    title: "タブのタイトルとURLをコピー",
    contexts: ["tab"],
});
browser.contextMenus.create({
    id: "context-copytab-title",
    title: "タブのタイトルをコピー",
    contexts: ["tab"],
});
browser.contextMenus.create({
    id: "context-copytab-url",
    title: "タブのURLをコピー",
    contexts: ["tab"],
});
browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "context-copytab-title-url") {
        copyToClipboard(tab.title+'\n'+tab.url);
    }
    if (info.menuItemId === "context-copytab-title") {
        copyToClipboard(tab.title);
    }
    if (info.menuItemId === "context-copytab-url") {
        copyToClipboard(tab.url);
    }
});

動作の説明

「タブのタイトルとURLをコピー」、「タブのタイトルをコピー」、「タブのURLをコピー」のメニューをタブのコンテキストメニューに追加します。メニューをクリックした場合、クリップボードにタイトル／URLをコピーします。

メニューは、「CopyTabTitleUrl」でグループ化され、メニュー下部に配置されます。（userChrome.jsのように上部にグループ化しないで配置する方法を発見できませんでした。グループ化しないだけならば、メニューを１つのみにすることで実現できます）

xpi生成

上記の2ファイルをzip形式で圧縮します。圧縮の際に、2ファイルのみを圧縮します。ただし、2ファイルの親フォルダを含んではいけません。生成した、zipファイルの拡張子をxpiに変更すれば、完成です。

補足

拡張機能作成には、以下のウェブページを参考になります。

初めての拡張機能 - Mozilla | MDN
ブラウザー拡張機能 - Mozilla | MDN
webextensions-examples - GitHub
What are extensions? - Google Chrome
- WebExtensionsは、GoogleChromeの使用するextensionAPI とある程度互換性があるため、extensionAPIの資料が参考になります。

拡張機能を試験する

パッケージ化してインストールする

開発用のFirefoxをインストールする
- Firefox Quantum: Developer Edition
- Firefox Nightly
未署名の拡張機能をインストール可能にする
- URLバーにabout:configを入力する
- xpinstall.signatures.requiredの値をfalseにする
作成したxpiをFirefoxにインストールする
- Firefoxにxpiファイルをドラッグ＆ドロップする
試験する
1. 開発ツール（F12）
  - 設定（F1）
    - [詳細設定]
      - [ブラウザーとアドオンのデバッガーを有効化] を有効にする
      - [リモートデバッガーを有効化] を有効にする
2. ブラウザ開発ツール（Ctrl+Shift+Alt+i）
  - JavaScriptのエラー停止を確認できる
  - console.log('文字列');を確認できる

ディスクから読み込む

about:debugging#/runtime/this-firefoxをアドレスバーに入力する
[一時的なアドオンを読み込む]からmanifest.jsonを読み込む
- 通常のFirefoxに一時的にアドオンを読み込める
- [調査]から開発ツールを表示できる
- [再読み込み]でソースを更新できる

拡張機能の署名をもらう

拡張機能を通常のFirefoxで使用するためには、署名を貰わなければなりません。自作の拡張機能であっても署名がない場合、通常のFirefoxへのインストールすることができません。Firefox Add-onsに登録し、xpiファイルをアップロードして署名をもらいます。拡張機能のaddons.mozilla.orgでの公開有無に関係なくxpiファイルをアップロードする必要があります。

拡張機能を公開する

上記の拡張機能の署名をもらう作業で公開を選択した場合、addons.mozilla.orgで拡張機能を公開することができます。
記事作成時に作成した拡張機能は、CopyTabTitleUrlで公開しています。

xpiファイルを直接配布する方法は、採用しなかったため不明です。（xpiファイルに直接リンクを貼ればいいのかな？）

バグ取りの日々