Chrome 扩展开发简要指南

扩展是什么?

扩展是能够修改和增强浏览器功能的小程序,它由 HTML、JavaScript 和 CSS 等文件组成,最终被打包成以 .crx 为后缀的压缩文件,发布到 Chrome Web 应用商店

扩展由以下文件组成:

  • manifest 文件
  • HTML 文件
  • JavaScript 文件(可选)
  • 图片(可选)

如何发布扩展呢?

开发完成扩展,将文件压缩为 ZIP 格式,上传到 Chrome 网上应用商店。(自 2016 年 11 月 21 日起,所有新发布的封装应用或托管应用都仅限 Chrome 操作系统用户使用。)
PS: 发布到 Chrome 应用商店需要支付 5 美元的开发者帐号验证费用。

介绍再多,不如来实现一个查看天气扩展。这里需要用到的 OpenWeatherMap 的天气源和 GEOIP DB 的定位。

文件结构

1
2
3
4
5
6
7
8
9
10
11
.
├── background.js
├── images
│ ├── weather-icon-128.png
│ ├── weather-icon-16.png
│ ├── weather-icon-32.png
│ └── weather-icon-64.png
├── manifest.json
├── popup.html
├── popup.js
└── style.css

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
"manifest_version": 2,
"name": "Weather",
"version": "1.0",
"description": "Show your location Weather",
"icons": {
"16": "images/weather-icon-16.png",
"32": "images/weather-icon-32.png",
"64": "images/weather-icon-64.png",
"128": "images/weather-icon-128.png"
},
"browser_action": {
"default_icon": {
"32": "images/weather-icon-32.png"
},
"default_title": "Weather",
"default_popup": "popup.html"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"permissions": [
"http://api.openweathermap.org/*",
"https://geoip-db.com/json/",
"storage"
]
}

manifest.json 文件内,manifest_versionnameversion 是必须的,其他各项根据需要填写。
manifest_version manifest 文件版本,从 Chrome 18 开始用 2
name 扩展名字。
version 扩展版本。
description 扩展简介。
icons 扩展 ICON,通常使用有较好的透明度支持的 PNG 格式,也是支持 BMP、GIF、 ICO、和 JPEG 这些格式的,支持多种像素,Chrome 根据设备选用最合适的文件。
background 后台任务,persistent 值为 false 即使用 Event Pages 替代。
permissions 扩展声明需要的权限。
browser_action 浏览器动作,可以是提示、图标和弹窗。

更多信息前往 Manifest File Format

整体架构

背景页
在 Manifest 文件上注册背景页,浏览器上会自动生成 background.html HTML 页面来调用 background.js

1
2
3
"background": {
"scripts": ["background.js"]
}

把主要的数据处理逻辑放到 background.js,监听 popup.js 发送的动作,处理响应的数据,并返回天气数据。

1
2
3
4
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
sendResponse(items);
return true;
});

注意:chrome.runtime.onMessage.addListener 里面的函数必须 return true,否则无法返回响应信息。

怎样在浏览器上调试 background.js呢?

chrome://extensions/ -> 检查试图 -> 背景页。

链接访问:chrome-extension://your-extension-id/_generated_background_page.html

UI pages
popup.html,呈现扩展的 UI 以及操作 DOM。我们这里主要用作向 background.js 发送获取数据请求、渲染天气信息。

1
<script src="./popup.js"></script>

popup.js

1
2
3
4
5
chrome.runtime.sendMessage({
sendMessage: "Get weather data"
}, function(response) {
parseWeather(response)
});

其架构如下:
UI pages

Content scripts:
如果扩展需要与当前 tab 下打开的网页交互,就需要注册 Content scripts。内容脚本支持和背景页通信,能够操作 DOM 等。我们这里不需要用到,在此就不赘述,参考 Content scripts

其架构如下:
Content scripts

到这里,基本实现了一个查看天气预报的扩展,呈现出来的 UI 大致是这样,详细的代码放在 GitHub
Weather

相关链接

(完)