你必须了解 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. set_lb

    修改lb权重,通知钉钉 前提需要安装阿里的核心库 #!/usr/local/python-3.6.4/bin/python3 #coding=utf-8 from aliyunsdkcore.clie ...

  2. Tomcat get请求中文参数乱码

    场景:使用Tomcat容器进行get方式传递中文参数到后台乱码. 原因:Tomcat默认的编码方式是ISO--. 解决方案: . 设置cofg-server.xml中的<Connector> ...

  3. error C4996: 'AVStream::codec': was declared deprecated

    关闭VS的SDL检查 工程 属性=>C/C++ =>General=> SDL checks 改为 No(/sdl).

  4. 接口自动化--requests库封装

    前言 不管是自动化大佬还是自动化小白,都知道我们用python写接口自动化测试肯定是要用requests库来封装请求类的,下面就简单介绍下requests这个库 安装 一般都是直接采用pip命令安装: ...

  5. linux lvm管理基础教程

    linux lvm管理基础教程 本人是在redhat7.x系统上亲测lvm管理功能,至于文中所受的CentOS 6 没有亲自试过. 本文来自:https://geekpeek.net/lvm-phys ...

  6. BFS (1)算法模板 看是否需要分层 (2)拓扑排序——检测编译时的循环依赖 制定有依赖关系的任务的执行顺序 djkstra无非是将bfs模板中的deque修改为heapq

    BFS模板,记住这5个: (1)针对树的BFS 1.1 无需分层遍历 from collections import deque def levelOrderTree(root): if not ro ...

  7. 金生芳-实验十四 团队项目评审&课程学习总结

    实验十四 团队项目评审&课程学习总结 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 作业学习目标 (1)掌握软件项目评审会流程(2)反思总结课 ...

  8. 开启了wpjam以后网站语言不能设置英文的解决方法

    一位网友问ytkah开启了wpjam以后网站语言不能设置英文了这是什么情况?选择English保存以后还是简体中文,禁用插件再设置语言是可以设为English,好几个站点都是这样 其实很简单,只要把这 ...

  9. 关键字explicit的作用(转)

    C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数默认情况 ...

  10. (10)树莓派 vim编辑器使用

    进去后 1点击 insert 插入数据 2 ctrl+alt+c  粘贴内容 或者 手动敲入代码 3 ctrl+v     保存 4 :wq  保存退出 5 回车