检查 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 ...
随机推荐
- Android P(9.0) userdebug版本执行adb remount失败
[DESCRIPTION] 在android P版本上如果按照“FAQ18076 android 6.0 M userdebug版本执行adb remount失败”的做法在userdebug ...
- Android-----创建SQLite数据库
简单介绍一下Android系统内置轻便又功能强大的嵌入式数据库--SQLite. SQLite是D.Richard Hipp用C语言编写的开源嵌入式数据库引擎,它是一款轻型的数据库,是遵守ACID的关 ...
- U盘出现.exe问题的解决方案
这代表U盘中了AutoRun病毒,原文件并未被删除,只是被设置为隐藏了. 所以切勿直接格式化U盘! 解决方案:分别创建文件1.reg和2.bat: 1.reg Windows Registry Edi ...
- 使用APICloud创建一个webapp项目
1.在APICloud官网注册,下载APICloud Studio并解压.(这里我选择的是APICloud Studio,还可以选择其他的开发工具的APICloud插件如Sublime,Webstor ...
- Kombu源码分析(一)概述
Celery是Python中最流行的异步消息队列框架,支持RabbitMQ.Redis.ZoopKeeper等作为Broker,而对这些消息队列的抽象,都是通过Kombu实现的.Kombu实现了对AM ...
- Gzip模块
Gzip模块为python的压缩和解压缩模块,读写gzip 文件 一.使用gzip模块压缩文件: 1 import gzip #导入python gzip模块,注意名字为全小写 2 g = gzip. ...
- SAMBA配置文件详解
全局参数: ==================Global Settings =================== [global] config file = /usr/local/samba/ ...
- Go入门:创建第一个Go工程
前言 我是一名iOS开发. 因为公司后台都用的Go. 因为对服务端不了解. 所以想自己学习学习. 环境 因为自己的电脑是mac.然后在阿里云买的是centOS的服务器. 所以下面搭建的环境都是在cen ...
- Linux core dump总结
文章链接:https://www.cnblogs.com/Anker/p/6079580.html 1.前言 一直在从事linux下后台开发,经常与core文件打交道.还记得刚开始从事linux下开发 ...
- 图像处理基本工具——Python 环境下的 Pillow( PIL )
由于笔者近期的研究课题与图像后处理有关,需要通过图像处理工具对图像进行变换和处理,进而生成合适的训练图像数据.该系列文章即主要记录笔者在不同的环境下进行图像处理时常用的工具和库.在 Python 环境 ...