时间戳

首页 > 解决方案 > Web 扩展：有没有办法将事件对象从 BrowserAction 传递到后台脚本？

javascript - Web 扩展：有没有办法将事件对象从 BrowserAction 传递到后台脚本？

问题描述

我在 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);
});

标签： javascriptgoogle-chrome-extensionfirefox-addonfirefox-addon-webextensions

解决方案

好的，我想通了：你不能通过任何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;
}

推荐阅读