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

柔情只为你懂 2023-01-19 08:28 362阅读 0赞

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

--------------------

如需转载请标明出处：[http://blog.csdn.net/itas109 ][http_blog.csdn.net_itas109]  
QQ技术交流群：[129518033][]

### 文章目录 ###

*  javascript如何判断浏览器是否安装某插件
 *   *  1. 检测扩展的可访问资源【推荐】
     *  2. 发送消息给插件判断返回信息
     *  3. 插件修改页面源代码，写入插件标识，js检测标识
     *  4. window.postMessage发送消息
     *  5. 通过共享资源方式
     *  5. NavigatorPlugins.plugins

环境：

chrome: 90

## 1. 检测扩展的可访问资源【推荐】 ##

原理：使用扩展可以访问的资源，确定扩展是否安装或启用

存在问题：需要知道extension id

以下 HTML 标签支持 onload :

*  加载图片资源【推荐】

manifest.json

{
    ...
    "web_accessible_resources": ["img/logo.png"]
    }

--------------------

*  加载配置json文件【不推荐】

manifest.json

通过 web\_accessible\_resources，列出资源，可经网页访问

{
    ...
    "web_accessible_resources": ["manifest.json"]
    }

## 2. 发送消息给插件判断返回信息 ##

原理：页面 js 向 chrome 插件的 background.js 传送消息判断返回信息

存在问题：需要解决externally\_connectable网址匹配问题

manifest.json

externally\_connectable 属性声明哪些扩展程序、应用和网页可以通过 runtime.connect 和 runtime.sendMessage 连接到您的扩展程序

{
    ...
    
    "externally_connectable": {
            "matches": [
                "*://localhost/*"
              ]
        },
    }

background.js（content.js无效）

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

页面js

try {
        // 向指定id插件的 backgrond.js 发送消息
        chrome.runtime.sendMessage(pluginId, {
            message: "hasExtension"
        }, res => {
            if (res && res.hasExtension) {
                console.log('扩展存在');
            }
        })
    } catch (error) {
        console.log(error.message);
        console.log("扩展未启用或不存在");
    }

## 3. 插件修改页面源代码，写入插件标识，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("myapp-extension-installed-div");
                if (div) {
                    console.log('扩展存在');
                } else {
                    console.log('扩展未启用或不存在');
                }
            }
        </script>
    </body>

content\_script.js

'use strict';
    
    let div = document.createElement('div');
    div.setAttribute('id', 'my-extension-installed-div');
    document.getElementsByTagName('body')[0].appendChild(div);

## 4. window.postMessage发送消息 ##

使用 window.postMessage（或者 window.webkitPostMessage 用于可传输（Transferable）的对象）

在html中监听，content\_script.js中发送消息

## 5. 通过共享资源方式 ##

原理：通过共享资源方式，如cookie

存在问题：在插件卸载后，没有删除cookie会影响结果判断

index.html

if (document.cookie.indexOf('my_extension_installed') != -1){
        console.log('扩展存在');
    }else{
        console.log('扩展未启用或不存在');
    }

content\_script.js

'use strict';
    
    document.cookie = "my_extension_installed=true";

## 5. NavigatorPlugins.plugins ##

返回一个 PluginArray (en-US) 类型的对象, 包含了当前所使用的浏览器安装的所有插件

注意：该方法只能返回浏览器安装的内置插件

<table> 
 <thead> 
  <tr> 
   <th>Plug-in Name</th> 
   <th>Filename</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Chrome PDF Plugin</td> 
   <td>internal-pdf-viewer</td> 
   <td>Portable Document Format</td> 
  </tr> 
  <tr> 
   <td>Chrome PDF Viewer</td> 
   <td>mhjfbmdgcfjbbpaeojofohoefgiehjai</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Native Client</td> 
   <td>internal-nacl-plugin</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

--------------------

**License**

[*License under CC BY-NC-ND 4.0: 署名-非商业使用-禁止演绎*][License under CC BY-NC-ND 4.0_ _-_-]

--------------------

Reference:  
NULL

[http_blog.csdn.net_itas109]: http://blog.csdn.net/itas109
[129518033]: http://shang.qq.com/wpa/qunwpa?idkey=2888fa15c4513e6bfb9347052f36e437d919b2377161862948b2a49576679fc6
[License under CC BY-NC-ND 4.0_ _-_-]: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh