你必须了解 chrome 插件开发才能阅读以下内容。

传送门： https://qa.1r1g.com/sf/ask/440544891/

原理：页面 js 向 chrome 插件的 background.js 传送消息并且获取反馈。

这需要使用到 background.js，需要配置一下：

"background":

{

    "scripts": ["background.js"]

},

"externally_connectable":

{

    "matches": ["*://localhost/*", "*://your.domain.com/*"]

},

值得一提的是: externally_connectable 必须是二级域名，
说白了你必须用服务器来测试这个功能。

background.js

chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {

    if (request) {

        if (request.message) {

            if (request.message == "version") {

                sendResponse({ version: 1.0 })

            }

        }

    }

    return true

})

http://localhst:80/index.html  测试消息传递：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>检查用户是否安装了Chrome扩展程序</title>

</head>

<body>

    <div id="app"></div>

</body>

<script>

// chrome extensions id

const id = 'jckdhikejenepdegalgokjacoeamoibk1'

// 需要版本

const requiredVersion = 1.0

// 是否安装了扩展？

let hasExtension = false

// 扩展是否为最新版本？

let isLastVersion = false

try {

    // 向 backgrond.js 发送消息

    chrome.runtime.sendMessage(id, { message: "version" }, function(reply) {

        if (reply && reply.version  >= requiredVersion) {

            console.log('ok')

        } else {

            console.warn('update')

        }

    })

} catch (err) {

    if (err.message.includes('Invalid extension id')) {

        console.warn('未检测到插件存在！')

    }

}

</script>

</html>
​

检查 chrome 插件是否存在的更多相关文章

  1. chrome插件编写之新版hello world

    编写chrome插件之前,需要熟悉一下相应的chrome插件开发环境.从编写hello world开始,参考阅读官方的教程,是一个不错的选择.这里主要是基于chrome的官方教程,稍稍做了一些修改和扩 ...

  2. Chrome 插件: 起动本地应用 (Native messaging)

    Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn  网友分享于:2014-08-01  浏览:3次   Chrome 插件: 启动本地应用 ...

  3. Web设计者和开发者必备的28个Chrome插件

    摘要 对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场. 在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论 ...

  4. 【转】15 个用于 GitHub 的 Chrome 插件

    原文网址:http://webres.wang/15-useful-chrome-extensions-for-github/ 对于 GitHub 你了解多少呢?其实,它是一个基于 Git 托管的 W ...

  5. 实用chrome插件

    2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chro ...

  6. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  7. 【干货】Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...

  8. 前端开发中一些好用的chrome插件总结

    下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结: 红色是个人认为比较好用的,排名不分先后 1.AppJump管理应用的插件  安装了许多应用之后肯定 ...

  9. 这是一款借助chrome 插件的微信机器人

    1.chrome kit微信机器人简介 借助chrome 插件 js注入来实现消息的发送 chrome devtool api的调用来监听https请求 打开微信登录界面,在扫码登录前必须先打开too ...

随机推荐

  1. 【Python】生成器

    生成器是一种特殊的迭代器 # 斐波那契数列 10 def create_num(all_num): a, b = 0, 1 current_num = 0 while current_num < ...

  2. ML- 线性回归推导

    线性回归, 这部分算是我最为擅长的了, 真的不吹, 6年经验, 我高中时代就已经会推导了, 当然是最最小二乘法和统计学(假设检验, 参数分布等)的角度. 后来上了大学, 又是从最小二乘和统计学角度, ...

  3. Oracle数据表字段小写转大写

    BEGIN FOR c IN ( SELECT COLUMN_NAME cn FROM all_tab_columns WHERE table_name = '表名' ) loop BEGIN exe ...

  4. Prometheus（五）：Prometheus+Alertmanager 配置企业微信报警

    此处默认已安装Prometheus服务,服务地址:192.168.56.200  一.设置企业微信 1.1.企业微信注册(已有企业微信账号请跳过) 企业微信注册地址:https://work.weix ...

  5. jenkins忘记admin密码的处理方法

    如果忘记admin的登录密码,可按如下方法处理 # 编辑config.xml文件,替换passwordHash行的内容# vim /var/lib/jenkins/users/admin_167938 ...

  6. Layout POJ - 3169

    题目链接:https://vjudge.net/problem/POJ-3169 题意:有一些奶牛,有些奶牛相互喜欢,他们之间的距离必须小于等于一个K. 有些奶牛相互讨厌,他们之间的距离必须大于等于一 ...

  7. 一个兼容IE7\IE8,H5的多功能视频播放器,H5视频播放器兼容Flash视频播放器

    这里记录一个视频播放器,免费可适当修改:名称:ckplayer视频播放器(免费) 官网地址:http://www.ckplayer.com/ 下载地址:http://www.ckplayer.com/ ...

  8. php门面模式(facade pattern)

    书上不全的代码,我自己补全的. <?php /* The facade pattern is used when we want to simplify the complexities of ...

  9. javascript学习5、JS面向对象

    创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 JS中最基本创建对象的 ...

  10. Mysql 日常

    Mysql 日常总结 做报表的时候经常会使用 if 来帮助统计 select count(if(key=1,1,NULL)) from atable where ... 当然,也支持选择 select ...