Chrome扩展遇重复ID报错及文本高亮失效问题求助

问题1：重复ID报错的解决 #

报错Unchecked runtime.lastError: Cannot create item with duplicate id highlight-red是因为每次扩展启动或脚本执行时，都会尝试创建相同ID的右键菜单，但Chrome不允许重复ID的菜单存在。

修复方法：在创建新菜单前，先移除所有已存在的右键菜单，确保菜单ID唯一。修改菜单创建部分的代码：

// 先清除所有旧菜单，避免重复ID报错
chrome.contextMenus.removeAll(() => {
  chrome.contextMenus.create({
    id: "highlight-red",
    title: "Highlight Red",
    contexts: ["selection"]
  });

  chrome.contextMenus.create({
    id: "highlight-green",
    title: "Highlight Green",
    contexts: ["selection"]
  });

  chrome.contextMenus.create({
    id: "highlight-blue",
    title: "Highlight Blue",
    contexts: ["selection"]
  });
});

问题2：文本高亮失效的解决 #

高亮失效的核心原因是颜色值错误：你直接将菜单ID（如highlight-red）作为背景色值，而CSS中不存在这个颜色名称，导致背景色不生效。另外，无用的setCheck函数和对应的脚本注入可以删除，减少冗余。

修复后的highlightSelection函数及事件监听代码：

chrome.contextMenus.onClicked.addListener((info, tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: highlightSelection,
    args: [info]
  });
});

function highlightSelection(info) {
  // 从菜单ID中提取实际颜色值（去掉highlight-前缀）
  const color = info.menuItemId.replace('highlight-', '');
  const selection = window.getSelection();
  
  // 确保有选中的内容和有效范围
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  const newNode = document.createElement("span");
  // 设置正确的背景色
  newNode.style.backgroundColor = color;
  // 保留原文本的行高，避免破坏页面格式
  newNode.style.lineHeight = 'inherit';
  
  newNode.appendChild(range.extractContents());
  range.insertNode(newNode);
  
  // 可选：恢复选中状态，让用户看到高亮后的文本仍处于选中
  const newRange = document.createRange();
  newRange.selectNodeContents(newNode);
  selection.removeAllRanges();
  selection.addRange(newRange);
}

额外说明 #

• 确保你的扩展已声明必要的权限：在manifest.json中需要包含contextMenus、scripting和activeTab权限。
• 测试时，记得重新加载扩展并刷新目标页面，确保修改后的代码生效。

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