如何从后台脚本向弹出脚本传递数据？Chrome扩展开发求助

阿华AIGC实验室

2026-5-19

解决Chrome扩展复制数据传递与存储的完整流程

我帮你梳理清楚每个环节的实现步骤，都是基于Chrome扩展Manifest V3的最佳实践哈：

第一步：配置Manifest权限与脚本关联

首先得在manifest.json里把必要的权限和脚本路径配置好，确保各个模块能正常通信：

{
  "manifest_version": 3,
  "name": "剪贴板追踪工具",
  "version": "1.0",
  "permissions": ["storage"], // 只需要存储权限就行，不用额外剪贴板权限
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 监听所有页面的复制事件
      "js": ["contentScript.js"]
    }
  ],
  "background": {
    "service_worker": "oncopy.js" // 用service worker做中转
  },
  "action": {
    "default_popup": "popup.html"
  }
}

第二步：Content Script检测复制并发送数据

在contentScript.js里监听页面的复制事件，直接从复制事件里拿到要复制的内容（这比事后读剪贴板更准确，还不用额外权限），然后把完整数据发给background的oncopy.js：

// contentScript.js
document.addEventListener('copy', (event) => {
  // 从复制事件里提取核心数据
  const copyData = {
    pageUrl: window.location.href, // 复制触发的页面地址
    selectedText: window.getSelection().toString(), // 用户选中的文本
    clipboardContent: event.clipboardData.getData('text'), // 要复制到剪贴板的内容
    timestamp: Date.now() // 复制时间戳
  };

  // 发送消息给background脚本
  chrome.runtime.sendMessage({
    type: 'COPY_EVENT',
    payload: copyData
  });
});

第三步：Background脚本中转与存储

oncopy.js作为后台服务，接收来自content script的消息，一方面把数据存到Chrome本地存储，另一方面如果popup正在打开，就实时把数据推给popup：

// oncopy.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'COPY_EVENT') {
    // 1. 把数据存到Chrome本地存储，确保popup打开时能拿到最新数据
    chrome.storage.local.set({ latestCopy: message.payload });

    // 2. 实时推送给已打开的popup
    chrome.runtime.sendMessage({
      type: 'COPY_DATA_READY',
      data: message.payload
    });

    sendResponse({ status: '数据已接收' });
  }
  // 保持消息通道开放（处理异步场景）
  return true;
});

第四步：Popup接收数据并展示存储

popup.js要做两件事：一是popup刚打开时从存储里读取最新的复制数据，二是监听来自background的实时消息，把内容显示到输入框里：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const copyInput = document.getElementById('copy-input');

  // 场景1：popup刚打开，从存储里取历史最新数据
  chrome.storage.local.get('latestCopy', (result) => {
    if (result.latestCopy) {
      copyInput.value = result.latestCopy.clipboardContent;
    }
  });

  // 场景2：实时接收background推送的新复制数据
  chrome.runtime.onMessage.addListener((message) => {
    if (message.type === 'COPY_DATA_READY') {
      copyInput.value = message.data.clipboardContent;
      // 可选：再次存一遍（其实background已经存了，这里可以省略）
      chrome.storage.local.set({ latestCopy: message.data });
    }
  });
});

对应的popup.html结构很简单，只需要一个输入框展示内容：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 320px; padding: 15px; margin: 0; }
    h3 { margin-top: 0; font-size: 16px; }
    #copy-input { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
  </style>
</head>
<body>
  <h3>最新复制内容</h3>
  <input type="text" id="copy-input" readonly>
  <script src="popup.js"></script>
</body>
</html>

关键注意点

为什么不用事后读剪贴板？因为copy事件触发时，剪贴板还没完成写入，直接用event.clipboardData是最准确的，还能避免额外的剪贴板权限申请。
如果popup没打开，数据会存在Chrome本地存储里，等popup下次打开时自动加载最新的复制内容。
Manifest V3里的background用service worker，不要写DOM操作相关的代码，它是无头的，只负责逻辑中转和存储。

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