从零开始开发一个Chrome扩展

读完本文，你就可以自己动手开发一个Chrome扩展应用啦 :-)

一、前言

Chrome提供了扩展（Extension）功能，可以看作是一个Web APP以插件的形式集成在浏览器中。

本文要示例开发的是一个简单的[ 天气预报 ]扩展，能够提供六天天气预报(包括昨天)，显示天气、温度、风速及当天空气质量等信息。

完成结果如图：

Screenshot_1

二、准备条件

Chrome扩展的使用经验
基本的HTML、CSS、JavaScript知识
Visa信用卡（可选）

三、基本概念

从本质上讲，一个Chrome就是一个Web APP，它由一系列html、css、js、图片等文件组成，并且可以使用浏览器丰富的内置接口来对书签、窗口、存储等元素进行操作。

扩展以manifest.json为入口文件，一般会有后台页面(background)和弹出页面(popup)，示意图如下：

arch-2

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...”按钮
在弹出的选择框中选中本项目所在文件夹即可进入开发模式

Screenshot_2

现在浏览器右边工具栏便出现了插件图标，点击后会弹出一个空白页面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扩展列表中重新加载当前扩展，自此开发完毕。