编写一个 Chrome 浏览器扩展程序
浏览器扩展允许我们编写程序来实现对浏览器元素（书签、导航等）以及对网页元素的交互，
甚至从 web 服务器获取数据，以 Chrome 浏览器扩展为例，扩展文件包括：
- 一个manifest文件(主文件,json格式)
- 至少一个HTML文件(主题可以没有HTML文件)
- JavaScript文件 (可选，非必须)
- 任何其他你需要的文件(比如图片)
将这些文件放在一个文件夹内，并通过浏览器提供的打包程序进行打包，就可以发布使用了。
这里以一个简单的例子，说明 Chrome 扩展的创建和运行过程。
首先创建一个文件夹 extensionDemo，在文件夹中分别创建以下文件：
首先看 manifest.json 文件：
{
"name": "My Extension",
"manifest_version": 2,
"version": "1.0",
"description": "A Simple Browser Extension",
"browser_action": {
"default_icon": "cat.png"
},
"content_scripts": [
{
"matches": ["file:///Users/wangxi/Desktop/extensionDemo/index.html/*"],
"js": ["script.js"]
}
]
}
对应字段解析：
{
// 扩展名称
"name": "My Extension",
// manifest 版本，只能为 2，int 类型
"manifest_version": 2,
// 扩展 版本
"version": "1.0",
// 扩展描述
"description": "A Simple Browser Extension",
// 控制提示文字、图标标记、弹出窗口等
"browser_action": {
// 设置地址栏右侧的扩展图标
"default_icon": "cat.png",
// 鼠标移到扩展图标上显示的文字，可选
"default_title": "I am a Cat",
},
// 内容脚本，在页面带入完成后调用，在脚本中可以获取页面的 DOM 元素
"content_scripts": [
{
// 扩展脚本生效的页面地址（*如果是本地测试的页面，则需要填写的是浏览器中url的地址，而不是本地的文件地址）
"matches": ["file:///Users/wangxi/Desktop/extensionDemo/index.html/*"],
// 指定扩展脚本文件
"js": ["script.js"]
}
]
}
为了模拟目标网页，这里编写 index.html 文件作为演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Moon Cakes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html, body, div, header, footer {padding:0;margin:0;background:#FFE;font-family:'Arial';}
footer {box-sizing:border-box;position:absolute;bottom:0;width:100%;padding:10px;background:#FFF;text-align:center;}
button {width:100%;padding:10px 20px;font-size:14px;background:#00A854;color:#FFF;border:none;border-radius:5px;outline:none;}
button:isabled {background:#EEE;color:#CCC;}
a {display:block;text-decoration:none;color:#FFF;}
section {padding:60px 0;text-align:center;}
#count {color:#108EE9;font-size:20px;}
.banner {width:100%;}
.cat {width:30%;}
</style>
</head>
<body>
<div>
<header><img class="banner" src="./IU.png"></header>
<section>
<img class="cat" src="./cat.png">
<p>U click the button <span id="count">0</span> Times...</p>
</section>
<footer>
<button id="btn" disabled='disabled'>
<a id='link' href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gbk&word=iu&fr=ala&ala=1&alatpl=star&pos=0&hs=2&xthttps=111111" target="_blank">Click to get the Girl</a>
</button>
</footer>
</div>
<script>
window.onload = function () {
let $btn = document.getElementById('btn')
let $count = document.getElementById('count')
let num = $count.textContent
let timer = setTimeout(() => {
$btn.removeAttribute('disabled')
}, 3000)
$btn.onclick = function () {
console.log('click btn...')
$count.textContent = num++
}
}
</script>
</body>
</html>
页面比较简单，页面按钮不可用，设置定时器，三秒后移除按钮的 disabled 属性。（模拟商城的秒杀活动）
继续看脚本文件 script.js：
let $btn = document.getElementById('btn')
let $count = document.getElementById('count')
let timer = setInterval(() => {
let ifBtnDisabled = $btn.getAttribute('disabled')
if (ifBtnDisabled !== 'disabled') {
document.getElementById('link').click()
clearInterval(timer)
} else {
console.log('button disabled...')
}
}, 500)
简单分析一下：首先获取页面的对应按钮元素，启用定时器判断按钮是否可用，若不可用则继续定时循环进行判断，直到按钮可用，触发按钮的点击事件，同时清除计时器。
添加扩展的方法：
选择扩展文件夹后，扩展文件就会被自动添加到浏览器扩展中，如果修改了扩展文件，直接点击 Relaod（cmd + R 刷新)即可：
启用扩展后，在地址栏右边会出现前面添加的 icon，如下：
然后打开对应的网页，看一下效果：
Click to get the Girl...真有这等好事就好了...
编写一个 Chrome 浏览器扩展程序的更多相关文章
- Chrome浏览器扩展程序的本地备份
由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序.一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在自己本地电脑上报这些本地文件直接拖到Ch ...
- 查看Chrome浏览器扩展程序源码的两种方法
注意:仅在当前最新的版本 55.0.2883.87 m (64-bit)上测试有效 首先获取extensionId: chrome 打开扩展程序页面 chrome://extensions/ 比如我想 ...
- 内网使用 IPV6 之 Chrome 浏览器 扩展程序 篇
手机端的 Google Chrome 浏览器在打开 "流量节省程序"后,它会通过 Google 的服务器中转流量,这台服务器支持 IPV4 和 IPV6.想在PC端使用类似的&qu ...
- 我的第一个chrome浏览器扩展 5分钟学习搞定
注意: 文件名必须是 manifest, ,注意扩展名是json, 新建一个文件夹,然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是manifest.json, 感谢https://ww ...
- Chrome浏览器扩展开发系列之十九：扩展开发示例
翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...
- Chrome浏览器扩展开发系列之十八：扩展的软件国际化chrome.i18n API
i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...
- Chrome浏览器扩展开发系列之十七：扩展中可用的chrome.events API
chrome.events中定义了一些常见的事件类型,可以供Chrome浏览器扩展程序发出对应的事件对象. 对于关注的事件,首先要通过addListener()在对应的事件上注册监听器,示例如下: c ...
- Chrome浏览器扩展开发系列之十六：扩展中可用的Chrome浏览器API
除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...
- Chrome浏览器扩展开发系列之九：Chrome浏览器的chrome.alarms.* API
Chrome浏览器扩展程序通过chrome.alarms.* API,可以制定计划周期性地执行代码,或在指定时间执行代码. 要使用chrome.alarms.* API,首先需要在manifest.j ...
随机推荐
- python2.7练习小例子（二十一）
21):1.题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队 ...
- app:showAsAction 和android:showAsAction
app:showAsAction 它有三个可选项1.always:总是显示在界面上2.never:不显示在界面上,只让出现在右边的三个点中3.ifRoom:如果有位置才显示,不然就出现在右边的三个点中 ...
- 当app出现线上奔溃，该如何办？
1.如何追踪app崩溃率,如何解决线上闪退 当iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈跟踪信息和 ...
- List中的FindAll用法
在泛型List中查找符合某个字段的全部数据,可以采用如下方式: //1.现将实体数据listList<ADDaAn> objDAList = db.ADDaAns.ToList(); // ...
- 使用apache的ab压力测试时失败请求原因
只要出现 Failed requests 就会多出现一行要求失败的各原因的数据统计,分别有 Connect, Length,与 Exception 三种,分别代表的意义为:Connect 无 ...
- 通过修改Host文件解决主机头访问网站的问题
网站打包发布后,一般都是通过IP地址来进行访问,但是这样不方便记忆.如何设置一个简单的域名,然后通过域名来进行访问呢?一个可行的方法就是修改本机的host文件,添加一条映射关系,把这 ...
- IDEA 中.properties文件中文自动转Unicode编码及乱码问题
问题描述: 在使用IDEA开发工具编辑属性文件(.properties)的时候出现中文自动转成了Unicode编码,或在读取属性文件的时候中文出现乱码. 问题解决: 进入 File -> Set ...
- 接口测试工具postman（一）下载安装说明
Postman是Google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件. 主要功能包括: 1.模拟各种HTTP requests 从常用的 GET.POS ...
- 【java并发编程】十三章：显式锁：LOCK
java5以后,新增了显式锁,用于当内置锁不能满足需求后可选择的一种高级方案. lock接口的特点 与内置锁一样,他能提供互斥性,内存可见性,可重入等特征,与内置锁不同的是,Lock提供了一种无条件, ...
- create subnet
子网相关功能点: 模块 功能 描述 备注 子网 创建子网 创建一个子网 设置子网网段范围 设置子网网关IP/不开启网关 给子网开启/关闭dhcp 设置子网dns 修改子网 修改子网 ...