Context menus not working firefox add-on WebExtensions

Question

I'm trying to add a context menu to my firefox add-on using the WebExtensions API. I need the background script to listen to a click on the menu item and send a message to the content script. This is what I have:

manifest.json

{
  "manifest_version": 2,
  "name": "MyExt",
  "version": "0.0.1",

  "description": "Test extension",
  "icons": {
    "48": "icons/icon-48.png"
  },

  "applications": {
    "gecko": {
      "id": "myext@local",
      "strict_min_version": "45.0"
    }
  },

  "permissions": ["contextMenus"],

  "background": {
    "scripts": ["background-scripts.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ]
}

background-scripts.js

chrome.contextMenus.create({
    id: "clickme",
    title: "Click me!",
    contexts: ["all"]
});

browser.contextMenus.onClicked.addListener(function(info, tab) {
    console.log("Hello World!");
    sendMessage(info, tab);
});

function sendMessage(info, tab) {
    chrome.tabs.query(
        {active: true, currentWindow: true }, 
        function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, "Test message from background script.");
        }
    );
}

content-script.js

browser.runtime.onMessage.addListener(function(msg) {
    console.log(msg);
});

The menu item is being created, but the messages are never displayed (I'm checking both the Web and Browser Console). Since the click event is not working, the message is not sent either.

I'm following this example from MDN, which does not work. It also creates the menu items, but they do nothing, which makes me think that something changed in the API and MDN didn't bother to update the documentation.

Any ideas? Thanks.

Pyrrhic

Answer 1

Your code works as written:

I strongly suspect that your issue is either of:

• You are testing using a version of Firefox prior to Firefox 48. Firefox 48 is in Beta. The contextMenus "Browser compatibility" section clearly states that the first version in which it is functional is Firefox 48. The WebExtensions API is still in development. In general, you should be testing against Firefox Developer Edition, or Firefox Nightly. You can use earlier versions if all the APIs you are using are indicated to be working in an earlier version. However, if you experience problems, you should test with Nightly. I suspect that this is your most likely issue as you indicated that the contextMenus example code was not doing anything.

• You have not navigated to an actual webpage. Your content-script.js is only loaded into pages that match one of the supported schemes: that is, "http", "https", "file", "ftp", "app". It is not loaded in about:* pages. If this was your issue, you would have had partial functionality from the contextMenus example code. In addition, using your code, the Browser Console would have, after a delay, generated an error message:

  Error: Could not establish connection. Receiving end does not exist.
  

A note on your code:
Note, your sendMessage() function is, potentially, overly complex. You are searching for the active tab when the tabs.Tab object for the tab in which the context menu item was selected was already passed to your function as one of the arguments. A shorter version could be:

function sendMessage(info, tab) {
    chrome.tabs.sendMessage(tab.id, "Test message from background script.");
}

I would be interested to know if you have encountered a situation where you needed to search for the active tab rather than use the tabs.Tab object provided by the context menu listener.

Advertent

Thank you. The problem was the version of Firefox. It was a silly mistake to assume that I had the latest version. Regarding Developer Edition, my actual add-on is much more complex than that and DE was doing something (I have no previous experience with web development, so I don't know what this "something" was) that prevented the add-on from working properly. I tested now and it's working fine. – Pyrrhic