【JS】判断是否安装了某个Chrome插件

前提

manifest.json 清单

下文均以manifest.json v3介绍。

因为Chrome官方文档中明确说明，v2已经弃用了。
在这里插入图片描述

在这里插入图片描述

ID

由于浏览器的安全策略，以下方法均在「已知扩展程序 ID」的前提下才可实现。

获取扩展程序ID

进入扩展程序管理页，找到对应插件。
注意：上架后的程序ID唯一，但是开发阶段（文件夹拖入形式），ID是随机变化的（每次拖入ID发生改变）。

在这里插入图片描述

方式一：Web端加载扩展程序中的资源

通过web端尝试加载扩展程序中的资源来判断是否下载了插件。

扩展程序

在manifest.json 清单中将图片暴露为 web可访问资源。

在这里插入图片描述
注意：一定要加后缀，按照编译器默认提示并不会生效。

Web端

通过扩展程序ID，尝试加载扩展程序中暴露的图片资源

function detectExtension(extensionId) {
    let img
    img = new Image()
    img.src = "chrome-extension://" + extensionId + "/icons/logo-tini.png"
    img.onload = function () {
        console.log("插件已存在")
    };
    img.onerror = function () {
        console.log("未找到插件")
    };
}

方式二：Web与扩展程序通信

扩展程序

在manifest.json 清单中，添加externally_connectable配置项，该配置项用于指定扩展与哪些网站可以进行外部通信，即与网站的内容脚本进行通信。

在这里插入图片描述

background.js中监听Web端的消息

// background.js
chrome.runtime.onMessageExternal.addListener(function (
  message,
  sender,
  sendResponse
) {
  if (message && message === "hasExtension") {
    sendResponse({ hasExtension: true })
  } else {
    return true
  }
})

但是content.js中不可以监听Web端的消息，主要因为 「沙盒环境限制」 和 「消息传递机制」

沙盒环境限制
content.js在网页环境中运行，与网页的 DOM 共享同一个沙盒环境，但与扩展程序的其他部分（如 background.js）处于不同的沙盒环境。因此，content.js 无法直接访问 Chrome 扩展 API，包括 chrome.runtime.onMessage.addListener。

消息传递机制
content.js 与其他部分通信的主要方式是通过消息传递。content.js 可以使用 chrome.runtime.sendMessage 方法向其他部分发送消息，其他部分可以通过监听 chrome.runtime.onMessage.addListener 来接收消息。但 content.js 自身不具备接收消息的能力，因为它运行在沙盒环境中，无法直接监听 Chrome 扩展的事件。

Web端

try {
  chrome.runtime.sendMessage(
    extensionId,
    "hasExtension",
    (res) => {
      console.log("res", res)
      if (res && res.hasExtension) {
        console.log("插件已存在")
      }
    }
  )
} catch (error) {
  console.log(error.message)
  console.log("未找到插件")
}

方式三：扩展程序向Web端插入元素（不需要扩展程序ID，更适用于开发阶段未上架的扩展）

扩展程序

在 content.js 中向页面插入标识，也可以自行操作dom，比如给某个web端已存在的标签添加自定义属性等等。

let div = document.createElement('div');
div.setAttribute('id', 'hasExtension');
// 也可以继续添加多个自定义属性用于提高健壮性
div.setAttribute("isInstalled", "true")
document.getElementsByTagName('body')[0].appendChild(div);

注意：一定要写在 content.js 中，其他不生效。因为只有 content.js 与Web端DOM共享一个沙盒环境。content.js 会在页面加载完成后注入到页面中，但是在页面的 DOM 元素加载完毕之前执行。

Web端

function detectExtension() {
  let div = document.getElementById("hasExtension");
  let flag = div.getAttribute("isInstalled")
  if (div && flag) {
        console.log('插件已存在');
  } else {
      console.log('未找到插件');
  }
}