I have a pretty simple extension.

Manifest:

"background": { 
    "service_worker": "background.js",
    "type": "module"
  },
  "minimum_chrome_version": "92",

Tools.js:

export function ToolsMethod(url) { return ""; }

background.js:

import "./Tools.js";

function A(info,tab) {
   ToolsMethod(tab.url);
}

chrome.runtime.onInstalled.addListener(() => {

  chrome.contextMenus.create({
    id: "A",
    title: "A", 
    contexts:["page"]
  });

const menuItemMap = { A: "A.id" }
const handlerMap = { [menuItemMap.A]:A  }
  
  chrome.contextMenus.onClicked.addListener(function (info, tab) {
    // !!! breakpoint is here 
    const { menuItemId } = info;
    const handler = handlerMap[menuItemId];
    if (handler) handler(info, tab);
  });
  
});

So, breakpoint is not working (devtools never stops there) and, the most important, A is never called when I click context menu: just nothing happens.

If I remove "import", "type" and just copy the code from Tools.js to background.js, it works fine (still no debug tho). Still, not what I'm looking for.

Any suggestions on how to debug/fix?

UPD: here's the reproducible zip: https://drive.google.com/file/d/1ElQ857W_opTwXJ7jxMHZuylaoNFEbWTh/view?usp=sharing Steps to repro:

1. Install the extension
2. Go to https://www.amazon.com/dp/B07FC2RN6G?ref=myi_title_dp (just a random product)
3. Expected result: context menu "Clan URL" updates current page URL to "https://www.amazon.com/dp/B07FC2RN6G" (cleans up the mess in the right side)
4. Current result: nothing happens after the click on the context menu. No stops at the breakpoints as well

CodePudding user response：

The way you are doing the import is wrong, the following code works ok:

• background.js

  import { sayBye, ToolsMethod } from './Tools.js';
  
  chrome.runtime.onInstalled.addListener(() => {
  
  chrome.contextMenus.create({
    id: "A",
    title: "A", 
    contexts:["page"]
  });
  
  chrome.contextMenus.onClicked.addListener(function (info, tab) {
        console.log(sayBye())
        console.log(ToolsMethod('https://stackoverflow.com'))
  });
  

  });

• Tools.js

  export const ToolsMethod = (url) => { return 'Hello World'; }
  
  export function sayBye() {
     return 'Bye'; 
  }
  

A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces.

export {ToolsMethod, sayBye };

Modules

Manifest Also You must declare the "contextMenus" permission in your extension's manifest to use the API. Also, you should specify a 16x16-pixel icon for display next to your menu item.

   {
    "name": "My extension",
    ...
    "permissions": [
        "contextMenus"
    ],
    "icons": {
        "16": "icon-bitty.png",
        "48": "icon-small.png",
        "128": "icon-large.png"
    },
    ...
}