如何在 Chrome 扩展程序中将文件附加到剪贴板？答案

【问题标题】：How to attach files to clipboard in Chrome extension?如何在 Chrome 扩展程序中将文件附加到剪贴板？
【发布时间】：2022-10-14 04:35:20
【问题描述】：

最简单的方法是使用 navigator.clipboard.write API，该 API 不适用于 Chrome 扩展的后台页面。我试图像这样创建一个blob：

    let blobFinal = null; // this will contain our blob object
    const img = document.createElement('img');
    // a train emoji
    img.src = 'data:image/png;base64,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';
    document.body.appendChild(img);
    setTimeout(() => {
      // make <canvas> of the same size
      const canvas = document.createElement('canvas');
      canvas.width = img.clientWidth;
      canvas.height = img.clientHeight;
      const context = canvas.getContext('2d');
      // copy image to it (this method allows to cut image)
      context.drawImage(img, 0, 0);
      // we can context.rotate(), and do many other things on canvas
      // toBlob is async operation, callback is called when done
      canvas.toBlob(function(blob) {
        blobFinal = blob;
        console.log('blob', blob);
        document.body.removeChild(img);
      }, 'image/png');
    }, 1000);

然后我在其“复制”事件期间将此 blob 附加到剪贴板：

    editor.addEventListener('copy', (evt) => {
      // preserve text data
      evt.clipboardData.setData('text/plain', evt.clipboardData.getData('text/plain'));
      evt.clipboardData.setData('text/html', evt.clipboardData.getData('text/html'));
      // add binary data
      evt.clipboardData.setData('image/png', blobFinal);
      evt.preventDefault();
    });

但是，当我粘贴此数据时，剪贴板中没有文件：

    editor.addEventListener('paste', (evt) => {
      console.log(evt.clipboardData.files.length); // prints 0
      for (const file of evt.clipboardData.files) {
        console.log('Size of file', file.size);
      }
    });

而且，即使只有一个文件，其属性size 也为零。令人惊讶的是，我无法找到有关此主题的任何问题。所以，我的问题是，如何在 Chrome 扩展程序中将文件附加到剪贴板？

【问题讨论】：

请务必使用minimal reproducible example 更新问题。
嗨@jsejcksn，没有适用于这个问题的MVCE，因为没有错误代码。问题是如何在 Chrome 扩展程序中将文件附加到剪贴板。我不知道该怎么做。并且没有显示如何做到这一点的 StackOverflow 问题。
^ 如果您的代码没有达到您的期望，那么代码或您的期望都有问题。您显示的代码不足以让某人重现您描述的行为，因此在您这样做之前我们无法知道哪个有问题。
由于您不能在服务人员中使用 navigator.clipboard.write ，您的想法是使用复制事件吗？
@NorioYamamoto 澄清我的问题是关于 MV2 和 MV3 扩展。我们也不能在 MV2 扩展的背景页面中使用 navigator.clipboard.write。所以是的，这就是我的想法，改为附加到复制事件。

标签： javascript google-chrome-extension

【解决方案1】：

此示例执行以下操作：

Service Worker 将“hoge”设置为存储。
Service Worker 会打开 clipboard.html。
clipboard.html 调用clipboard.js。
clipboard.js 从存储中获取 hoge”并写入剪贴板。

clipboard.js 关闭 clipboard.html。

清单.json

{
  "name": "clipboard",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

背景.js

chrome.storage.local.set({ key: "hoge" }, () => {
  chrome.tabs.create({
    url: "clipboard.html"
  });
});

剪贴板.html

<!DOCTYPE html>
<html>

<body>
  <script src="clipboard.js"></script>
</body>

</html>

剪贴板.js

chrome.storage.local.get("key", (result) => {
  navigator.clipboard.writeText(result["key"]).then(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.remove(tabs[0].id);
    });
  });
});

【讨论】：