如何使用页面 JavaScript 检查是否安装了 Firefox WebExtension？

Question

我为 Firefox 开发了一个 WebExtension，我的网站以该扩展为先决条件。我需要以编程方式检查扩展程序是否已安装，如果未安装，请要求用户安装它。

我无法找到一种方法来检查我的扩展程序是否已安装在用户的浏览器中。

编者注：Firefox 中可用的方法与available in Chrome 不同，所以这个问题不是重复的。

Answer 1

开头的重要说明：如果没有扩展程序的明确帮助，页面无法查询是否安装了扩展程序。这样做是为了防止浏览器指纹识别和/或防止网站在以下情况下拒绝内容安装了某些扩展。

WebExtensions 在很大程度上建立在与 Chrome 扩展程序相同的原则之上。因此，这个问题是相关的：Check whether user has a Chrome extension installed。

但是，Chrome 中可用的一些最佳方法目前在 Firefox 中不可用：

• 您不能使用external messaging from a webpage（通过externally_connectable），因为它在FF 中不可用。

• 你不能use web-accessible resources for checking presence，因为 Firefox intentionally shields them from fingerprinting：

这些文件将通过如下 URL 提供：

moz-extension://<random-UUID>/<path/to/resource>

此 UUID 为每个浏览器实例随机生成，而不是您的扩展程序的 ID。这可以防止网站对用户安装的扩展程序进行指纹识别。

因此，您有哪些选择？页面不能直接与扩展上下文（背景）对话，背景也不能直接影响页面；您需要Content script 才能与页面内容进行交互。

页面代码和内容脚本如何通信？除非内容脚本对此进行处理，否则它们是相互隔离的。

首先，适用于 FF 和 Chrome 的通用技巧：

• 您可以通过内容脚本在页面上create or modify a DOM element 并在页面中查找这些修改。

    // Content script
    let beacon = document.createElement("div");
    beacon.classname = browser.runtime.id;
    document.body.appendChild(beacon);
  
    // Page script
    // Make sure this runs after the extension code
    if (document.getElementsByClassName("expected-extension-id").length) {
      // Installed
    } else {
      // Not installed
    }
  

• 您可以使用postMessage 在上下文之间进行通信，但将其用作双向通道会很笨重。

  这里是documentation 和sample WebExtension。

    // Content script code
    window.postMessage({
      direction: "from-content-script",
      message: "Message from extension"
    }, "*");
  
    // Page code
    window.addEventListener("message", function(event) {
      if (event.source == window &&
          event.data.direction &&
          event.data.direction == "from-content-script") {
        // Assume extension is now installed
      }
    });
  

• 你可以用类似的方式use custom DOM events。

还有一些有趣的特定于 Firefox 的方法：

• 您可以使用exportFunction 或cloneInto share code with the page：

    // Content script
    function usefulFunction() {
      /* ... */
    }
  
    const extensionInterface = {
      usefulFunction
    }
    window.wrappedJSObject.extensionInterface = 
      cloneInto(extensionInterface, window, {cloneFunctions: true});
  
    // Page code
    if (typeof window.extensionInterface !== "undefined") {
      // Installed
      window.extensionInterface.usefulFunction();
    } else {
      // Not installed
    }