Chrome扩展调用Navigator.writeText()报错：无法读取未定义对象的writeText属性

错误原因 #

你在background.js里调用navigator.clipboard.writeText报错，核心原因是后台脚本的执行环境不支持剪贴板API。Chrome扩展的后台页面（或服务工作者）属于无界面的隔离环境，而navigator.clipboard的安全限制要求必须在用户触发的前端上下文（比如网页内容脚本、扩展弹出页）中使用，所以后台里的navigator.clipboard是undefined，才会抛出"Cannot read properties of undefined (reading 'writeText')"的错误。

解决方案 #

改用内容脚本实现复制操作，内容脚本运行在网页的前端上下文里，满足剪贴板API的使用条件。具体步骤如下：

1. 配置扩展权限 #

在manifest.json中添加必要权限（以Manifest V3为例）：

{
  "manifest_version": 3,
  "name": "复制选中文本",
  "version": "1.0",
  "permissions": ["contextMenus", "clipboardWrite", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. 修改后台脚本（background.js） #

不再直接调用剪贴板API，而是向当前激活标签页的内容脚本发送消息，传递要复制的文本：

chrome.contextMenus.create({
    parentId: 'Main',
    title: 'Copy Link',
    id: 'copyLink',
    contexts: ['selection']
});

chrome.contextMenus.onClicked.addListener((e) => {
    if (e.menuItemId === 'copyLink' && e.selectionText) {
        // 获取当前激活标签页，发送复制指令
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
            chrome.tabs.sendMessage(tabs[0].id, {
                action: 'copyToClipboard',
                text: e.selectionText
            });
        });
    }
});

3. 创建内容脚本（content.js） #

监听后台发来的消息，调用剪贴板API完成复制：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'copyToClipboard') {
        navigator.clipboard.writeText(request.text)
            .then(() => {
                console.log('文本已成功复制到剪贴板');
            })
            .catch(err => {
                console.error('复制失败:', err);
            });
    }
});

补充说明 #

这种方式符合Chrome的安全规范：用户通过上下文菜单触发操作，内容脚本在网页上下文执行复制，满足剪贴板API对"用户交互触发"的要求，同时避开了后台环境的限制。

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