第一次chrome插件开发——二维码生成器
-
最近有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! 到这里,我相信你已经完成了这个小插件,是不是感觉自己很有优越感呢?现在的这个插件的功能十分基础,实现起来也并不是特别的困难,如果插件一旦复杂起来,比如实现自动填写表格、自动答题、广告屏蔽等等的功能,那么光看这个文章还是不够的,希望你能继续学习下去。
参考资料
-
学到了 (/大拇指)