从零开始开发一个Chrome扩展
读完本文,你就可以自己动手开发一个Chrome扩展应用啦 :-)
一、前言
Chrome提供了扩展(Extension)功能,可以看作是一个Web APP以插件的形式集成在浏览器中。
本文要示例开发的是一个简单的[ 天气预报 ]扩展,能够提供六天天气预报(包括昨天),显示天气、温度、风速及当天空气质量等信息。
完成结果如图:
二、准备条件
- Chrome扩展的使用经验
- 基本的HTML、CSS、JavaScript知识
- Visa信用卡(可选)
三、基本概念
从本质上讲,一个Chrome就是一个Web APP,它由一系列html、css、js、图片等文件组成,并且可以使用浏览器丰富的内置接口来对书签、窗口、存储等元素进行操作。
扩展以manifest.json为入口文件,一般会有后台页面(background)和弹出页面(popup),示意图如下:
1.Manifest入口
每一个Chrome扩展都会有一个manifest.json文件,该文件记录的是扩展应用的配置信息,包括名称、版本、页面文件路径、浏览器行为等等内容,下面一个基本的配置示例:
{
"name": "My Extension", //扩展名称
"version": "2.1", //扩展版本号
"description": "Gets information from Google.", //扩展描述
"icons": { "128": "icon_128.png" }, //扩展图标,会出现在扩展列表页
"background": { //后台运行
"persistent": false,
"scripts": ["bg.js"]
},
"permissions": ["http://*.google.com/", "https://*.google.com/"], //允许权限
"browser_action": { //浏览器工具栏配置
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}
注意json不允许注释存在,使用的时候要去掉标注。
2.后台页面和内容脚本(background & content script)
当扩展需要有驻留后台的需求时(例如播放音乐),可以在Manifest里的background
字段设置一个后台页面background.html
,通过它的持续运行来管理一些任务或状态。
如果扩展需要对用户访问的页面进行操作(例如屏蔽页面广告栏),则需要在Manifest的content_scripts
字段指定将哪些内容脚本何时注入到哪些页面中。
在manifest.json中的配置示例如下:
"background": { //后台页面
"page": "background.html"
},
"content_scripts": [ //内容脚本
{
"js": [ "content.js" ],
"matches": [ "http://www.a.com/*"]
}
]
3.弹出页面和选项页面(popup & options)
在Manifest中可以设置browser_action
来指定浏览器工具栏中扩展的显示图标,图标点击后出现的便是“弹出页面(popup.html)”。
弹出页面可用于基本的交互展示,它的生命周期只存在于当前激活状态,即失去焦点后页面所有DOM、JS内存等都会被销毁。而选项页面则开放给用于对扩展进行配置,例如音乐扩展设置是否自动播放下一首等。
在manifest.json中的配置示例如下:
"browser_action": { //浏览器工具栏配置
"default_icon": { //扩展图标
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "天气预报", //按钮hover文字
"default_popup": "popup.html" //弹出页面文件位置
},
"options_page": "options.html", //选项页面
四、程序分析
天气预报扩展仅需要在工具栏点击弹窗显示即可,所以只需要Popup Page。
在popup.html
中使用table结构进行数据展示,通过用户的IP地址来进行定位,然后使用网上开放的天气API即可获取所在地区的天气预报,popup.js
中将获取到的天气信息插入html的DOM节点中,便可完成扩展程序逻辑。
为了方便数据获取,我已经封装好了一个天气接口:http://node.zeakhold.com/weather,直接访问即可获取天气信息。使用前需要在Manifest的permissions
属性中声明请求域:
"permissions": [
"http://node.zeakhold.com/*"
]
五、动手敲码
PS:本例中所有代码、图片等资源都可以在Github上获取
步骤1:构建项目
目录结构如下:
.
├── css
│ └── popup.css
├── img
│ ├── icon128.png
│ ├── icon16.png
│ └── icon48.png
├── js
│ └── popup.js
├── manifest.json
└── popup.html
步骤2:配置manifest.json
{
"manifest_version": 2, //manifest版本,现在主流2
"name": "天气预报", //扩展名称
"version": "1.2.0", //扩展版本号
"description": "一款Chrome天气预报插件,提供六天天气预报(包括昨天),显示天气、温度、风速及当天空气质量等信息。", //扩展描述
"icons": { //扩展图标,会出现在扩展列表页
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": { //浏览器工具栏配置
"default_icon": { //扩展图标
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "天气预报", //按钮hover文字
"default_popup": "popup.html" //弹出页面文件位置
},
"permissions": [ //允许权限
"http://node.zeakhold.com/*"
]
}
步骤3:载入Chrome浏览器
- 浏览器地址栏输入:chrome://extensions/
- 勾上“Developer mode”开发者模式
- 点击“Load unpacked extension...”按钮
- 在弹出的选择框中选中本项目所在文件夹即可进入开发模式
现在浏览器右边工具栏便出现了插件图标,点击后会弹出一个空白页面popup.html,接下来就是往里面添加内容了。
步骤4:构建弹出窗口UI
popup结构(省去了css部分)
<body>
<div id="app">
<p id="banner"></p>
<table id="table">
<tr>
<th>日期</th>
<th>天气</th>
<th>温度</th>
<th>风速</th>
</tr>
</table>
</div>
<script src="js/popup.js"></script>
</body>
步骤5:实现天气数据展示逻辑
popup逻辑(popup.js)
window.onload = () =>{
let $banner = document.getElementById('banner'),
$table = document.getElementById('table');
ajax('http://node.zeakhold.com/weather','GET',null,(responseText)=>{
let data = JSON.parse(responseText);
console.log(data)
let forecast = data.data.forecast,
yesterday = data.data.yesterday;;
//填充头部信息
$banner.innerHTML = `<span id="city">${data.city}</span> ` + forecast[0].type + ' 空气质量:' + data.data.quality + ' 实时温度:' + data.data.wendu;
//填充昨天天气
$table.innerHTML += `<tr><td>${yesterday.date.split('星')[0]}(昨天)</td><td>${yesterday.type}</td><td>${yesterday.low.split(' ')[1] + '~' + yesterday.high.split(' ')[1]}</td><td>${yesterday.fl}</td></tr>`;
//填充预测天气
forecast.forEach((item,i) => {
$table.innerHTML += `<tr><td>${item.date}</td><td>${item.type}</td><td>${item.low.split(' ')[1] + '~' + item.high.split(' ')[1]}</td><td>${item.fl}</td></tr>`
})
})
function ajax(url, method, param, callback) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
callback && callback(xhr.responseText);
}
}
}
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(param);
}
}
在Chrome扩展列表中重新加载当前扩展,自此开发完毕。
五、发布应用
我们可以在 Chrome开发者控制台 中将开发好的扩展发布到 Chrome应用商店 上。
按照提示,将项目文件夹打包成zip格式的压缩包上传到控制台,控制台会帮你生成.crx文件,接着填写扩展的详细介绍,上传截图,完善开发者个人信息等等。
接下来是重点了!!
在发布扩展到应用商店之前,你需要注册成为谷歌开发者,并支付5美金的费用:
是的,美金!!没有天朝的支付宝和微信!!
从输入框图标可以看到,支付方式有带VISA、全球付等的银行卡,没有的话可以找个银行办一张,全币卡双币卡都行,我是找朋友借的信用卡嘿嘿。
填入银行卡信息,姓名要拼音全大写,接着地区选香港(没有中国大陆!!) ,然后具体地址填[转大陆+银行卡申请时填的地址]。
购买成功后便可以把你的扩展应用发布到Chrome Web Store啦,发布后等个几十分钟,便可以在Web Store上搜索到你的扩展了:
更新应用:当在控制台发布新版本时,chrome会默认通知所有安装了该扩展的客户端进行自动的后台更新。
六、总结
回顾一下开发流程:首先认识Chrome扩展,理解其运作机制;然后分析天气预报的开发需求,进行程序设计开发;最后是在Chrome开发者控制台,上架发布我们的扩展。
自此,[ 天气预报 ]扩展应用的开发上线就大功告成了:
- Chrome商店线上地址:天气预报
- Github地址:chrome-extension
欢迎体验~
相关资料
本文标题:从零开始开发一个Chrome扩展
转载请注明出处,欢迎分享
最近真是忙死了,本来说要学这个都一直拖着……
新年上来是得忙活hh
, 我也要抓时间回归学习沉淀了 !!
牛逼啊,不过我下了没显示天气,是不是我在楼梯上看不到?
是的,我用的API接口不支持非大陆的天气查询