检查 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 ...
随机推荐
- Shell 编程 条件语句
本篇主要写一些shell脚本条件语句的使用. 条件测试 test 条件表达式 [ 条件表达式 ] 文件测试 -d:测试是否为目录(Directory). -e:测试文件或目录是否存在(Exist). ...
- python调用C语言接口
python调用C语言接口 注:本文所有示例介绍基于linux平台 在底层开发中,一般是使用C或者C++,但是有时候为了开发效率或者在写测试脚本的时候,会经常使用到python,所以这就涉及到一个问题 ...
- Docker容器的简单使用
1. docker的使用 1> 创建容器 创建并启动容器: docker run -it -name 容器名 镜像: 版本 /bin/sh(bash) 创建并不启动容器:docker crea ...
- kuangbin专题专题四 Currency Exchange POJ - 1860
题目链接:https://vjudge.net/problem/POJ-1860 大致题意:有不同的货币,有很多货币交换点,每个货币交换点只能两种货币相互交换,有佣金C,汇率R. 每次交换算一次操作, ...
- TensorFlow之estimator详解
Estimator初识 框架结构 在介绍Estimator之前需要对它在TensorFlow这个大框架的定位有个大致的认识,如下图示: 可以看到Estimator是属于High level的API,而 ...
- Educational Codeforces Round 69 D. Yet Another Subarray Problem
Educational Codeforces Round 69 (Rated for Div. 2) D. Yet Another Subarray Problem 题目链接 题意: 求\(\sum_ ...
- python应用-craps赌博游戏
from random import randint face1=randint(1,6) face2=randint(1,6) first_point=face1+face2 print('玩家摇出 ...
- 前端性能----CDN
Content Distribute Network(内容分发网络)是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度等功能模块,使用户就近获取所需内容 ...
- keil编译器从ac5迁移到ac6
今天在安富莱的论坛上ac6的使用方法,所以,就小试牛刀玩了玩,终于ok了.使用keil5.25+stm32+hal库,5.23开始才支持ac6,因此keil版本不能太低. 可以参考:https://b ...
- GPU的主要工作：图像合成、图形操作、光线表达
GPU的主要工作:图像合成.图形操作 gpu不产生图片, 只表达和处理图片.图形: