gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:04:29 25 4
gpt4 key购买 nike

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

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

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

最佳答案

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

WebExtensions 主要基于与 Chrome 扩展相同的原则构建。因此,这个问题是相关的:Check whether user has a Chrome extension installed .

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

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 很笨重。

    这是 documentationsample 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使用 exportFunctioncloneInto:

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

关于javascript - 如何使用页面 JavaScript 检查是否安装了 Firefox WebExtension?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46727370/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com