检查 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 ...
随机推荐
- 12 ARM汇编
Android系统采用java作为平台软件基础开发语言,NDK使Android平台可以运行C/C++代码这些代码汇编成ARM的elf可执行文件. 原生程序生成过程 经历4步:1.预处理2.编译3.汇编 ...
- Python学习的开端
C语言太麻烦了,所以我打算自学Python. 自学选的书是<父与子的编程之旅>,这本书还是比较通俗易懂的. 贴上书上教我编写的猜数字游戏代码 import random secret = ...
- 浅谈Python设计模式 - 外观模式
声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 外观模式 外观模式的核心在于将复杂的内部实现包装起来,只向外界提供简单的调用接口 ...
- 【转】UCOSIII基础知识点
1.其中最有用的功能应该是时间片轮转法( roundrobin), 这个是 uC/OS-II 中不支持的,但是现在已经是 uC/OS-III 的一个功能了 2.uC/OS-III 被设计用于 32 位 ...
- k8s如何访问pod
1. 通过 Service 访问 Pod 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 control ...
- 图论篇2——最小生成树算法（kurskal算法&prim算法）
基本概念 树(Tree) 如果一个无向连通图中不存在回路,则这种图称为树. 生成树 (Spanning Tree) 无向连通图G的一个子图如果是一颗包含G的所有顶点的树,则该子图称为G的生成树. 生成 ...
- Exploit Kit——hacker入侵web，某iframe中将加载RIG EK登录页面，最终下载并执行Monero矿工
RIG Exploit Kit使用PROPagate注入技术传播Monero Miner from:https://www.4hou.com/technology/12310.html 导语:Fire ...
- ImportError: No module named wx
先检查下Python中是否有此模块 $ python >>> import wx ImportError: No module named wx wx模块的确没有安装. 要安装wx ...
- python 获取当前，上级，上上级路径
import os print '***获取当前目录***' print os.getcwd() print os.path.abspath(os.path.dirname(__file__)) pr ...
- DT企业新闻也叫公司新闻简介调取方案
今天我们讲的是企业新闻简介的事,由于destoon官方比较懒,企业新闻没有开发这个截字功能,我们就变通思维直接调取内容前100字,但是由于企业新闻是2个不同的 表,所以我们必须做点小事, 就是写点p ...