如何实现Chrome扩展快捷键在任意页面写入系统剪贴板？

问题根源 #

当通过扩展命令快捷键触发操作时，代码的执行上下文是扩展的后台脚本或侧边栏页面，此时当前激活的是网页标签页，扩展自身的文档并未获得焦点。浏览器出于安全限制，会拒绝无焦点上下文调用标准navigator.clipboard API，从而抛出NotAllowedError。

解决方案 #

方法一：使用Chrome扩展专属剪贴板API #

直接调用Chrome提供的chrome.clipboard API绕过焦点限制，步骤如下：

1. 在manifest.json中添加clipboardWrite权限：

{
  "permissions": ["clipboardWrite"]
}

2. 在命令监听函数中替换为Chrome的剪贴板写入方法：

chrome.commands.onCommand.addListener(async (command) => {
  if (command === "copy-to-clipboard") {
    const value = "你要复制的内容";
    try {
      await new Promise((resolve, reject) => {
        chrome.clipboard.writeText(value, () => {
          chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve();
        });
      });
      console.log("内容已复制到剪贴板");
    } catch (err) {
      console.error("复制失败：", err);
    }
  }
});

方法二：通过内容脚本在当前标签页执行复制 #

让当前激活的网页标签页（而非扩展）执行剪贴板写入，步骤如下：

1. 在manifest.json中配置内容脚本权限：

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

2. 后台脚本监听命令，向当前激活标签页发送消息：

chrome.commands.onCommand.addListener(async (command) => {
  if (command === "copy-to-clipboard") {
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!activeTab.id) return;
    
    try {
      await chrome.tabs.sendMessage(activeTab.id, {
        action: "copyToClipboard",
        value: "你要复制的内容"
      });
      console.log("内容已复制到剪贴板");
    } catch (err) {
      console.error("复制失败：", err);
    }
  }
});

3. 在content-script.js中接收消息并执行标准剪贴板写入：

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === "copyToClipboard") {
    try {
      await navigator.clipboard.writeText(message.value);
      sendResponse({ success: true });
    } catch (err) {
      sendResponse({ success: false, error: err.message });
    }
    return true; // 保持消息通道开放以接收异步响应
  }
});

两种方法对比 #

• 方法一更简洁，无需依赖内容脚本，但仅适用于Chrome系浏览器；
• 方法二基于标准Web API，兼容性更好，但需要确保目标标签页已加载内容脚本（新标签页可通过chrome.scripting.executeScript动态注入）。

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