【技术干货】驻云前端工程师带你初步了解chrome插件的开发

本文作者：上海驻云Web前端工程师

（只爱扎啤跟撸串的骚年）

施翔

以下正文

随着互联网行业的崛起，网络已经成为人们生活工作时不可缺少的一部分，最直接的接触互联网的方式就是通过浏览器上网。随之而来的是用户对浏览器提出了越来越高的要求，换而言之就是对 web 的需求不断提升，单纯的浏览器已经不够满足某些场景的需要。

为了扩展浏览器的功能，形形色色的浏览器插件应运而生。比如 ie 各种内置搜索引擎，firefox 的 firebug，chrome 的 goAgent 等等。插件可以捕捉并显示指定网站的内容，识别一些网站上的广告代码并删除，甚至与别的站点通讯。给我们带来方便的同时，也带来了一些安全隐患。

为什么了解 chrome 而不是其他的浏览器插件呢？因为 chrome 的插件开发起来相对简单，开发语言就是 javascript，需要一个 chrome 浏览器和一个文本编辑器就可以，对于一个 web前端工程师来说几乎是零需求，能很快上手；firefox 的插件开发复杂许多，涉及到环境的搭建和一些 web 以外的技术；ie 的插件开发就更复杂了，需要熟悉C++和COM等客户端的技术，还需要安装微软的Visual Studio。

着手开发之前先了解下插件的文件结构，能让插件在 chrome 上正常运行的主要文件就5个：

下面用一个实例来进一步了解下插件的实现。

这个插件的功能是这样的：当你浏览某个网站的时候，它会启动并获取你浏览的网站的 title，把这个 title 显示在 popup 上，在 title 的下面有一个文本框，输入色值（比如:#000000，red）插件会把你所在访问的网站的 body 背景色换成你所输入的色值。听起来挺无聊的功能，但关键是为了演示。

这个插件一共有11个文件。

manifest.json

属性：

manifest_version：2

现在一般都是2，代表着 html 和 js 需要分离。

name：插件的名字，会在插件列表中显示

background：运行在浏览器后台的脚本文件

icons：显示在插件列表中的图标。

page_action：

default_icon显示在浏览器上的图表

default_title鼠标悬停上去以后的 alt 文本

default_popup点击以后出现的 html

其中，page_action 的图标显示在 url 栏，browser_action 的图标显示在浏览器上。

permissions：

“tabs”：访问浏览器选项卡

"http://localhost/", AJAX访问 localhost 的权限

"*://*/*" 访问任意域名的权限

content_scripts：

matches：允许插件获取哪些域名下的数据

js：注入页面的 js 文件

注意：这里也是安全隐患的源头。

background.js

这是一个很重要的文件，可以把它看做是一个框架里的 controller 层，起到了承上启下的作用。而且一旦启动了插件，chrome 会为这个“controller”开一个独立的运行环境。

在代码中我们做了3件事情：

1．监听新打开的tab 中，网站的 url，只要不是空的都显示了插件的 icon，在这里也可以限制插件的显示。

2．监听 message 发来的信息，并存在 sxData 中。

3．监听 request 发来的信息，并在当前的 tab 中执行 code。

content_script.js

content_script是页面上注入的脚本，主要是获取页面元素，并发送 background 处理。

代码中我们看到 content_script 获取了页面上的 title 标签的值，并通过 sendMessage 方法发送。

popup.html

popup.js

这些都是简单的 html 页面，有一点 html + css + javascript基础的程序员都能看懂。这里所实现的是一旦点击 chrome 上的插件图标，popup.html 就会被加载，此时将 content_script 中获取到的 title 标签的值赋予 id 为 content-title 的 DOM 元素中去。

点击changeColor将输入框中填写的色值通过 sendRequest 与建立 background 通讯。

这里需要注意一点，出于安全考虑 popup.html 和 popup.js 必须分开存放，直接写在 html 中的 js 代码近不会被执行。

我们有了代码，剩下的就是在浏览器上加载插件。

第一：在chrome浏览器的地址栏输入

"chrome://extensions"。