javascript - 如何使用页面 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 :

The files will then be available using a URL like:

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

This UUID is randomly generated for every browser instance and is not your extension's ID. This prevents websites from fingerprinting the extensions a user has installed.

因此，您有哪些选择？页面不能直接与扩展上下文(后台)对话，后台也不能直接影响页面；你需要一个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在上下文之间进行通信，尽管用作双向 channel 很笨重。

  这是 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 的方法:

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

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