Chrome扩展开发：如何将content.js的数据传递到扩展程序中

以下为你提到的5种方案的优劣势、限制及核心区别：

• 直接消息传递（Popup与Content脚本直连）
  核心逻辑是popup处于打开状态时，直接和提前注入的content脚本通过chrome.runtime.sendMessage通信。优势是代码逻辑简单无需中间层；劣势是popup关闭后上下文直接销毁，content发送的消息无接收方，所以只会在popup打开时生效；限制是仅可在popup处于激活打开状态时使用，无法后台传递数据。
• chrome.scripting动态注入脚本
  核心逻辑是在需要的时候主动往目标标签页注入执行脚本，无需提前声明content脚本。优势是权限占用少，仅在使用时触发注入，不需要页面提前加载注入脚本；你遇到的自动执行问题是因为将注入逻辑写在了脚本顶级作用域，只要绑定到按钮点击事件触发即可解决；限制是需要申请scripting和activeTab权限，注入的函数内无法直接访问扩展上下文的变量。
• localStorage存储
  核心逻辑是通过本地存储做数据中转，你遇到的读取失败问题是因为网页上下文的localStorage和扩展上下文的localStorage是完全隔离的两个存储空间，content脚本运行在网页上下文，读取写入的都是对应网站的localStorage，popup运行在扩展独立上下文，读取的是扩展自身的localStorage，二者无法直接共享。如果替换为chrome.storageAPI则可以实现跨上下文共享，该方案优势是支持数据持久化，劣势是需要额外申请storage权限，读写都是异步操作。
• Background Service Worker中转
  核心逻辑是将background作为消息中转层，content脚本先把数据发给background，popup读取的时候再从background取。优势是background生命周期比popup长，不会因为popup关闭就直接销毁，适合跨上下文的数据中转；劣势是Manifest V3的background是事件驱动的Service Worker，空闲时会被系统回收，不能持久存储全局变量，需要配合chrome.storage使用；限制是background无法操作DOM，仅能处理逻辑、事件监听和数据中转。
• window对象挂载变量
  核心逻辑是往网页的全局window对象挂载变量实现content脚本和网页上下文的数据共享。优势是同页面上下文读写简单直接；劣势是会严重污染网页的全局作用域，容易和网页本身的变量冲突，也可能被网页恶意篡改，安全性极低；限制是仅能在当前标签页的网页上下文使用，扩展上下文无法直接读取网页的window对象，跨标签页也无法共享。

你需要实现的点击扩展按钮提取当前页H2并展示的功能，无需复杂的消息中转或存储，直接通过chrome.scripting动态注入即可，完整实现逻辑如下：

1. manifest.json配置（Manifest V3版本） #

{
  "manifest_version": 3,
  "name": "H2提取工具",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"]
}

2. popup.html文件 #

<!DOCTYPE html>
<html>
<body style="width: 300px; padding: 10px;">
  <button id="extractBtn" style="width: 100%; padding: 8px; margin-bottom: 10px;">提取当前页H2内容</button>
  <ul id="h2List" style="margin: 0; padding-left: 20px;"></ul>
  <script src="popup.js"></script>
</body>
</html>

3. popup.js文件 #

document.getElementById('extractBtn').addEventListener('click', async () => {
  // 获取当前窗口激活的标签页
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 往目标标签页注入执行提取逻辑
  const [scriptResult] = await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    // 该函数内的代码会在网页上下文执行
    func: () => Array.from(document.querySelectorAll('h2')).map(item => item.textContent.trim())
  });
  // 渲染提取结果到popup
  const listContainer = document.getElementById('h2List');
  listContainer.innerHTML = '';
  scriptResult.result.forEach(text => {
    const li = document.createElement('li');
    li.textContent = text;
    li.style.padding = '4px 0';
    listContainer.appendChild(li);
  });
});

该方案完全规避你遇到的所有问题：无需提前注入content脚本，无需消息中转，点击按钮时才触发注入提取，直接拿到结果渲染到popup，逻辑最简适配性最高。

• Chrome官方扩展开发文档，覆盖所有API说明、最佳实践和常见问题，内容更新及时
• 开源社区的Manifest V3最小示例项目，可直接参考可运行的Demo代码
• 主流开发社区的实战教程，优先选择2022年之后发布的Manifest V3版本内容，避免Manifest V2的过时资料

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