Расширение Chrome - получение запросов в скрипте содержимого

Question

Есть ли лучший способ передавать команды между скриптом контента и всплывающим окном / фоном? Прямо сейчас я делаю что-то вроде этого (и это не ремонтопригодно или не надежно ....)

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request) {
      switch (request.command) {
        case "command1":
            //do stuff
            break;
        case "command2":
            //do stuff
            break;

Это в скрипте контента

Answer 1

• Использовать Mozilla WebExtension polyfill
• Использовать класс или объект для определения обработчиков команд и Proxy для их вызова.

content.js

const API = new Proxy({}, {
  get(target, command) {
    return data => browser.runtime.sendMessage({command, data});
  },
});

Использование с обещанием:

API.foo(123).then(console.log);

Использование с асинхронным вызовом / ожиданием:

async function doSomething() {
  const result = await API.bar(456);
  console.log(result);
}

background.js

class Commands extends null {
  static foo(data, sender) {
    return data * 2;
  }
  async static bar(data, sender) {
    return (await fetch('https://example.org/json')).json();
  }
}

browser.runtime.onMessage.addListener(async ({command, data}, sender) => {
  const handler = Commands.hasOwnProperty(command) && Commands[command];
  return typeof handler === 'function'
         ? handler(data, sender)
         : Promise.reject();
});

Это был упрощенный базовый пример без обработки ошибок.То же самое можно применить к extension-> content route, и вы можете поместить это в отдельный js, который загружается как в скрипт содержимого, так и на страницу расширения.Могут существовать библиотеки js, которые реализуют этот подход.