如何实现Chrome扩展读取剪贴板数据并存入浏览器本地存储？

原代码存在的问题 #

1. 语法错误：copiedData对象中url: window.location.href后缺少逗号，且copiedDataArray未初始化就调用push方法，导致代码无法正常解析。
2. 已弃用API：chrome.clipboard.onClipboardDataChanged属于旧版Chrome扩展API，现已被移除，无法触发剪贴板变化监听。
3. 上下文错误：后台脚本运行在独立环境中，没有window对象，无法通过window.location.href获取当前页面URL，需使用chrome.tabs.query获取活跃标签页信息。
4. 异步逻辑错误：chrome.storage.local.set是异步操作，直接在其后执行console.log无法获取最新的数组状态。
5. 权限缺失：未在manifest文件中声明clipboardRead、storage、tabs等必要权限，导致API调用被浏览器拦截。

正确实现步骤及代码 #

1. 配置manifest.json（以V3版本为例）

需要声明必要权限，确保扩展能访问剪贴板、存储和标签页信息：

{
  "manifest_version": 3,
  "name": "剪贴板存储工具",
  "version": "1.0",
  "permissions": ["clipboardRead", "storage", "tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写后台脚本background.js

通过定时轮询剪贴板内容，对比上次记录的文本，判断是否有新的复制操作；同时获取当前活跃标签页的URL，将数据存入localStorage：

let lastCopiedText = '';
let copiedDataArray = [];

// 初始化：从localStorage读取已存储的数据
chrome.storage.local.get('copiedDataArray', (result) => {
  if (result.copiedDataArray) {
    copiedDataArray = result.copiedDataArray;
  }
});

// 定时检查剪贴板内容（间隔1秒可根据需求调整）
setInterval(async () => {
  try {
    // 读取剪贴板中的文本内容
    const copiedText = await navigator.clipboard.readText();
    
    // 仅当剪贴板内容有更新时执行存储逻辑
    if (copiedText && copiedText !== lastCopiedText) {
      lastCopiedText = copiedText;
      
      // 获取当前活跃标签页的URL
      const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
      const tabUrl = activeTab?.url || '无有效URL';

      // 构造待存储的数据对象
      const newCopiedData = {
        label: copiedText,
        url: tabUrl,
        timestamp: new Date().toISOString() // 可选：添加时间戳便于区分记录
      };
      
      // 更新数组并保存到localStorage
      copiedDataArray.push(newCopiedData);
      await chrome.storage.local.set({ copiedDataArray });
      
      console.log('新的剪贴板数据已保存:', newCopiedData);
    }
  } catch (error) {
    console.error('读取剪贴板失败:', error);
  }
}, 1000);

补充方案（监听页面内复制事件） #

若只需监听用户在浏览器页面内的复制操作，可使用内容脚本替代轮询，更高效：

1. 在manifest.json中添加内容脚本配置：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }
]

2. 编写content.js：

document.addEventListener('copy', async (e) => {
  // 获取复制的文本内容
  const copiedText = e.clipboardData.getData('text');
  if (!copiedText) return;

  // 获取当前页面URL
  const currentUrl = window.location.href;
  
  // 读取已有存储数据并更新
  const result = await chrome.storage.local.get('copiedDataArray');
  const copiedDataArray = result.copiedDataArray || [];
  
  copiedDataArray.push({
    label: copiedText,
    url: currentUrl,
    timestamp: new Date().toISOString()
  });
  
  await chrome.storage.local.set({ copiedDataArray });
  console.log('页面内复制数据已保存:', copiedText);
});

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