【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 imgimg = 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('未找到插件');}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/732547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python基本数据类型之散列类型详解

前言: python的基本数据类型可以分为三类:数值类型、序列类型、散列类型,本文主要介绍散列类型。 一、散列类型 散列类型:内部元素无序,不能通过下标取值 1)字典(dict)&#xff…

vscode中使用nvm安装node及创建vue3项目

使用vscode创建vue3项目 1。安装nvm Releases coreybutler/nvm-windows (github.com) 打开下载nvm.exe并安装 2。安装node.js 用管理员身份打开vscode,新建终端选择git bash,运行nvm list available选择lts版本,比如:16.16.…

【DIY】电子制作创意作品:有趣的激光竖琴

在上海世博会的伊朗馆,我看到了一架没有琴弦的竖琴,那是众多参观者公认的伊朗馆里最有趣的展品!参观者只要伸手穿过那架通体黑色的竖琴,音调就会被“奏响”。没有琴弦怎么奏响?工作人员为我们揭示了秘密——他按了一下…

Spring Boot搭建入门

Spring Boot简介 Spring Boot是对Spring进行的高度封装,是对Spring应用开发的高度简化版,是Spring技术栈的综合整合,是J2EE的一站式解决方案。想要精通Spring Boot的前提是需要熟悉Spring整套技术栈原理与内容。 Spring Boot的优点&#xf…

背景虚拟化组件,透明模糊

问题当我们背景想要进行透明或者模糊处理的时候我们一般我们可以以通过 rgba 的第四个位置可以进行透明处理,但是模糊不行 需要懂得知识点,定位,属性加强,结构化,react 插槽 话不多说上代码 子组件 import logincs…

RN的父传子和子传父及方法调用(函数式组件)

在React Native中,父组件向子组件传递数据通常通过props实现,而子组件向父组件传递数据则通常通过回调函数实现。下面是一个简单的示例,演示了父组件向子组件传递数据和子组件向父组件传递数据的方法: 父传子 父组件 // ParentC…

指针篇章-(冒泡排序详解)

冒泡排序 图解 tmp图解 内容图解 每次循环的次数减少 for循环详解 冒泡排序是一种简单的排序算法,它重复地遍历要排序的数列, 一次比较两个元素,如果它们的顺序错误就把它们交换过来。 遍历数列的工作是重复地进行直到没有再需要交换&…

Double和Float类

Double类 功能:实现对Double基本型数据的类包 构造方法: (double num) double Value()方法:返回对象中的double型数据。 Float类 功能:实现对float基本型数据的类包装。 构造方法: (float num) Float Value()方法…

云计算项目九:K8S安装

K8S安装 Kube-master安装 按照如下配置准备云主机 防火墙相关配置:禁用selinux,禁用swap,且在firewalld-*。上传kubernetes.zip 到跳板机 配置yum仓库(跳板机) 跳板机主机配置k8s软件源服务端 [rootjs ~]# yum -y…

设计模式-行为型模式-备忘录模式

备忘录(Memento):在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。[DP] //首先,我们定义Originator类,它有一个状态和…

C++初阶:类与对象(中篇)

目录 2. 类的六个默认成员函数2.1 构造函数2.1.1 构造函数的定义方式 2.2 析构函数2.2.1 析构函数定义方式 2.3拷贝构造函数2.3.1 拷贝构造函数的定义方式2.3.2 深拷贝与浅拷贝 2.4 赋值运算符的重载2.4.1 运算符重载2.4.2 运算符的重载的定义方式2.4.3 默认成员函数&#xff1…

HTML使用

文章目录 一、简介二、HTML快速入门三、基础标签四、图片、音频、视频标签五、超链接标签六、列表标签七、表格标签八、布局标签九、表单标签十、表单向标签 一、简介 二、HTML快速入门 ​ <html><head><title>你好</title></head><body>再…

功能强大使用简单的截图/贴图工具,PixPin

一、下载链接 PixPin 截图/贴图/长截图/文字识别/标注 | PixPin 截图/贴图/长截图/文字识别/标注 (pixpinapp.com) 二、功能 截图/贴图/长截图/文字识别/标注 三、安装教程 根据提示安装即可&#xff1a; 四、快捷键 1.软件自带快捷键&#xff08;右击PixPin查看 &#xff09…

spring 技术100问?

什么是Spring框架的主要优点&#xff1f;Spring框架支持哪些模块或组件&#xff1f;什么是Spring Core模块&#xff1f;请解释Spring框架中的BeanFactory和ApplicationContext的区别。如何自定义Spring Bean的初始化和销毁方法&#xff1f;什么是Spring的工厂方法设计模式应用&…

微信小程序-入门

1.下载和安装Npm&#xff1a;Npm https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 或者 https://nodejs.org/en/download/ 未安装npm 提示 以下以安装node安装包为例 按任意键继续 安装完成后 2. 下载和安装小程序开发工具 &#xff1a;https:/…

安信可IDE(AiThinker_IDE)编译ESP8266工程方法

0 工具准备 AiThinker_IDE.exe ESP8266工程源码 1 安信可IDE&#xff08;AiThinker_IDE&#xff09;编译ESP8266工程方法 1.1 解压ESP8266工程文件夹 我们这里使用的是NON-OS_SDK&#xff0c;将NON-OS_SDK中的1_UART文件夹解压到工作目录即可 我这里解压到了桌面&#xff0c…

T1 小美的数组询问(15分) - 美团编程题 题解

考试平台&#xff1a; 牛客网 题目类型&#xff1a; 30道单选题&#xff08;60分&#xff09; 2 道编程题 &#xff08;15分 25分&#xff09; 考试时间&#xff1a; 2024-03-09 &#xff08;两小时&#xff09; 题目描述 小美拿到了一个由正整数组成的数组&#xff0c;但其中…

Draco点云压缩测试

ref&#xff1a;https://github.com/google/dracohttps://codelabs.developers.google.com/codelabs/draco-3d/index.html#6 Draco Draco 是一个用于编码压缩和解压缩 3D 几何网格和点云的库&#xff0c;从而改进 3D 图形的存储和传输该代码支持压缩点、连接信息、纹理坐标、颜…

NTFS安全权限

NTFS是新技术文件系统&#xff08;New Technology File System&#xff09;的缩写&#xff0c;是一种用于Windows操作系统的文件系统。NTFS提供了高级的功能和性能&#xff0c;包括文件和目录的权限控制、加密、压缩以及日志等。它被广泛应用于Windows NT、Windows 2000、Windo…

算法训练营day44(补),动态规划12

func max(a, b int) int { if a > b { return a } return b } //300. 最长递增子序列 func lengthOfLIS(nums []int) int { dp : make([]int, len(nums)) for i : range dp { dp[i] 1 } for i : 1; i < len(nums); i { for j : 0; j < i; j { //收集所有子序列 if…