Chrome扩展MV3中Contextmenu onClicked监听器多次触发问题求助

问题根源 #

你的background.js中绑定右键菜单点击事件的写法存在严重错误：

• 你直接执行了chrome.tabs.create()并将其返回值传给addListener，而非传入一个回调函数。
• MV3的Service Worker会在扩展弹窗打开等场景下被唤醒，每次唤醒都会重复执行这段错误代码，导致绑定多个相同的点击监听器。后续点击右键菜单时，每个绑定的监听器都会触发一次标签页创建，从而出现打开几个弹窗就多开对应数量标签页的问题。

修正后的代码 #

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "google-reverse-search", // 替换为具体的菜单ID，避免使用未定义变量
    title: "Google Reverse Search",
    contexts: ["image"],
  });
});

// 正确绑定点击事件：传入回调函数，仅在菜单被点击时执行操作
chrome.contextMenus.onClicked.addListener((info, tab) => {
  // 仅处理我们创建的右键菜单
  if (info.menuItemId === "google-reverse-search") {
    // 构造Google图片反向搜索URL，使用右键点击的图片地址
    const reverseSearchUrl = `https://www.google.com/searchbyimage?image_url=${encodeURIComponent(info.srcUrl)}`;
    chrome.tabs.create({ url: reverseSearchUrl });
  }
});

关键修正点 #

1. 正确绑定监听器：将chrome.tabs.create放入回调函数中，确保只有在菜单被点击时才执行创建标签页的操作。
2. 菜单ID校验：通过info.menuItemId判断点击的是我们创建的菜单，避免与其他扩展或浏览器内置菜单冲突。
3. 合法菜单ID：使用具体的字符串作为菜单ID，避免使用未定义的变量id导致菜单创建失败。
4. 避免重复创建菜单：在chrome.runtime.onInstalled中创建菜单，该事件仅在扩展安装、更新时触发一次，不会重复创建菜单。

内容的提问来源于stack exchange，提问作者Sala