你必须了解 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. 12306 抢票项目霸榜 GitHub，标星即将破万

    十一将至,你买到回家的火车票了吗?如果没有,你可以试着打开 GitHub,在搜索栏键入 12306 的关键词,我相信你会发现一个新大陆.没错,这里有 1572 个抢票项目.它们大多用 Python.J ...

  2. k8s网络配置管理

    docker容器的四种网络类型 1.桥接           2.联盟    3.主机    4.无 docker跨节点的容器通信必须通过NAT机制  宿主机上的容器一般都是私网地址 它可以通过宿主机 ...

  3. css transform解释及demo(基于chrome)

    transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. Transform:(css3 转换) 注意:这些效果叠加时,中间用空格隔开 作用:能够对元 ...

  4. Idea 热部署插件JRebel 安装与环境配置-上海尚学堂Java培训

    在企业日常项目开发中,如果我们需要调试一个Java Web项目,就需要先将项目编译之后,放入Web容器或借助Maven web 插件来运行,如果对Java源代码进行修改,那么必须重新编译并重启Web容 ...

  5. MySQL IFNULL() 函数

    MySQL函数 IFNULL() 函数用于判断第一个表达式是否为 NULL,如果为 NULL 则返回第二个参数的值,如果不为 NULL 则返回第一个参数的值. IFNULL() 函数语法格式为: IF ...

  6. document.forms使用

    定义:document.forms返回form表单的集合,包含了当前DOM结构中所有的form表单. 语法: . 获取当前DOM结构中的第一个form表单. document.forms[] . 获取 ...

  7. 初入Linux

    初步进入linux世界 [Linux 系统启动过程] Linux的启动其实和windows的启动过程很类似,不过windows我们是无法看到启动信息的,而linux启动时我们会看到许多启动信息,例如某 ...

  8. vue实现分页组件

    创建pagination.vue /* * 所需参数 * total Number 总页数 * current Number 当前页面下标 * pageSize Number 页面显示条数 * siz ...

  9. maven中jar冲突解决

    Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...

  10. Q-learning之一维世界的简单寻宝

    Q-learning的算法: (1)先初始化一个Q table,Q table的行数是state的个数,列数是action的个数. (2)先随机选择一个作为初始状态S1,根据一些策略选择此状态下的动作 ...