Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – First Firefox extension test not going well

I am writing a first test of a firefox extension. I am using the following websites as assistance:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items

https://github.com/mdn/webextensions-examples/blob/main/menu-demo/background.js

Here is my code:

mainfest.json

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
    {
     "matches":["<all_urls>"],
     "js":["main.js"]
    }
  ],
  "permissions":["contextMenus"]
}

main.js

alert("test");

function onError(error) {
  alert(error);
}

browser.contextMenus.create(
  {
    id: "AlertTest",
    title: "Test2",
    contexts: ["all"],
  },
  onCreated,
);

alert("Test 2");

browser.contextMenus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case "AlertTest":
      console.log(info.selectionText);
      alert("The test extension is up and running");
      break;
  }
});

The extension does load, but i never get to alert("Test 2");. In addition the console says "TypeError: browser.contextMenus is undefined". Please let me know what I’m doing wrong.

Edit: Getting closer, but context menu addition still isn’t showing up. Current code…

manifest.json

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test",
  "background": {
      "scripts": ["background.js"],
      "persistent": false
  },
  
  "permissions": [
    "contextMenus",
    "activeTab"
  ]
}

background.js

function onError(error) {
  console.log(error);
}

browser.contextMenus.create(
  {
    id: "AlertTest",
    title: "Test2",
    contexts: ["all"],
  },
  onCreated,
);

browser.contextMenus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case "AlertTest":
      console.log(info.selectionText);
      break;
  }
});

Thanks once again for any help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The main error has been that the script needs to be in the background, not run as a content script, as suggested by Barmar and erosman.

    The secondary issue is that "onCreated" is not recognized when creating a context menu item. I replaced that with something from an example that Barmar provided, and I don't QUITE understand what the thing that replaces it does. It seems to be catching an error and sending it somewhere. The code is now working though, as seen below:

    manifest.json

    {
    "manifest_version": 2,
    "name": "Test",
    "description": "Tests adding a context menu item.",
    "version": "1.0",
    
    
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    
    "permissions": [
        "activeTab",
        "contextMenus"
    ]
}

    background.js

    console.log("Start");

browser.contextMenus.create(
    {
        id: "AlertTest",
        title: "Test2",
        contexts: ["all"],
    },
    () => void browser.runtime.lastError,
);

browser.contextMenus.onClicked.addListener((info, tab) => {
    switch (info.menuItemId) {
    case "AlertTest":
        console.log(info.selectionText);
        break;
    }
});

function onError(error) {
    console.log(error);
}

  2. 0

    Content scripts WebExtension APIs are limited.
    browser.contextMenus is not available in the "content_scripts". It should be created and listened to in the background script.

    For example:

    mainfest.json

    {
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "background": {
    "scripts": ["main.js"]
  },
  "permissions":["contextMenus"]
}

    Note: alert() is not available in the background script. Use console.log() instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search