你必须了解 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. Django 之瀑布流实现

    需求分析 现在是 "图片为王"的时代,在浏览一些网站时,经常会看到类似于这种满屏都是图片.图片大小不一,却按空间排列,就这是瀑布流布局. 以瀑布流形式布局,从数据库中取出图片 每次 ...

  2. LINUX基础学习之基础命令（4）和 文件的inode信息 --2019-11-28

    一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做”扇区”(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会 ...

  3. SAMBA 服务配置

    Samba文件共享服务 Linux系统中一种文件共享程序 在Windows网络环境中,主机之间进行文件和打印机共享是通过微软公司自己的SMB/CIFS网络协议实现的.SMB(Server Messag ...

  4. Mac Docker安装Redis4.0

    mkdir redis 在~目录下创建redis目录 docker run -d -p 6379:6379 -v $PWD/redis:/data -d --name redis4.0 redis:4 ...

  5. httprunner学习5-参数化与数据驱动

    前言 参数化是自动化测试离不开的话题,httprunner里面只要把上一篇声明变量学会了,参数化也就自然会了. 不同的地方在于声明变量时对应值只有一个,参数化是多个值,存放在list里面. httpr ...

  6. SHOI2017 分手是祝愿

    分手是祝愿 有

  7. pandas IO

    pd.read_csv("../data/user_info.csv", index_col="name") #假设csv里包含这几列: name, age, ...

  8. oracle数据库(六)

    存储过程和函数以及触发器 PL/SQL程序块都是匿名块,当需要再次调用这些程序块时,只能再次编写程序块的内容,然后又oracle重新编译执行,为了提高系统的应用性能,oracle提供了一系列“命名程序 ...

  9. ie6下标签定义的高失效，显示的高不受设定的height值影响

    今天又碰到一个奇葩的ie6兼容bug,忍不住抱怨下这个后妈生的鬼东西!! 看图这个是在非ie6下的浏览器效果

  10. go mod 使用

    go modules 是 golang 1.11 新加的特性.现在1.12 已经发布了,是时候用起来了.Modules官方定义为: 模块是相关Go包的集合.modules是源代码交换和版本控制的单元. ...