chrome扩展开发小结

作者: dplord, 访问量 2236





上次参加公司内部Hackthon做了一个chrome插件,这里记录下Chrome扩展开发小结。

一、Chrome扩展的结构

Chrome扩展就是一个目录,这个目录包含一个manifest.json,  就是一个chrome扩展了。具体的文件组织,只需要一个manifest.json, 其他的资源文件组织方式是只有的。

比如我做的是一个根据url,捕获url在发送http Request之前,在url里面添加一些Header实现的内部开发的dev插件。

我的manifest.json 声明如下:

{
  "manifest_version": 2,
  "name": "你的插件名字",
  "description": "你的插件描述",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "http://www.example1.com/",
    "http://www.example2.com/"
  ],
  "browser_action": {
    "default_icon": "你的logo图",
    //右上角看到的logo
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "你的logo图",
    //在chrome://extensions/ 页面看到的logo
    "48": "你的logo图",
    "128": "你的logo图"
  },
  "background": {
    "page": "background.html",
    "persistent": true
  },
  "options_page": "options.html"
  //设置页面
}

主要是声明一些资源文件、popup页面、background资源、options页面。

比如我开发的一个扩展的目录结构如下:

QQ20160604-7@2x

二、各种文件的具体作用

popup.html

有人看到,”default_popup”: “popup.html” 。popup.html是什么呢。比如一个chrome扩展Xmarks在chrome的菜单栏显示,点击这个扩展会弹出一个小框框,如下图红色框框区域,这个页面其实就是popup.html, 我们只要定义了popup.html页面,就可以在该html里面控制它的样式。

QQ20160604-5@2x

 

background.html

background.html是什么呢,顾名思义,是一个运行在后台的,其实我做的插件中background是没有页面的空html, 作用是有些执行在后台的js, 比如我的background.js ,需要在manifest.json声明background.html, 然后在background.html里面<script src=”js/background.js”></script>引用background.js这样,background.js就可以始终在后台运行了。

options.html

options.html顾名思义,是设置页面。从chrome://extensions/ 页面,点击你插件的选项,就到了设置页面,也是个html。

三、开始开发一个dev的网络插件

chrome插件其实都是标准的html 、js那套,就跟做网站一样,唯一注意的是资源的引用权限、资源的跨域问题啊,执行的先后顺序,popup.js、backgroud.js、options.js的作用时间以及什么时候回触发。

首先画好各种界面,然后组织好文件,引用各种js,温馨提示: chrome扩展里面用到的html都不能在html写<script>你的js代码</script>,必须要写到js文件里面,<script src=”your-js-file”></script>这样的引用。

各个js之间传递数据之类的,可以自定义存储方式啊,用html5的localStorge、indexeddb、websql那一套,我们采用的是在localStorge里面存放json文本的数据,各个js都操作这些数据,同一个chrome扩展下的localStorge是共享的。

先画好界面,设置好页面,引用好各种实现动作的js。

然后在js里面开始实现你的逻辑了。我们的核心逻辑就是before HTTP Request,加一个监听器,实现一些操作,这些可以看chrome扩展的API,比如捕获http请求、操作chrome tab、操作书签、添加道理, chrome都给js封装了接口。监听一个请求的代码如下:

background.js

chrome.webRequest.onBeforeSendHeaders.addListener(
    function (details) {
        //do-something
        //添加自定义HTTP头
        details.requestHeaders.push({name: "MySpecifiedHttpHeaderName", value: "MySpecifiedHttpHeaderValue"});
        return {requestHeaders: details.requestHeaders};
    },
    {urls: ["*://*.example.com"]},
    ["requestHeaders", "blocking"]
);

这样在启用你的插件后,匹配到*.example.com 就回运行这段代码在http header里面,添加一行里自定义的header “MySpecifiedHttpHeaderName: MySpecifiedHttpHeaderValue” 出去。注意这个捕获到*.example.com的请求的网络权限,在manifest.json 的permissions 里面申请好。

其他的设置界面等等都是跟正常的html js dom操作那一套一模一样,就不多提了。

是不是很简单,有需求的可以自定义插件玩玩儿啊。

最后插件开发好,发布的时候,需要在chrome://extensions/页面,点击打包扩展程序,选择你的扩展目录,打包成一个your-chrome-extension.crx扩展(其实就是个标准zip压缩包)。