Веб-расширение: есть ли способ передать объект Event из BrowserAction в фоновый скрипт? - PullRequest
Новая
       66

Веб-расширение: есть ли способ передать объект Event из BrowserAction в фоновый скрипт?

0 голосов
/ 02 ноября 2019

У меня есть событие для paste в BrowserAction, и мне нужно отправить либо объект 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);
});

1 Ответ

0 голосов
/ 03 ноября 2019

Хорошо, я понял: вы не можете пропустить через 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;
}
...