We Keep Coding

Context menu not showing up in Firefox addon

I'm trying to create a Firefox addon that adds a context menu item when right-clicking on pages.
I'm using the instructions on this MDN page:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items
As per the instructions I've written a manifest.json to include the contextMenus permission:
{
"manifest_version": 2,
"name": "TestAddon",
"version": "0.1",
"description": "Test",
"icons": {
"48": "icons/icon-48.png"
},
"permissions": ["contextMenus"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["background-script.js"]
}
],
"browser_specific_settings": {
"gecko": {
"id": "sitetimelimiter#example.com",
"update_url": "https://example.com/updates.json"
}
}
}
...and in background-script.js I've written the code using the guidelines on that MDN article, with a few extra log lines for debugging:
console.log('mark 1');
browser.contextMenus.create({
id: "test-item",
title: "Test context-menu item",
contexts: ["all"],
}, onCreated);
console.log('mark 2');
browser.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "test-item":
alert("Test worked!");
break
}
});
console.log('mark 3');
As far as I can tell all of that is in line with the MDN doc.
When I go to about:debugging and click "Load Temporary Add-on..." to test the addon, it loads the addon without any errors.
But when I load a test page in the browser and right-click the page, the test item hasn't been added to the context menu.
Looking at the console, I can see that "mark 1" is shown, but "mark 2" and "mark 3" never get logged.
This seems to indicate a problem in this section here:
browser.contextMenus.create({
id: "timer-reset",
title: "Reset page timer",
contexts: ["all"],
}, onCreated);
...but I've triple-checked and that syntax seems to line up perfectly with the MDN doc.
I've also seen other MDN docs that instruct me to use browser.menus.create() instead of browser.contextMenus.create(), but I get the same results regardless of whether I use .menus or .contextMenus
What am I missing?

The issue is that you are trying to access browser.contextMenus in the content scripts. They are only available in a background script.
From MDN page you linked to:
You can then add (and update or delete) the context menu items in your extension's background script.
So you need to move that part of the code into a background script, in manifest.json:
"background": {
"scripts": ["background.js"]
}

chrome.browserAction.onClicked fires when I load a new page

I am developing a very simple extension for Google Chrome which sets a badge text when the user presses the browser action icon. Here is the background.js:
chrome.browserAction.onClicked.addListener(function() {
chrome.browserAction.setBadgeText({text: "Ko"});});
When I load the extension for the first time in chrome://extensions there's no problem and works properly, but if I close and open the browser and then I go to a webpage the Badge text appears automatically even when I have not pressed the browser action icon as you can see in the image:
This is my manifest.json:
{
"name": "Hello Extensions",
"description": "Base level extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "check-circle-green-512.png"
},
"background": {
"scripts":["background.js"]
},
"permissions": ["storage", "alarms", "notifications"]
}
Thanks for the help and greetings.

The browserAction button is common for all opened tabs and windows. When you set/change the badge text using setBadgeText this effect displayed on all tabs in all chrome windows. If you want a separate badge text for each window you will need to manage it at your own. See a simple example below that changes the badge text on tab onActivated event:
chrome.tabs.onActivated.addListener(function(activeInfo) {
console.log(activeInfo.tabId);
chrome.browserAction.setBadgeText({text: "T"+activeInfo.tabId});
});

Chrome extension: context menu icon not showing

