首页 > 前端 > 从零开始开发一个Chrome扩展

从零开始开发一个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.susamko.com/weather,直接访问即可获取天气信息。使用前需要在Manifest的permissions属性中声明请求域:

"permissions": [                    
        "http://node.susamko.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.susamko.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.susamko.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美金的费用:

Screenshot_21

是的,美金!!没有天朝的支付宝和微信!!

从输入框图标可以看到,支付方式有带VISA、全球付等的银行卡,没有的话可以找个银行办一张,全币卡双币卡都行,我是找朋友借的信用卡嘿嘿。

填入银行卡信息,姓名要拼音全大写,接着地区选香港(没有中国大陆!!) ,然后具体地址填[转大陆+银行卡申请时填的地址]。

购买成功后便可以把你的扩展应用发布到Chrome Web Store啦,发布后等个几十分钟,便可以在Web Store上搜索到你的扩展了:

Screenshot_1

 

更新应用:当在控制台发布新版本时,chrome会默认通知所有安装了该扩展的客户端进行自动的后台更新。

 

六、总结

回顾一下开发流程:首先认识Chrome扩展,理解其运作机制;然后分析天气预报的开发需求,进行程序设计开发;最后是在Chrome开发者控制台,上架发布我们的扩展。

 

自此,[ 天气预报 ]扩展应用的开发上线就大功告成了:

欢迎体验~

 

相关资料

 


本文标题:从零开始开发一个Chrome扩展
转载请注明出处,欢迎分享


4 COMMENTS

  1. 缙哥哥2018-03-18 am10:28

    最近真是忙死了,本来说要学这个都一直拖着……

    • 山客2018-03-18 am10:37

      新年上来是得忙活hh :lol: :lol: , 我也要抓时间回归学习沉淀了 !!

  2. 缙哥哥2018-02-11 pm6:44

    牛逼啊,不过我下了没显示天气,是不是我在楼梯上看不到?

    • 山客2018-02-12 pm11:41

      是的,我用的API接口不支持非大陆的天气查询 :cry: