javascript如何判断浏览器是否安装某插件-幸凡学习网

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";

以上就是两种比较简单的检测浏览器是否安装某插件

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=877【javascript如何判断浏览器是否安装某插件】幸凡学习网