你必须了解 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. DLL Injection with Delphi（转载）

    原始链接 I had recently spent some time playing around with the simple to use DelphiDetours package from ...

  2. 【Python】列表推导式

    1. 列表推导式 list1 = [1, 3, 5, 6, 8] list2 = [x * 2 for x in list1] print(list2) # [2, 6, 10, 12, 16]

  3. Bootstrap。

    bootstrap: 1.概念:前端开发框架. 2.快速入门:下载bootstrap.导入文件. 3.响应式布局: * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成1 ...

  4. 关于Hive创建分区目录且能查到数据的三种方法

    关于Hive创建分区目录且能查到数据的三种方法 1. 使用dfs -mkdir 和 dfs -put 分别创建分区目录和上传数据,此时执行msck repair table 表名 命令就能查询到数据 ...

  5. python遍历列表删除多个元素的坑

    如下代码,遍历列表,删除列表中的偶数时,结果与预期不符. a = [11, 20, 4, 5, 16, 28] for i in a: if i % 2 == 0: a.remove(i) print ...

  6. 项目Beta冲刺(团队)--4/7

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺 团队名称:葫芦娃队 作业目标:进行新一轮的项目冲刺,尽力完成并完善项目 团队博客 队员学号 队员昵称 博客地址 04160242 ...

  7. 项目Beta冲刺（团队）——05.24(2/7)

    项目Beta冲刺(团队)--05.24(2/7) 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:记录Beta敏捷冲刺第2 ...

  8. egg 阻止 sql 注入，相关文章

    egg 阻止 sql 注入,相关文章 网址 注意!!我们极其不建议开发者拼接 sql 语句,这样很容易引起 sql 注入!!如果必须要自己拼接 sql 语句,请使用 mysql.escape 方法. ...

  9. 20180520模拟赛T1——math

    [问题描述] 小美有 n 个点 m 条边. 让你给每个点一个正整数编号. 每条边有两个属性,相连的两个点的编号的 GCD 和 LCM. 题目保证整张图连通. 让你构造出一个编号. [输入格式] 从文件 ...

  10. vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法

    vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法 重点:解决方法是: ...