如何为Mturk Requester添加右键菜单？Chrome扩展开发求助

报错原因分析 #

你遇到的Cannot find menu item with id xxx错误，是因为Chrome扩展的chrome.contextMenusAPI只能管理自身创建的菜单，无法直接挂载到MTurk网页的原生右键菜单上。你指定的parentId指向了网页原生菜单的ID，这超出了扩展的权限范围，所以会报错。

正确实现步骤 #

1. 配置Manifest权限 #

首先在manifest.json中声明必要权限，确保扩展能在MTurk页面生效并使用上下文菜单：

{
  "manifest_version": 3,
  "name": "MTurk Requester Tool",
  "version": "1.0",
  "permissions": ["contextMenus"],
  "host_permissions": ["https://worker.mturk.com/*", "https://www.mturk.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://worker.mturk.com/*", "https://www.mturk.com/*"],
      "js": ["content.js"]
    }
  ]
}

2. 创建独立上下文菜单 #

在background.js中创建自己的右键菜单项，限制仅在MTurk页面显示：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "autoselectid",
    title: "Auto Select",
    contexts: ["page"],
    documentUrlPatterns: ["https://worker.mturk.com/*", "https://www.mturk.com/*"]
  });
});

// 监听菜单点击事件，转发逻辑到内容脚本
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "autoselectid") {
    chrome.tabs.sendMessage(tab.id, { action: "autoSelectRequester" });
  }
});

3. 内容脚本判断点击目标 #

在content.js中监听右键点击事件，判断是否点击了请求者元素，并执行对应逻辑：

// 记录最后一次右键点击的请求者信息
let lastClickedRequester = null;

document.addEventListener("contextmenu", (e) => {
  // 替换为MTurk请求者元素的实际CSS选择器（右键检查页面元素获取）
  const requesterElement = e.target.closest(".requester-link, .requester-name");
  lastClickedRequester = requesterElement ? requesterElement.textContent.trim() : null;
});

// 接收后台脚本的指令，执行Auto Select逻辑
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "autoSelectRequester" && lastClickedRequester) {
    // 这里编写你的Auto Select业务逻辑，示例：选中请求者名称
    const targetElement = document.querySelector(`:contains('${lastClickedRequester}')`);
    if (targetElement) {
      const range = document.createRange();
      range.selectNodeContents(targetElement);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
    }
    lastClickedRequester = null;
  }
});

关键注意事项 #

• 不要尝试挂载原生菜单：Chrome扩展无法修改网页原生右键菜单，只能创建独立菜单项，通过内容脚本判断点击位置实现关联。
• 精准匹配元素：需要自己右键检查MTurk页面的请求者元素，替换代码中的CSS选择器（比如.requester-link），确保能准确识别目标元素。
• 权限必须完整：host_permissions要覆盖MTurk的所有相关域名，否则菜单不会在目标页面显示。

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