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

Question

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

Answer 2

从您的内容脚本中导出一个函数，然后可以从页面调用它。

内容脚本

var myContentScriptFunction = function(myVariable) {
    alert(myVariable);
}

exportFunction(myContentScriptFunction, window, {defineAs: 'myContentScriptFunction'});

页面脚本

if (window.myContentScriptFunction) window.myContentScriptFunction('Working');