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

下記の記事で作成した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のように上部にグループ化しないで配置する方法を発見できませんでした。グループ化しないだけならば、メニューを1つのみにすることで実現できます)

xpi生成

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

補足

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

拡張機能を試験する

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

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

ディスクから読み込む

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

拡張機能の署名をもらう

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

拡張機能を公開する

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

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

CopyTabTitleUrl

参考

関連記事

  1. Firefox userChrome.js用ユーザスクリプトを作成する
  2. Firefox用WebExtensions拡張機能を作成する
  3. Chromeの拡張機能を作成する
  4. Firefox用WebExtensions拡張機能を国際化する
  5. Chrome、Firefox、Edgeの拡張機能を判定する
  6. Chrome、Firefox拡張機能のブラウザアクションでポップアップあり・なしを共存する
  7. Chrome、Firefoxの拡張機能にショートカットを実装