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 / await一起使用：

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路由应用相同的方法，您可以将其放入内容脚本和扩展页面中加载的单独的js中。可能存在实现此方法的现有js库。

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

1 个答案: