概要
Firefox の Webextension でコンテキストメニューに独自のメニューを追加する方法を紹介します
環境
- macOS 10.13.6
- Firefox 62.0
manifest.json
{
"manifest_version": 2,
"name": "Context menu extension",
"version": "1.0",
"description": "Add original item into context menu",
"icons": {
"48": "icons/border-48.png"
},
"background": {
"scripts": ["main.js"]
},
"permissions": [
"menus"
]
}
context_scripts ではなく background で動作させる必要があります
また permissions に「menus」を追加する必要があります
main.js
function onCreated() {
if (browser.runtime.lastError) {
console.log(`Error: ${browser.runtime.lastError}`);
} else {
console.log("Item created successfully");
}
}
browser.menus.create({
id: "my-context-menu",
title: "Hello!",
contexts: ["all"]
}, onCreated);
browser.menus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "my-context-menu":
console.log("clicked");
break;
}
});
まず browser.menus.create でコンテキストメニューに項目を追加します
引数に id, title, contexts を指定します
id はクリックしたときの識別子として使うので好きな文字列を設定してください
title はコンテキストメニューに表示される項目名を指定します
contexts は項目を表示するのをどんなときにするか設定することができます
all にしておけばどんなときのコンテキストメニューでも追加した項目が表示されます
指定可能なタイプはこちらに記載されています
最後に項目がメニューに追加された際のコールバック用のメソッドを設定します
今回は onCreated メソッドをコールバックメソッドとして設定しています
このコールバックメソッドは項目が追加されたかどうかチェックするためのメソッドになります
実際に項目がクリックされたときの挙動を実装するには browser.menus.onClicked.addListener を設定します
onClicked というイベントにリスナーを設定します
リスナー内で info.menuItemId を取得し先程設定した id だった場合にどういう挙動をするか実装することができます
とりあえず今回は console.log しかしていませんがここで DOM の操作や XMLHttpRequest などを使ったりします
ちなみに console.log は background モードでないと表示することができないので注意してください
動作確認
about:debugging を開いて extension をインストールしましょう
すると右クリックのメニューに新しく項目が追加されていることが確認できると思います
今回はアイコンを配置していないので左にアイコンが表示されていません
またクリックするとデバッグ画面にしっかりとログが表示されているのも確認できると思います
キーボードショートカットを割り当てるには
コンテキストメニューが表示されたときに特定のキーボードを押すと項目をクリックしないでも実行することができる機能があります
WebExtension の場合には API として明示的に提供されていません
しかし項目のタイトルの先頭に割り当てたい文字を設定すると同じようなことができるようになります
例えば今回の場合であれば以下のように定義すれば「H」キーで実行することができます
browser.menus.create({
id: "my-context-menu",
title: "H) Hello!",
contexts: ["all"]
}, onCreated);
最後に
Firefox の Webextension でコンテキストメニューに新たに項目を追加する方法を紹介しました
コンテキストメニューであればすべて Javascript だけでできます
またここから新たに UI (ウィンドウなど) を表示する場合には HTML の追加が必要になります
参考サイト
