Web扩展：有什么方法可以将Event对象从BrowserAction传递到后台脚本？

Question

我在BrowserAction中有一个paste事件，我需要将Event对象或其clipboardData.items属性发送到后台脚本。

我尝试提取内容，但没有保留属性/方法。

任何正常对象都可以，但是Event对象不保留其值。

我也曾尝试使用Object.assign进行深层复制，但使用chrome.runtime.sendMessage()时，其内容永远不会传递到后台脚本。

非常感谢您的帮助，因为如果我无法完成所有工作，我的所有工作都会被丢掉。

我的目标是从剪贴板中读取图像文件，然后将其上传到网站。这是我遇到的问题的相关代码：

const body = document.querySelector('body');

body.addEventListener('paste', (event) => {
  const item = [...event.clipboardData.items].pop();
  const message = {
    fn: 'pasteEvent',
    text: item
  }
  chrome.runtime.sendMessage(message);
});

Answer 1

好，我知道了：您无法通过runtime.sendMessage传递无法序列化的任何内容。

因此，我使用的解决方法是创建一个表示文件的DOMString对象URL，将其通过sendMessage传递，然后在另一端下载。我不确定这是否是最好的方法，但它确实有效。

步骤1：将剪贴板项目获取为文件：

const item = [...event.clipboardData.items].pop();
const blob = item.getAsFile();

步骤2：将其转换为Object URL：

const objUrl = URL.createObjectURL(blob);

[步骤3：将其附加到邮件中并发送后，必须下载文件并指定响应类型为blob。我使用了Axios，但您可以使用任何东西：

async function getFile(objUrl) {
  const config = {
    responseType: 'blob'
  };
  const res = await axios.get(objUrl, config);
  return res.data;
}