网页前端设计

http://www.86y.org

搜索文章

javascript如何判断浏览器是否安装某插件

用声音读出全文关注我吧
 2022/7/9 9:28:18 阅读次数:289

javascript如何判断浏览器是否安装某插件

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)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=877【javascript如何判断浏览器是否安装某插件】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