检查 chrome 插件是否存在
你必须了解 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 插件是否存在的更多相关文章
- chrome插件编写之新版hello world
编写chrome插件之前,需要熟悉一下相应的chrome插件开发环境.从编写hello world开始,参考阅读官方的教程,是一个不错的选择.这里主要是基于chrome的官方教程,稍稍做了一些修改和扩 ...
- Chrome 插件: 起动本地应用 (Native messaging)
Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn 网友分享于:2014-08-01 浏览:3次 Chrome 插件: 启动本地应用 ...
- Web设计者和开发者必备的28个Chrome插件
摘要 对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场. 在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论 ...
- 【转】15 个用于 GitHub 的 Chrome 插件
原文网址:http://webres.wang/15-useful-chrome-extensions-for-github/ 对于 GitHub 你了解多少呢?其实,它是一个基于 Git 托管的 W ...
- 实用chrome插件
2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chro ...
- Web前端开发实用的Chrome插件
Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...
- 【干货】Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔)
写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...
- 前端开发中一些好用的chrome插件总结
下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结: 红色是个人认为比较好用的,排名不分先后 1.AppJump管理应用的插件 安装了许多应用之后肯定 ...
- 这是一款借助chrome 插件的微信机器人
1.chrome kit微信机器人简介 借助chrome 插件 js注入来实现消息的发送 chrome devtool api的调用来监听https请求 打开微信登录界面,在扫码登录前必须先打开too ...
随机推荐
- python中生成JWK(json web token)
#需要安装pyjwt import jwt import time # 使用 sanic 作为restful api 框架 def create_token(request): grant_type ...
- Java下载文件解决中文乱码问题
直接上代码 /** * @desc 下载已存在的文件 */ public void sendFile(HttpServletRequest request, HttpServletResponse r ...
- 大数据：Hadoop（JDK安装、HDFS伪分布式环境搭建、HDFS 的shell操作）
所有的内容都来源与 Hadoop 官方文档 一.Hadoop 伪分布式安装步骤 1)JDK安装 解压:tar -zxvf jdk-7u79-linux-x64.tar.gz -C ~/app 添加到系 ...
- IDEA 创建类是自动添加注释和创建方法时快速添加注释
1.创建类是自动添加注释 /*** @Author: chiyl* @DateTime: ${DATE} ${TIME}* @Description: TODO*/2. 创建方法时快速添加注释2.1 ...
- Odoo日历视图详解
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826148.html 一:日历视图定义 根元素为<calendar>. 主要的属性有: ...
- 《linux就该这么学》课堂笔记11 LVM、防火墙初识
1.常用的LVM部署命令 功能/命令 物理卷管理 卷组管理 逻辑卷管理 扫描 pvscan vgscan lvscan 建立 pvcreate vgcreate lvcreate 显示 pvdispl ...
- nginx与php分离搭建
nginx与php分离搭建 nginx配置 server { listen 80; 定义端口 server_name www.a.org; 定义域名 location / ...
- Caused by: org.I0Itec.zkclient.exception.ZkTimeoutException: Unable to connect to zookeeper server within timeout: 5000
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'brandControl ...
- Zipkin 的 Docker 镜像使用
1.Zipkin 在 dockerhub 上网址:https://hub.docker.com/r/openzipkin/zipkin 2.下载镜像 docker pull openzipkin/zi ...
- mySql 常用命令 | 珠峰培训例子
show databases; use mhxy; select database(); show tables; desc account_list_175; ),(); select from_u ...