mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
9433f842d6
* Extension now is up-to-date with the Menus API In the previous version of this extension, the author used a comment to explain that the `browser.menus.onClicked.addListener` event listener doesn't pass the current check state of a checkbox menu. To solve this, an additional variable checkedState was used to keep track of the current value of the context menu. But now, this function is supported by the menus API in Firefox. I changed the code to reflect how you would use it with the recent versions, making it easier for new developers to learn this functionality. * Comment now reflects new function body
161 lines
3.6 KiB
JavaScript
161 lines
3.6 KiB
JavaScript
/*
|
|
Called when the item has been created, or when creation failed due to an error.
|
|
We'll just log success/failure here.
|
|
*/
|
|
function onCreated() {
|
|
if (browser.runtime.lastError) {
|
|
console.log(`Error: ${browser.runtime.lastError}`);
|
|
} else {
|
|
console.log("Item created successfully");
|
|
}
|
|
}
|
|
|
|
/*
|
|
Called when the item has been removed.
|
|
We'll just log success here.
|
|
*/
|
|
function onRemoved() {
|
|
console.log("Item removed successfully");
|
|
}
|
|
|
|
/*
|
|
Called when there was an error.
|
|
We'll just log the error here.
|
|
*/
|
|
function onError(error) {
|
|
console.log(`Error: ${error}`);
|
|
}
|
|
|
|
/*
|
|
Create all the context menu items.
|
|
*/
|
|
browser.menus.create({
|
|
id: "log-selection",
|
|
title: browser.i18n.getMessage("menuItemSelectionLogger"),
|
|
contexts: ["selection"]
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "remove-me",
|
|
title: browser.i18n.getMessage("menuItemRemoveMe"),
|
|
contexts: ["all"]
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "separator-1",
|
|
type: "separator",
|
|
contexts: ["all"]
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "greenify",
|
|
type: "radio",
|
|
title: browser.i18n.getMessage("menuItemGreenify"),
|
|
contexts: ["all"],
|
|
checked: true,
|
|
icons: {
|
|
"16": "icons/paint-green-16.png",
|
|
"32": "icons/paint-green-32.png"
|
|
}
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "bluify",
|
|
type: "radio",
|
|
title: browser.i18n.getMessage("menuItemBluify"),
|
|
contexts: ["all"],
|
|
checked: false,
|
|
icons: {
|
|
"16": "icons/paint-blue-16.png",
|
|
"32": "icons/paint-blue-32.png"
|
|
}
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "separator-2",
|
|
type: "separator",
|
|
contexts: ["all"]
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "check-uncheck",
|
|
type: "checkbox",
|
|
title: browser.i18n.getMessage("menuItemUncheckMe"),
|
|
contexts: ["all"],
|
|
checked: true,
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "open-sidebar",
|
|
title: browser.i18n.getMessage("menuItemOpenSidebar"),
|
|
contexts: ["all"],
|
|
command: "_execute_sidebar_action"
|
|
}, onCreated);
|
|
|
|
browser.menus.create({
|
|
id: "tools-menu",
|
|
title: browser.i18n.getMessage("menuItemToolsMenu"),
|
|
contexts: ["tools_menu"],
|
|
}, onCreated);
|
|
|
|
/*
|
|
Set a colored border on the document in the given tab.
|
|
|
|
Note that this only work on normal web pages, not special pages
|
|
like about:debugging.
|
|
*/
|
|
let blue = 'document.body.style.border = "5px solid blue"';
|
|
let green = 'document.body.style.border = "5px solid green"';
|
|
|
|
function borderify(tabId, color) {
|
|
browser.tabs.executeScript(tabId, {
|
|
code: color
|
|
});
|
|
}
|
|
|
|
/*
|
|
Update the menu item's title according to current "checked" value.
|
|
*/
|
|
function updateCheckUncheck(checkedState) {
|
|
if (checkedState) {
|
|
browser.menus.update("check-uncheck", {
|
|
title: browser.i18n.getMessage("menuItemUncheckMe"),
|
|
});
|
|
} else {
|
|
browser.menus.update("check-uncheck", {
|
|
title: browser.i18n.getMessage("menuItemCheckMe"),
|
|
});
|
|
}
|
|
}
|
|
|
|
/*
|
|
The click event listener, where we perform the appropriate action given the
|
|
ID of the menu item that was clicked.
|
|
*/
|
|
browser.menus.onClicked.addListener((info, tab) => {
|
|
switch (info.menuItemId) {
|
|
case "log-selection":
|
|
console.log(info.selectionText);
|
|
break;
|
|
case "remove-me":
|
|
let removing = browser.menus.remove(info.menuItemId);
|
|
removing.then(onRemoved, onError);
|
|
break;
|
|
case "bluify":
|
|
borderify(tab.id, blue);
|
|
break;
|
|
case "greenify":
|
|
borderify(tab.id, green);
|
|
break;
|
|
case "check-uncheck":
|
|
updateCheckUncheck(info.checked);
|
|
break;
|
|
case "open-sidebar":
|
|
console.log("Opening my sidebar");
|
|
break;
|
|
case "tools-menu":
|
|
console.log("Clicked the tools menu item");
|
|
break;
|
|
}
|
|
});
|