javascript - 用于在页面和内容脚本之间发送消息的 window.postMessage 的替代方法是什么？

Question

我正在使用 Firefox WebExtension，它在网页和 native 可执行文件之间建立链接(使用 native 消息传递 API)。

到目前为止，我一直在使用一对内容/后台脚本，并且我使用 window.PostMessage 发送/接收消息，如下所示:

页面脚本

// Method used to communicate with content sript of the Firefox WebExtension

var callExtension = function(JSONmessage, timeout, callbackFnk) {

    var promiseRequest = new Promise((resolve, reject) => {
      const listener = (event) => {
        if (
          event.source == window && event.data.direction
          && event.data.direction == "my-extension-from-content-script"
        ) {
          resolve(event.data.message);
        }
      }

      setTimeout(() => {
        window.removeEventListener("message", listener);
        resolve(false); // Timeout 
      }, timeout);

      window.addEventListener("message", listener);

      window.postMessage({
        direction: "my-extension-from-page-script",
        message: JSONmessage
        }, "*");
    });

    promiseRequest.then((result) => { 

         // now we are calling our own callback function
          if(typeof callbackFnk == 'function'){
            callbackFnk.call(this, result);
          }

    });

};

// Checks the presence of the extension

callExtension("areYouThere", 200, function(result) { 
    if(result) {
        $("#result").text("Extension installed");
    } else {
        $("#result").text("Extension not installed");
    }
});

内容脚本

window.addEventListener("message", function(event) {
  if (event.source == window &&
      event.data.direction &&
      event.data.direction == "my-extension-from-page-script") {

    if(event.data.message == "areYouThere") { 

        /** Checks the presence of the extension **/

        window.postMessage({
        direction: "my-extension-from-content-script",
        message: "OK"
      }, "*");
    } 
  } 
});

该代码在一个简单的网页上运行良好，但是当我试图让它在一个已经使用了 window.postMessage 和 window.addEventListener ("message", ...)，从页面发送的消息没有被扩展捕获，所以我的扩展无法工作。

1. 有没有办法不使用 window.postMessage 和 window.addEventListener 将消息从页面脚本发送到内容脚本？

2. 如果不是，如何确保从页面的 window.postMessage 发送的消息只会发送到我的分机，而不会被其他监听器捕获？

Answer 1

您正在使用的网页似乎无法与 window.postMessage 兼容.这是可以理解的，因为这样的网页通常期望是页面中唯一使用它的东西。

你有四种选择:

1. 安装您的 message window 上的事件监听器在网页脚本之前安装任何监听器，以便您首先收到事件。这很可能通过在 document_start 注入(inject)来完成。并在加载页面脚本之前安装您的监听器。除了您调用 .addEventListener() 在页面上的任何脚本执行之前(即在 document_start 处注入(inject))，您应该表明您的监听器将 useCapture .这将导致您的监听器在页面脚本添加的任何监听器之前被调用。您将需要在消息内容中唯一标识消息发往/发自您的分机代码。您需要为那些属于您的消息取消事件( .stopImmediatePropagation() 和 .stopPropagation() )，并允许事件传播给那些不是您的消息。
2. 使用 custom event只为您的扩展。
3. 通过插入额外的 <script> 在页面上下文中直接操作变量/函数和/或调用函数元素。
4. 动态更改网页脚本的代码，使其运行良好。这仅适用于单个页面/域，如果网页更改其代码，则很容易中断。虽然可能，但这不是一个好的选择。