ブラウザの拡張機能/アドオンの作り方(コンテキストメニュー)

拡張機能/アドオンは、JavaScript と Chrome Extension API で作ることができます。
FireFox の WebExtensions も同じですが、多少独自のAPIがあります。

以下では、ウェブページ上で選択した文字列をコンテキストメニュー(右クリックメニュー)から
GoogleやYahooで検索するための拡張機能を例に拡張機能の作り方です。

作成方法
拡張機能の読み込みとデバッグ方法
- GoogleChrome
- FireFox
拡張機能のパッケージ化

作成方法

ディレクトリを作成して、必要なファイルを揃える

必要なファイル

 ./contextMenus
 ├── manifest.json
 ├── icons
 │   ├── icon-128.png
 │   ├── icon-16.png
 │   ├── icon-19.png
 │   └── icon-48.png
 └── js
     └── background.js

画像は縦横 128 x 128, 48 x 48, 19 x 19, 16 x 16 のサイズを用意する。
(コンテキストメニューに表示されるのは 16 x 16 なのでサイズ16はあったほうがいい)

使用する画像は https://icooon-mono.com/ など、画像そのものを再配布しなければ、
クレジット表記や使用許可なしで商用利用も可能なものがあるので、それを使わせてもらうのがいい。

manifest.json

manifest.json は拡張機能の名前、バージョン、説明や使用するファイル(icon,html,js,css)などのメタ情報を記述するファイル。
コンテキストメニューに関する拡張機能を作る場合は、"permittions" に "contextMenus" を設定して
バックグラウンドは "persistent": true でスリープ状態にならないようにする

{
  "name": "contextMenus",
  "version": "0.0.0.1",
  "description": "description",
  "icons": {
    "128": "icons/icon-128.png",
    "48": "icons/icon-48.png",
    "19": "icons/icon-19.png",
    "16": "icons/icon-16.png"
  },
  "permissions": [
    "contextMenus",
    "tabs",
    "<all_urls>"
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "manifest_version": 2
}

FireFoxの場合は以下を付け加える必要がある。

"applications": {
  "gecko": {
    "id": "{b731654b-b767-4846-97bb-e725ce70582d}",
    "strict_min_version": "48.0"
  }
}

"applications" については browser_specific_settings に載っています。

"id" の GUID は $ uuidgen -r で生成できます。

background.js

以下、選択した文字列を検索するメニューアイテムを作成するコードです。コンテキストメニューに関するAPIの詳細 contextMenus

const m = [
    {
        "title" : "「%s」をGoogleで検索", // %s は選択文字列になる
        "type" : "normal",
        "contexts" : [ "selection" ],
        "onclick" : (info) => {
            let url = 'https://www.google.co.jp/search?q=' +
                      encodeURIComponent(info.selectionText);
            chrome.tabs.create({url : url});
        }
    },
    {
        "title" : "「%s」をYahooで検索",
        "type" : "normal",
        "contexts" : [ "selection" ],
        "onclick" : (info) => {
            let url = 'https://search.yahoo.co.jp/search?p=' +
                      encodeURIComponent(info.selectionText);
            chrome.tabs.create({url : url});
        }
    }
];

for (let v of m) chrome.contextMenus.create(v);

"type" ラジオボタンやチェックボックスに変更できる
"normal", "checkbox", "radio", or "separator"
"contexts" メニューアイテムをいつ表示するのかを設定するもので、 "link" ならリンク上で右クリックしたとき、"image" なら画像上で右クリックしたとき
その他 "all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", or "page_action"
"onclick" メニューアイテムをクリックしたときの動作。
onclick の関数に渡ってくる info の詳細は、contextMenus#event-onClicked
ページのタイトルやタブIDなど info 以外が必要な場合は第二引数で "onclick": (info, tab) => { というように tab を受け取れる
タブの詳細 tabs#type-Tab

拡張機能の読み込みとデバッグ方法

それぞれ、拡張機能を読み込んで、ファイルに変更を加えたら再読込して動作やエラーの有無を確認しながらデバッグします。

GoogleChrome

以下のページにフォルダごとドラッグ・アンド・ドロップする

chrome://extensions

FireFox

以下のページで「一時的なアドオンの読み込み」から manifest.json または .xpi ファイルを読み込む

about:debugging#/runtime/this-firefox

拡張機能のパッケージ化

GoogleChrome

chrome://extensions の右上にあるデベロッパーモードをオンにして、「拡張機能をパッケージ化」からフォルダを選択します。
Chrome は Web Store 外からインストールした拡張機能(crx)は有効化できないようなので、個人的に使うだけなら
デバッグの手順でドラッグ・アンド・ドロップで使用しするしかなさそうです。パスさえ変更しなければブラウザの再起動後も使うことができます。

FireFox

以下に詳しく載ってます https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation

about:config で xpinstall.signatures.required の値を false に変更しておく。
$ zip -r contextMenus.xpi * で .xpi を作成して about:addons にドラッグ・アンド・ドロップします。

golangの日記

Go言語を中心にプログラミングについてのブログ