javascript - 火狐网络扩展 : check if extension already exists

Question

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

我现在想检查我的扩展程序是否存在。这实际上就是我的做法:

Browser script

// 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

// 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 的函数。