I am building a Chrome extension and I set up a context menu which will show up and check the items (images or text) that the user selects from a table in the extension's popup.
This is my code for creating the context menu in popup.js's window.onload:
chrome.contextMenus.removeAll();
chrome.contextMenus.create( {title: "Toggle Selected",
documentUrlPatterns: [ "chrome-extension://*/popup.html"],
contexts:["selection"], onclick: toggleselected} );
This is the function that gets called on the context menu's onclick - also in popup.js (simplified version):
function toggleselected(info, tab)
{
var selection = window.getSelection(),
q0 = document.querySelectorAll("[id^='id0']"),
q1 = document.querySelectorAll("[id^='id1']");
for (var i = 0; i < somearray.length; i++)
{
if (selection.containsNode(q1[i], true))
{
somearray[i].checked = !somearray[i].checked;
q0[i].checked = !q0[i].checked;
}
}
updatesomearrayinfo();
}
And this is my manifest.json file (again, simplified version):
{
"manifest_version": 2,
"name": "Extension Name",
"version": "1.0",
"description": "Random description",
"browser_action":
{
"default_icon":
{
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_popup": "popup.html"
},
"background":
{
"scripts": ["somescript.js"],
"persistent": true
},
"permissions": ["contextMenus", "tabs", "downloads", "<all_urls>"]
}
Everything works fine and the context menu correctly shows up when needed ... except that it doesn't have the extension's own icon next to it, but the default Chrome extension icon (the grey one). What can be done to correct this behavior? The icons in my manifest are ok, one of them (the 16x16 pixels, I believe) is correctly shown on my extension button, and apart from others usually doing the whole context menu thing from event pages, using chrome.runtime.onInstalled, contextMenus.onClicked.addListener and other listeners (which I am reluctant to use, since I specifically need to work with the variables from popup.js - e.g. somearray and queries on popup's elements), I don't seem to be doing anything different than things done by other extensions or the code samples in the answers here on StackOverflow. And they all get their own extension icons shown, apparently without doing anything special.
EDIT: Also, does anyone knows why the context menu for a selection is triggered only when the selection contains more than one specific item (an image, in my case)?

Chrome Extension - executeScript not in active tab

I'm trying a simple Chrome Extension example which should enable me change the background color of any open youtube tabs to red. What I've noticed is that the background of the page is only turned red if I'm on the actual page i.e. it is the active tab.
Code:
function getYouTubeTabs() {
queryInfo = {
'url': '*://www.youtube.com/*'
};
chrome.tabs.query(queryInfo, function (result) {
for (i = 0; i < result.length; i++) {
chrome.tabs.executeScript(result[i].id, {
code: 'document.body.style.backgroundColor="red"'
});
}
});
}
This is the code I have, I might be missing something. Not sure if executeScript could be used on 'non-active' tabs. Thanks in advance.
EDIT
manifest.json
{
"manifest_version": 2,
"name": "First menu item",
"description": "Testing Context Menus",
"version": "1.0",
"permissions": [
"contextMenus", "tabs", "activeTab"
],
"icons": {
"16": "myicon.png",
"128": "myicon2.png"
},
"background": {
"scripts": ["background.js"]
}
}

The activeTab permission, allows you to call tabs.executeScript or tabs.insertCSS on that tab.
On the contrary, in order to be able to programmatically inject code into an non-active tab, besides the tabs permission, your extension must have cross-origin permissions for the page.
So, you need to modify your manifest's permissions section like this:
"permissions": [
...
"*://www.youtube.com/*"
],
Adding "persistent": false in the background section should work fine as well (and is the preferred way).

Chrome Extension: Open tab, go to url, fill form and submit form

I am following a tutorial here
http://www.blackweb20.com/2010/01/11/creating-your-own-google-chrome-extension/
I can open fine a tab with a custom extension and load a url, and I would like to fill and submit a form with javascript on the page opened. For example, could I submit a search on google.com?
Here is what I have so far:
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
background.html
<script>
// get tab http://stackoverflow.com/questions/1979583/how-can-i-get-the-url-for-a-google-chrome-tab
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://google.com"}, function(tab) {
// Tab opened. Wait until page loads, from here it is not working
jQuery(document).ready(function() {
jQuery('#tsf').submit();
});
});
});
</script>

Your jQuery code is getting executed in the background page not the new tab. Try using chrome.tabs.executeScript to execute the submit in the tab environment.

While you could do this using the chrome extension, I would suggest you to look into Selenium Browser Automation
It will also help you do the same in multiple browser instead of just chrome.