开发类谷歌翻译Chrome扩展：选词触发弹窗功能遇无事件触发问题

嘿，我看你正在做一个类似谷歌翻译的选词触发Chrome扩展，现在遇到选中文字没反应的问题，我来帮你梳理下问题所在，再给你一套完整的实现方案：

一、现有代码的核心问题 #

你已经配置了manifest.json和background.js的消息监听，但最关键的content script逻辑（也就是你配置里的selection.js）完全没写！另外background.js里的消息监听回调参数也不对，chrome.runtime.onMessage的正确参数是(message, sender, sendResponse)，不是你写的(message, callback)。

二、完整实现步骤 #

1. 修正background.js的消息监听 #

先把背景页的代码改成正确的格式，确保能收到content script发来的选中内容：

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.type === "getSelection") {
    console.log("用户选中的文字：", message.text);
    // 这里可以加你后续的逻辑，比如调用翻译接口、展示弹窗等
  }
});

2. 编写selection.js的选词监听逻辑 #

这部分是核心！我们要在content script里监听用户的鼠标松开事件（因为用户松开鼠标才完成选词），然后获取选中的文本，再把消息发给背景页，甚至直接在页面上弹出类似谷歌翻译的小窗口：

// 监听鼠标松开事件，检测是否有选中内容
document.addEventListener('mouseup', function() {
  const selectedText = window.getSelection().toString().trim();
  // 只有选中非空文本时才触发逻辑
  if (selectedText) {
    // 把选中内容发给背景页
    chrome.runtime.sendMessage({
      type: "getSelection",
      text: selectedText
    });
    // 直接在页面上展示选词弹窗（和谷歌翻译类似）
    showSelectionPopup(selectedText);
  }
});

// 自定义弹窗：在选中位置附近显示选中内容
function showSelectionPopup(text) {
  // 先移除已存在的弹窗，避免重复创建
  const existingPopup = document.getElementById('selection-popup');
  if (existingPopup) existingPopup.remove();

  // 创建弹窗DOM元素
  const popup = document.createElement('div');
  popup.id = 'selection-popup';
  popup.style.cssText = `
    position: absolute;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 999999;
    font-size: 14px;
    color: #333;
  `;
  popup.textContent = `选中内容：${text}`;

  // 获取选中区域的位置，让弹窗定位在选中文字的下方
  const selectionRange = window.getSelection().getRangeAt(0);
  const rect = selectionRange.getBoundingClientRect();
  popup.style.left = `${rect.left + window.scrollX}px`;
  popup.style.top = `${rect.bottom + window.scrollY + 8}px`;

  document.body.appendChild(popup);

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

3. 优化manifest.json配置 #

你的原有配置基本没问题，我帮你调整了几个细节，让它更符合Chrome扩展的最佳实践：

{
  "manifest_version": 2,
  "name": "选词触发工具",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "<all_urls>",
    "declarativeContent",
    "storage"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/cdicon.png"
    }
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "selection.js"
      ],
      "run_at": "document_idle",
      "all_frames": true
    }
  ]
}

小提示：把run_at改成document_idle会更合理，不需要在页面刚启动就注入脚本，等页面加载完成后注入既不影响功能，还能避免DOM未就绪的问题；persistent: false是Chrome推荐的非持久化背景页，更节省资源。

三、测试验证 #

1. 把所有文件放在同一个文件夹里，确保images/cdicon.png存在（如果暂时没有图标，可以先删掉default_icon配置）
2. 打开Chrome浏览器，进入chrome://extensions/，开启右上角的开发者模式，点击“加载已解压的扩展程序”选择你的文件夹
3. 打开任意网页，选中一段文字，你会看到页面弹出显示选中内容的弹窗，同时在扩展的背景页控制台（点击扩展详情里的“背景页”）能看到打印的选中文字

这样就能实现你想要的选词触发功能啦！

内容的提问来源于stack exchange，提问作者Hakan Fıstık