最近有chrome插件开发的需求,所以学学做做搞了三天,终于把这个入门插件给搞定了。今天我给大家分享一下chrome插件的开发。
如果要开发一些比较复杂功能的插件,比如需要进行服务器交互通信的、与页面交互通信的,最好先查阅官方文档或者通读这篇博客【干货】Chrome插件(扩展)开发全攻略。
我相信你已经看完了上述的文档,我也相信你现在有跃跃欲试的冲动了。但是别忘了,这个的水,很深。。。
三大关系
首先我们先来说说background.js、content-script.js、popup.js这三者之间的关系(因为我在这个小项目中需要用到)。下面这幅图可以比较清楚地展现出三者之间的关系。
- background.html是在浏览器启动后就自动生成的页面,因此是所有浏览器页面都可以访问到的,它所对应的js文件是background.js,可以用来进行保存全局变量等全局性的操作。
- popup.html是点击右上角的icon后弹出的页面。由于是弹出性质的,所以会重新执行html中的script脚本代码。通常popup.js与popup.html绑定在一起,popup.js就可以访问弹出页面中的DOM元素了。
- main page是浏览时的页面,如果我们需要在插件中与main page中的DOM元素打交道的话,需要通过content-script.js来实现。
由于三者有明显界限,所以三者之间无法直接通信。比如我想要在popup.js中获取main page中的DOM元素的文本,这就存在两个页面间的通信问题,需要通过chrome提供的API来实现。
调试手段
上述三个页面的调试手段各有不同,在文档里都有注明了,我在这里重申一下,顺便带一点注:
-
安装插件
进入扩展程序,点击左上角的 “加载已解压的扩展程序” ,选择插件所在的目录即可。
-
background.html
进入扩展程序,点击 “背景页” 进入background.html的调试。
-
popup.html
在图标上右击,选择 “审查弹出内容” ,进入popup.html的调试界面。
-
content-script
在浏览器上按下F12进入开发者模式。在Console中的top选项更改为自己的插件,console界面会显示content-script.js中的输出信息。
-
注:如果更改了popup.html、popup.js的时候,可以直接更新。如果更改了content-script.js,那么需要删除这个插件,重新安装,然后按下F5刷新页面,这样才能正常显示插件的内容。
到这里,我相信你已经了解了chrome插件开发的具体事项了。现在我们来尝试开发一个二维码生成器吧。
需求
用户想要用手机获取网页上的网址,用手输入网址十分不便,如果能显示二维码就好了。如果用户能够选定一段网址后,点击插件按钮,就可以弹出网址对应的二维码,那就太好了。
开发实战
要完成这个小插件,我们必须弄明白什么部分是分别在上述三个模块中的。由于项目很小,我们可以直观了解到,渲染二维码的动作是在popup.js中的,获取选定的文本是在content-script中的,而background没有用到。popup.js需要与content-script进行通信,需要用到chrome.runtime.sendMessage()
方法。
我们可以构建以下的项目结构:
manifest.json的配置为:
//manifest.json
{
"manifest_version": 2,
"name": "二维码生成器",
"version": "1.0.0",
"description": "简单的生成可扫描的二维码",
"icons": {
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
"background": {
"scripts": ["./background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "img/icon.png",
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
],
"permissions": ["tabs","http://*/*", "https://*/*"]
}
现在的基本配置已经搭建好了,我们来开始写代码吧。。。。
首先是弹出页面:
<!-- popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- qrcode.js 是生成二维码的js库,可以在github上下载源码 -->
<script src="./qrcode.js" type="text/javascript"></script>
<script src="./popup.js" type="text/javascript"></script>
<style>
#box {
text-align: center;
}
#qrcode {
width: 256px;
margin: auto;
}
</style>
</head>
<body>
<div id="box" class="box">
<h2 id="url"></h2>
<div id="qrcode"></div>
</div>
</body>
</html>
然后是content-script:
//content-script.js
//这里的document是网页dom,window是网页的window对象
//不能将window当作sendResponse的参数传出,否则会报错
//window.getSelection()是获取网页选定区文本的方法
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
var sendData;
switch(request.cmd)
{
case 'select':
sendData = window.getSelection().toString()
break
default:
break
}
sendResponse(sendData)
return true
})
最后是popup.js:
//popup.js
function sendMessageToContentScript(message, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
console.log(tabs)
chrome.tabs.sendMessage(tabs[0].id,message, function (response) {
if (callback) {
callback(response)
}
})
})
}
sendMessageToContentScript({cmd:'select'}, function(res)
{
console.log('来自content的回复:',res)
document.getElementById('url').innerHTML = res;
if(res){
//这里的document是弹出页面的DOM
new QRCode(document.getElementById('qrcode'),{
text: res,
width: 256,
height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
})
}
})
三个模块关系是这样的:
ok! 到这里,我相信你已经完成了这个小插件,是不是感觉自己很有优越感呢?现在的这个插件的功能十分基础,实现起来也并不是特别的困难,如果插件一旦复杂起来,比如实现自动填写表格、自动答题、广告屏蔽等等的功能,那么光看这个文章还是不够的,希望你能继续学习下去。
参考资料