2018-07-05T20:26:08Z

Firefox用WebExtensionsアドオンを作成する:CopyTabTitleUrl

FirefoxのuserChrome.js用スクリプト:CopyTabTitleAndURL.uc.js」のFirefoxアドオン版の作成記事です。

Firefoxのアドオンを作成する

Firefoxアドオンを作成/公開するためには、以下の作業が必要となります。

  • アドオンを作成する
  • アドオンを試験する
  • アドオンの署名をもらう
  • アドオンを公開する

アドオンを作成する

以下が作成した2つのファイルです。
manifest.jsonは、アドオンの名前やアイコン、機能面についての様々な情報を書いておく為のファイルです。
background.jsは、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"
  ]
}
function 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に変更すれば、完成です。

補足

アドオン作成の際には、以下のWebページを参考にするといいです。

アドオンを試験する

アドオンを試験します。以下の作業が必要です。

  • 開発用のFirefoxをインストールする
  • about:configで、xpinstall.signatures.requiredの値をfalseにする
  • 作成したxpiをFirefoxにインストールする(ドラッグ&ドロップする)
  • 試験する
    • JavaScript等のエラーで停止した場合、ブラウザーツールボックスを表示しておくことで停止位置等を表示する。
    • 拡張機能のJavaScript処理で、console.log('文字列');を開発ツール(Ctrl+Shift+Alt+iの方)のコンソールから確認できます。

アドオンの署名をもらう

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

アドオンを公開する

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

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

enter image description here

参考

 コメントを書く