概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の15日目の記事です。
コンテキストメニューを作ります。
コンテキストメニューとは
タブやページ上で右クリックした際に表示されるメニューのことです。
コンテキスト、つまり文脈や属性に対応したメニューが表示されます。
具体的なコード
コンテキストメニューを追加し、クリックされたときに通知する拡張機能です。
manifest.json
{
"browser_specific_settings": {
"gecko": {
"id": "the-town-sample-contextmenu@example.com"
}
},
"manifest_version": 3,
"name": "init-extention",
"version": "0.1",
"description": "コンテキストメニューサンプル",
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"menus",
"notifications"
]
}
permissionsでコンテキストメニューに必要なmenusを追加します。
Mozillaの記事ではcontextMenusとなっていますが、私の環境ではうまく動作しなかったためmenusとしています。
background.js
browser.menus.create(
{
id: "sample",
title: "sample menu",
contexts: ["page"],
}
);
function createNotification() {
browser.notifications.create({
type: "basic",
iconUrl: browser.runtime.getURL("icons/icon-48.png"),
title: "Clicked!",
message: "クリックしました",
});
}
browser.menus.onClicked.addListener((info, tab) => {
console.log("clicked");
if (info.menuItemId === "sample") {
createNotification();
}
});
browser.menus.createでコンテキストメニューを追加します。
contextsでどの属性で表示するメニューか指定します。ここではpageにしていますが、ほかにもallやbookmarkなどがあります。