This example creates a context menu item that's shown when the user has selected some text in the page. It just logs the selected text to the console:
browser.menus.create({
id: "log-selection",
title: "Log '%s' to the console",
contexts: ["selection"]
});
browser.menus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "log-selection") {
console.log(info.selectionText);
}
});
This example adds two radio items, which you can use to choose whether to apply a green or a blue border to the page. Note that this example will need the activeTab permission.
function onCreated() {
if (browser.runtime.lastError) {
console.log("error creating item:" + browser.runtime.lastError);
} else {
console.log("item created successfully");
}
}
browser.menus.create({
id: "radio-green",
type: "radio",
title: "Make it green",
contexts: ["all"],
checked: false
}, onCreated);
browser.menus.create({
id: "radio-blue",
type: "radio",
title: "Make it blue",
contexts: ["all"],
checked: false
}, onCreated);
let makeItBlue = 'document.body.style.border = "5px solid blue"';
let makeItGreen = 'document.body.style.border = "5px solid green"';
browser.menus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "radio-blue") {
browser.tabs.executeScript(tab.id, {
code: makeItBlue
});
} else if (info.menuItemId == "radio-green") {
browser.tabs.executeScript(tab.id, {
code: makeItGreen
});
}
});