chrome测试环境：102.0.5005.63
方法有多种，这里就做了两种方案：
1. 检测扩展的可访问资源【推荐】
原理：使用扩展可以访问的资源，确定扩展是否安装或启用。
存在问题：需要知道extension id
以下 HTML 标签支持 onload :
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
加载图片资源【推荐】
manifest.json
{
...
"web_accessible_resources": ["img/logo.png"]
}
html调用
function detectExtension(extensionId, callback) {
let img;
img = new Image();
img.src = "chrome-extension://" + extensionId + "/img/logo.png";
img.onload = function () {
callback(true);
};
img.onerror = function () {
callback(false);
};
}
2. 插件修改页面源代码，写入插件标识，js检测标识
原理：尽管content script的执行环境与所在的页面是隔离的，但它们还是共享了页面的DOM。如果页面需要与content script通信（或者通过content script与扩展通信）， 就必须通过这个共享的DOM。
存在问题：插件安装或卸载后，需要刷新页面才能生效
index.html（调用页面）
<!DOCTYPE html>
<html>
<body>
<input id="ExtensionCheck" style="visibility: hidden"></input>
<script>
function test() {
let div = document.getElementById("ExtensionCheck");
if (div.value=="1") {
console.log('扩展存在');
} else {
console.log('扩展未启用或不存在');
}
}
</script>
</body>
</html>
通过content_script.js给页面ExtensionCheck赋值
document.getElementsById('ExtensionCheck').value="1";
以上就是两种比较简单的检测浏览器是否安装某插件
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)