Javascript Chrome扩展-在内容脚本中接收请求

有没有更好的方法在内容脚本和弹出窗口/后台之间传递命令？现在我正在做这样的事情（它不可维护或不健壮……）

这在内容脚本中

使用Mozilla的

使用类或对象来定义命令处理程序，使用对象来调用它们

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();
});

---

这是一个没有错误处理的简化的简单示例。这同样适用于扩展->内容路由，您可以将其放入一个单独的js中，该js同时加载在内容脚本和扩展页面中。可能存在实现此方法的现有js库。

如果必须使用多个命令类，您能否展示（background.js）中的addListener的外观？具体取决于。您可以将继承的类（带有普通的非静态方法）与命令一起使用，并让侦听器检查commands.prototype，它将包含所有方法。或者，您可以单独检查每个类，或者在循环中检查。或者，您可以使用任何事件发射器/订阅者库（或编写自己的）并通过重新发出命令+数据。顺便说一句，对于我来说不起作用，get Pass中的命令作为空对象是的，现在应该修复了。

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();
});