作者:Me丶i丶晓莹丬_690 | 来源:互联网 | 2023-10-12 10:43
篇首语:本文由编程笔记#小编为大家整理,主要介绍了从零开始写一个 Chrome 扩展相关的知识,希望对你有一定的参考价值。
题图 :By neosiam from pexels
Google Chrome是由Google开发的一款设计简单、高效的浏览器。Chrome凭借其不凡的势力现在已经成了浏览器中的霸主占据了半壁江山。Chrome更是程序员 的标配。如果你在用360浏览器什么的,对不起,我们不能做朋友。
初识Chrome 扩展 Chrome 扩展除了html 、CSS、HTML外还有个重要的一个配置(入口)文件 manifest.json。Chrome扩展都包含一个Manifest文件——manifest.json,这个文件可以告诉Chrome关于这个扩展的相关信息,它是整个扩展的入口,也是Chrome扩展必不可少的部分。定义了 扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 Manifest 版本(manifest_version)等信息。
下面是我们本次演示生成二维码扩展的入口文件
// manifest.json
{
"manifest_version" : 2 ,
"name" : "Ext-Qrcode" ,
"version" : "0.1.0" ,
"description" : "生成二维码扩展" ,
"icons" : {
"16" : "images/icon16.png" ,
"48" : "images/icon48.png" ,
"128" : "images/icon128.png"
},
"browser_action" : {
"default_title" : "Ext-Qrcode" ,
"default_popup" : "popup.html"
}
}
详细的配置参见官方文档:https://developer.chrome.com/extensions/manifest
该项目的目录结构
Ext - QRCode
|- manifest.json
|- popup.html
|- /images
|- icon16.png
|- icon48.png
|- icon128.png
popup.html
lang = "zh-cn" >
charset = "UTF-8" >
很简单对吧,其实
class = "wrapper" > id = "qrcode" class = "qrcode-box" >
id = "url" class = "input" type = "text" placeholder = "输入URL" >
id = "btn" class = "btn" > 生成二维码
此时在Chrome中打开该扩展,应该可以看到和上图一样的结果了。
为了获取当前标签页的URL,需要申请 tabs
权限,在manifest.json中添加如下内容
"permissions" : [
"tabs"
]
扩展用到的权限都需要声明在permissions中,Chrome通过 tabs
方法提供了管理标签的方法与监听标签行为的事件,有关标签的 url
、 title
和 favIconUrl
的操作(包括读取),需要声明 tabs
权限。现在来看看获取到的标签页的信息
chrome.tabs.getSelected( null , function (tab){
console.log(tab) // 将得到一个包含当前便器那也信息的对象
})
如何调试 右键Chrome工具栏你的扩展会弹出一个窗口,选择审查弹出内容 即可调试,但是这种方法比较低效。我们可以找到扩展的ID,然后直接访问
chrome-extension: //<插件ID>/插件入口html文件
获取URL并生成二维码 先来写个封装下生成二维码的方法
function generator(url) {
new QRCode (document.getElementById( "qrcode" ), {
text: url,
width: 148 ,
height: 148 ,
colorDark : "#000" ,
colorLight : "#eee" ,
correctLevel : QRCode . CorrectLevel .H
});
}
获取URL生成二维码
chrome.tabs.getSelected( null , function (tab){
setTimeout( function () {
generator(tab.url)
}, 0 )
})
这儿用到setTimeout(fn, 0),其作用是将相关处理函数添加到运行队列的队尾,并保证在浏览器处理完其他事件之后再运行该函数。更多请搜索了解相关内容
从输入的URL生成二维码
btn.addEventListener( 'click' , function (){
if (url.value.trim() === '' ) {
url.value = '请输入URL'
return
}
qrcodeBox.innerHTML = ''
generator(url.value)
}, false )
到此,我们的Chrome 扩展就开发完了。接下来就是应用发布了,但是开发者验证需要5美元而且有点麻烦。
一些资料 Chrome 扩展及应用开发:来自图灵社区的免费电子书
http://www.ituring.com.cn/book/1421
Chrome扩展开发文档:来自360极速浏览器翻译的官方文档。
http://open.chrome.360.cn/extension_dev/overview.html
Chrome 插件开发官方文档:
https://developer.chrome.com/extensions
本文完.
往期精彩回顾:
左手代码右手砖,抛砖引玉 给点个赞,好不好啊