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

您可以反转逻辑：使页面侦听来自扩展的ping。您需要注意脚本何时执行（例如，取决于run_at参数）相互关联，以便您在页面开始侦听之前不会意外地发送消息。
您可以使用另一种向页面宣布存在的方法：内容脚本可以添加具有已知ID的不可见DOM元素，您可以从页面检查其存在。

如果要保留当前方法，可以设置响应发生的计时器。比如200ms这样的东西应该绰绰有余。

您可以将其实现为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的函数。

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

1 个答案: