Web扩展:有什么方法可以将事件对象从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：将其转换为对象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;
}