Chrome扩展中content script与popup脚本通信问题咨询

这个问题很典型——Chrome扩展里的Content Script和Popup脚本运行在完全隔离的执行环境中，所以你直接访问对方的变量肯定会提示未定义。这是Chrome为了安全和隔离性设计的机制：Content Script要注入到目标网页访问DOM，而Popup属于扩展自身的独立上下文，两者不能直接共享内存或变量。

要实现它们之间的通信，Chrome提供了一套成熟的消息传递API，下面分两种常用场景给你具体的代码示例：

场景1：Popup主动向Content Script请求数据（最常用） #

这种场景适合Popup需要获取页面数据（比如DOM元素、页面状态）的情况，流程是：Popup发送消息到当前标签页的Content Script，Content Script处理请求后返回数据。

1. Content Script端（content-script.js） #

监听来自Popup的消息，处理后返回响应：

// content-script.js
// 注册消息监听器
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 根据action判断请求类型
  if (request.action === "fetchPageInfo") {
    // 这里可以自由访问页面DOM元素
    const pageTitle = document.title;
    const pageUrl = window.location.href;
    const firstHeading = document.querySelector('h1')?.textContent || '无一级标题';
    
    // 发送响应给Popup
    sendResponse({
      title: pageTitle,
      url: pageUrl,
      firstHeading: firstHeading
    });
  }
});

2. Popup端（popup.js + popup.html） #

Popup加载完成后，通过按钮触发消息发送，获取并展示数据：

popup.html结构

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面信息助手</title>
  <style>
    body { width: 320px; padding: 15px; font-family: sans-serif; }
    .info-item { margin: 8px 0; }
    button { padding: 8px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <button id="getInfoBtn">获取当前页面信息</button>
  <div id="infoContainer" class="info-item"></div>
  
  <script src="popup.js"></script>
</body>
</html>

popup.js逻辑

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

  getInfoBtn.addEventListener('click', async () => {
    try {
      // 获取当前激活的标签页（确保是用户正在看的页面）
      const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
      
      // 向该标签页的Content Script发送消息
      const response = await chrome.tabs.sendMessage(activeTab.id, { action: "fetchPageInfo" });
      
      // 把返回的数据展示在Popup里
      infoContainer.innerHTML = `
        <div><strong>页面标题：</strong>${response.title}</div>
        <div><strong>页面URL：</strong>${response.url}</div>
        <div><strong>一级标题：</strong>${response.firstHeading}</div>
      `;
    } catch (err) {
      console.error('通信失败:', err);
      infoContainer.textContent = '⚠️ 当前页面未注入Content Script，请刷新页面重试！';
    }
  });
});

场景2：Content Script主动向Popup发送消息 #

如果需要Content Script在某个事件（比如页面加载完成、DOM变化）触发时通知Popup，注意只有Popup处于打开状态时才能收到消息：

Content Script端发送消息 #

// content-script.js
// 比如页面加载完成后发送通知
window.addEventListener('load', () => {
  chrome.runtime.sendMessage(
    { action: "pageLoaded", message: "当前页面已加载完成！" },
    (response) => {
      // 如果Popup打开，会收到响应
      if (response) {
        console.log('Popup回复:', response.ack);
      }
    }
  );
});

Popup端监听消息 #

// popup.js
// 注册全局消息监听器
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "pageLoaded") {
    alert(`收到页面通知：${request.message}`);
    // 回复Content Script
    sendResponse({ ack: "已收到页面加载通知" });
  }
});

关键配置（manifest.json） #

确保你的manifest.json正确配置了权限和脚本：

{
  "manifest_version": 3, // 建议用v3，v2即将被淘汰
  "name": "页面信息扩展",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要匹配的网址，比如"https://*.example.com/*"
      "js": ["content-script.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["tabs"] // manifest v3需要tabs权限才能发送消息给标签页
}

补充说明 #

• 消息传递支持JSON格式的数据，所以可以传递字符串、数字、数组、对象，但不能传递函数或DOM元素（如果要传递DOM信息，需要先序列化）。
• 如果需要持久化数据或者更复杂的通信，可以考虑用chrome.storage API共享数据，或者使用长连接（chrome.runtime.connect），但对于大多数场景，上面的一次性消息传递足够用了。

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