Chrome扩展：内容脚本与background、popup间消息传递失败求助

嘿，我来帮你搞定这个问题！你现在卡在选中文本没法传到background和popup的环节，咱们一步步梳理解决办法：

首先，先完善你的manifest.json #

你当前的manifest有几个关键缺失，这是导致问题的核心原因之一：

• background脚本路径不完整，而且没指定专门的background.js处理逻辑
• 缺少Content Script配置——这是获取页面选中文本的关键，因为background脚本无法直接访问网页DOM
• 缺少必要的权限（比如activeTab、storage）和Popup入口配置

这里给你一个补全后的manifest.json示例：

{
  "name": "Wordomania",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Displays selected text on popup",
  "icons": { "16": "images/W.png" },
  "background": {
    "scripts": ["jquery-3.3.1.min.js", "background.js"] // 补全jQuery路径，添加专属的background.js
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网页，可按需指定特定域名
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab", "storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "images/W.png"
  }
}

第二步，编写content.js——获取页面选中文本 #

Content Script可以直接访问网页DOM，用来捕获用户选中的文本。我们做两种处理：一是用户选中文字后主动发送给background，二是响应Popup的实时请求：

// content.js
// 监听鼠标松开事件，捕获选中文本并发送到background
document.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString().trim();
  if (selectedText) {
    chrome.runtime.sendMessage({ type: 'SELECTED_TEXT', text: selectedText });
  }
});

// 响应Popup的请求，返回当前页面的选中文本
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'GET_SELECTED_TEXT') {
    const selectedText = window.getSelection().toString().trim();
    sendResponse({ text: selectedText });
  }
});

第三步，编写background.js——中转/存储选中文本 #

Background脚本作为扩展的后台枢纽，负责接收Content Script发来的文本，同时给Popup提供获取文本的接口：

// background.js
let currentSelectedText = '';

// 接收Content Script传来的选中文本，同时存入本地存储避免刷新丢失
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'SELECTED_TEXT') {
    currentSelectedText = message.text;
    chrome.storage.local.set({ selectedText: message.text });
  }
});

// 响应Popup的请求，返回存储的选中文本
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'GET_STORED_TEXT') {
    if (currentSelectedText) {
      sendResponse({ text: currentSelectedText });
    } else {
      // 从本地存储读取备份
      chrome.storage.local.get('selectedText', (data) => {
        sendResponse({ text: data.selectedText || '' });
      });
      return true; // 异步响应必须返回true，告诉Chrome等待结果
    }
  }
});

第四步，编写Popup相关文件 #

首先是popup.html——Popup的界面结构：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 220px; padding: 12px; margin: 0; }
    .title { margin: 0 0 10px; font-size: 16px; }
    #textContainer { padding: 8px; border: 1px solid #eee; border-radius: 4px; min-height: 40px; }
  </style>
</head>
<body>
  <h3 class="title">你选中的文本：</h3>
  <div id="textContainer">暂无选中文本</div>
  <script src="popup.js"></script>
</body>
</html>

然后是popup.js——Popup打开时获取文本并显示：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const textContainer = document.getElementById('textContainer');

  // 方式1：从Background获取存储的文本（适合页面已刷新的情况）
  chrome.runtime.sendMessage({ type: 'GET_STORED_TEXT' }, (response) => {
    textContainer.textContent = response.text || '暂无选中文本';
  });

  // 方式2：直接向当前活跃标签的Content Script请求实时文本
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { type: 'GET_SELECTED_TEXT' }, (response) => {
      if (response?.text) {
        textContainer.textContent = response.text;
      }
    });
  });
});

最后，测试注意事项 #

• 确保所有脚本文件（content.js、background.js、popup.js）和popup.html都放在扩展根目录，路径和manifest里配置的一致
• 在Chrome扩展管理页面开启「开发者模式」，点击「加载已解压的扩展程序」选择你的扩展文件夹
• 测试时先在网页选中一段文本，再点击扩展图标打开Popup，就能看到选中的内容啦

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