Firefox WebExtension：检查扩展是否已经存在

Question

我正在将我的 Chrome 扩展程序移植到 Firefox WebExtension，到目前为止一切顺利，我设法与我的内容、后台脚本和我的可执行文件顺利通信。

我现在想检查我的扩展程序是否存在。这实际上是我这样做的方式：

浏览器脚本

// browser-script.js

var isExtensionHere = false;

$("#is-extension-here").click(function(){

    console.log("Check the existence of the extension");

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

window.addEventListener("message", function(event) {
  if (event.source == window &&
      event.data.direction &&
      event.data.direction == "from-content-script") {
        if(event.data.message == "OK") {
            isExtensionHere = true;
        }
  }
});

内容脚本

// content-script.js

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

    if(event.data.message == "areYouThere") {
        window.postMessage({
        direction: "from-content-script",
        message: "OK"
      }, "*");
    }
  }
});

扩展程序在这里工作正常。但如果不是，显然我没有从我的分机中得到答案。当扩展程序不在这里时，我怎么知道如何触发弹出窗口或消息？

Answer 1

1. 您可以反转逻辑：让页面监听来自扩展的 ping。您需要注意脚本执行的时间（例如，取决于run_at 参数）彼此之间的关系，以免在页面开始侦听之前意外发送消息。

2. 您可以使用另一种向页面宣布存在的方法：内容脚本可以添加一个具有已知 ID 的不可见 DOM 元素，并且您可以从页面中检查它的存在。

3. 如果您想保持当前的方法，您可以设置一个计时器以使响应发生。比如说，200 毫秒应该绰绰有余。

   您可以将其实现为 Promise，因为它只能被解决一次：

   var isExtensionHere = new Promise((resolve, reject) => {
     const listener = (event) => {
       if (
         event.source == window && event.data.direction
         && event.data.direction == "from-content-script"
         && event.data.message == "OK"
       ) {
         resolve(true);
       }
     }
   
     setTimeout(() => {
       window.removeEventListener("message", listener);
       resolve(false); // Will have no effect if already called with true
     }, 200);
   
     window.addEventListener("message", listener);
   
     window.postMessage({
       direction: "from-page-script",
       message: "areYouThere"
     }, "*");
   });
   
   // Sometime later
   isExtensionHere.then((result) => { /* ... */ });
   

   如果要动态重新检查，请将 isExtensionHere 设为每次返回新 Promise 的函数。