Chrome扩展开发：如何在content scripts.js中实现选文翻译弹窗？

你说得对，右键菜单的onclick事件确实无法直接唤起扩展的官方popup——popup的触发逻辑被Chrome限制为仅能通过点击扩展图标、浏览器动作按钮等特定场景触发。不过我们可以通过注入内容脚本创建自定义弹窗的方式，实现将弹窗显示在选中文本上方的需求，具体实现步骤如下：

1. 配置Manifest权限 #

在manifest.json中添加内容脚本和必要权限，确保能向目标页面注入代码：

{
  "manifest_version": 3,
  "name": "翻译扩展",
  "version": "1.0",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

2. 背景脚本处理右键菜单事件 #

在background.js中创建右键菜单，并在点击时向当前标签页发送携带选中文本的消息：

// 创建右键菜单项
chrome.contextMenus.create({
  id: "translate-selection",
  title: "翻译 '%s'",
  contexts: ["selection"]
});

// 监听菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "translate-selection") {
    chrome.tabs.sendMessage(tab.id, {
      action: "showTranslatePopup",
      text: info.selectionText
    });
  }
});

3. 内容脚本创建并定位自定义弹窗 #

在content.js中监听背景脚本的消息，创建弹窗并定位到选中文本的上方：

chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.action === "showTranslatePopup") {
    // 移除已存在的弹窗，避免重复创建
    const existingPopup = document.getElementById("translate-popup");
    if (existingPopup) existingPopup.remove();

    // 创建弹窗元素
    const popup = document.createElement("div");
    popup.id = "translate-popup";
    // 自定义弹窗样式，可根据需求调整
    popup.style.cssText = `
      position: absolute;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 10px 14px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
      z-index: 999999;
      font-size: 14px;
      min-width: 180px;
    `;

    // 获取选中文本的位置信息
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const rect = range.getBoundingClientRect();
      // 将弹窗定位到选中文本上方，预留8px间距
      popup.style.left = `${rect.left + window.scrollX}px`;
      popup.style.top = `${rect.top + window.scrollY - popup.offsetHeight - 8}px`;

      // 处理边界情况：如果弹窗超出视口顶部，改为显示在文本下方
      if (popup.getBoundingClientRect().top < 0) {
        popup.style.top = `${rect.bottom + window.scrollY + 8}px`;
      }
    }

    // 这里替换为你的翻译逻辑，示例中直接显示原文本
    popup.textContent = `翻译结果：${message.text}`;

    // 将弹窗添加到页面
    document.body.appendChild(popup);

    // 点击页面其他区域关闭弹窗
    document.addEventListener("click", function closePopup() {
      popup.remove();
      document.removeEventListener("click", closePopup);
    }, { once: true });
  }
});

补充说明 #

• 弹窗样式可以完全自定义，包括背景色、阴影、字体、圆角等，适配你的扩展风格；
• 翻译逻辑需自行实现，可以调用Chrome内置的chrome.translation.translateAPI，或者对接第三方翻译接口；
• 若需要更复杂的交互（比如弹窗内的按钮操作），可以在弹窗元素中添加对应的DOM节点和事件监听。

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