Question

在 chrome 扩展 V3 中复制到剪贴板

2022-03-02

9459

javascript google-chrome-extension copy-paste

我正在开发 chrome 扩展 V3。我想将内容复制到 JS 文件中的剪贴板。
manifest.json 如下，

    "background" :{
        "service_worker" :"eventPage.js"
    },
    "permissions" : [
        "contextMenus",
        "clipboardWrite"      
    ]

我尝试了 2 种复制功能解决方案。

解决方案 1：

    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

结果：

Error in event handler: ReferenceError: document is not defined at copyToClipboard

解决方案 2：

navigator.clipboard.writeText(str);

结果：

Error in event handler: TypeError: Cannot read properties of undefined (reading 'writeText')

chrome 扩展作为服务工作者运行。因此，似乎我无法访问 DOM 文档，也没有授予 writeText 权限。有人还有其他建议吗？

谢谢。

Answer 1

我将遵循 wOxxOm 给您的出色建议，并在具体示例中进行详细说明。您需要做的是让 ContentScript.js 在任何带有网页的活动选项卡上运行，因为您无法从 backGround.js 访问 DOM，然后向此脚本发送一条消息，然后从该脚本复制到剪贴板。

manifest.json

    "background" :{
        "service_worker" :"eventPage.js"
    },
    "permissions" : [
        "contextMenus",
        "clipboardWrite"      
    ],
   "content_scripts": [ // this is what you need to add
      {
         "matches": [
            "<all_urls>"
         ],
         "js": ["content.js"]
      }
   ],

从 background.js，您将发送一条消息，该消息将在 ContentScript.js 中处理

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, 
        {
            message: "copyText",
            textToCopy: "some text" 
        }, function(response) {})
})

在 contentScript.js 中，您将捕获该消息并将其复制到剪贴板。

content.js

chrome.runtime.onMessage.addListener( // this is the message listener
    function(request, sender, sendResponse) {
        if (request.message === "copyText")
            copyToTheClipboard(request.textToCopy);
    }
);

async function copyToTheClipboard(textToCopy){
    const el = document.createElement('textarea');
    el.value = textToCopy;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

Answer 2

我不是 Chrome 插件方面的专家，但我认为请求 <all_urls> 不是最佳实践。
相反，我通过请求 activeTab 来解决问题，放弃内容脚本，而是将代码注入活动选项卡。
清单：

...
    "permissions": [
      "clipboardWrite"
      "activeTab",
      "scripting"
    ],
    "background": {
        "service_worker": "background.js"
    },
...

背景：

// To be injected to the active tab
function contentCopy(text) {
  navigator.clipboard.writeText(text);
}

async function copyLink(text, tab) {
  // Format as a whatsapp link
  const link = await getWhatsAppLink(text);
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: contentCopy,
    args: [link],
  });
}

因此 contentCopy 被注入到活动选项卡并使用我想要复制到剪贴板的文本执行。
效果很好，并且节省了有问题的权限（根据 Google）