手把手教你实现 Google 拓展插件

如果说十年前，IE就是浏览器的代名词，那今天的Chrome就是过去的IE。在最新的市场份额调查中，Chrome以近60%的市场占有率制霸浏览器市场，并在持续扩大中。

Chrome 的好用除了本身的流畅性以外，70% 的功劳更要归于其强大又顺手的扩展插件，这些插件满足了不同人的不同需求，也将该浏览器的使用体验拉升到了一个「曾今沧海难为水」的境界。

可以说 Chrome 没了插件，就好像悟空没了金箍棒。你一定很好奇这些五花八门的插件都是怎么实现的呢？本课程将带你打造属于自己的 Google 浏览器扩展，实现的功能为列表清单。

学习该实验需要掌握基本的 Web 开发知识，以及能够看懂基本的 Angular 语法。

本教程由lucat发布在实验楼，完整教程、代码及在线练习地址：手把手教你实现 Google 拓展插件（更多课程请查看全部 - 课程 - 实验楼）

一、课程简介

1.1 实验介绍

本课程的实验环境由实验楼提供，Google 浏览器拓展的运行环境为 Google 浏览器。在本实验中，你将了解如何制作一个属于你自己的 Google 拓展插件。

课程实验分别从 Google 拓展插件的结构说起，并对拓展插件的必要代码进行讲解，帮助你实现属于自己的 Google 浏览器拓展插件。拓展插件的主要实现一个任务列表的功能。

1.2 课程知识点

本实验需要做实验的同学掌握一些基本的 Web 开发知识，能够看得懂基本的 Angular 基本语法，以及简单的 Bootstrap 语法知识。

本实验是一门纯动手实验课，但会在学习的过程中，会适当讲解一些理论性的知识。对整体知识结构而言，本实验会涉及到的主要知识点为：

• 基本的 Web 基础知识点

• Google 拓展插件的项目结构

• Angular 的基本用法

• Bootstrap 的基础知识

• 基本的 Linux 系统基础操作

1.3 课程环境要求

本课程对于编辑器没有什么要求，只要能够编写文本即可。在使用实验楼的环境中，推荐大家使用 Sublime Text 这款文本编辑器，对本项目的代码进行编写。

Sublime Text 是一款非常不错的文本编辑器，其代码具有高亮的特点。该文本编辑器属于轻量级的 IDE，深受广大前端开发者们的喜爱。

二、实验环境准备

2.1 安装 Google 浏览器

实验楼的环境是 Ubuntu 14.04，默认情况下没有安装 Google 浏览器，所以需要进行手动安装 Google 浏览器。如果实验楼环境进行升级迭代后，安装了 Google 浏览器，这一步可以跳过。

首先在实验楼的环境里，打开命令行终端，输入如下命令，开始安装 Google 浏览器：

接着使用命令对 Google 安装包进行安装：

不出意外的话，这里会报如上图错误。报错的根本原因是因为没有安装必备的依赖项。所以我们对依赖项进行安装，在终端中输入如下命令：

在完成安装之后，此时，从实验楼的菜单的互联网选项进入，当你看到 Google 浏览器这个 Logo ，说明已经安装成功了。

2.2 下载必要的依赖项

刚才我们已经将 Google 浏览器下载好了，现在我们对项目所需要的各种 js 引用，如 Angular，Bootstrap 的 js 文件和必要的 image 图片进行下载。

首先创建我们的项目文件夹，输入命令如下：

此时当前路径为文件夹 Code_702 下，在命令行终端中，输入如下命令，对依赖文件进行下载：

对已经下载的 shiyanlou.zip 文件，输入命令进行解压，解压后，可以用 tree . 查看当前目录结构：

此时输入如下命令 tree .，可以看到项目结构如下：

三、插件拓展的结构及实现

3.1 拓展插件结构

一个 Google 拓展插件，其实是压缩在一起的一组文件，包括 HTML，CSS，Javascript 脚本，图片文件，还有其它任何需要的文件。拓展插件本质上来说就是 web 页面，它们可以使用所有的浏览器提供的 API，从 XMLHttpRequest 到 JSON 到 HTML5 全都有。

拓展插件可以与 Web 页面交互，或者通过 content script 或 XMLHttpRequests 与服务器交互。拓展插件还可以访问浏览器提供的内部功能，例如标签或书签等。

每个 Google 拓展插件都应该包含下面的文件：

• 一个 manifest 文件

• 一个或多个 html 文件

• 可选的一个或多个 javascript 文件

• 可选的任何需要的其他文件，例如图片

参考 360 极速浏览器应用开发平台部分资料：

http://open.chrome.360.cn/extension_dev/overview.html

参考部分官方文档资料。官方的文档写得很简单，有兴趣的同学也可以看下，可能需要***：

https://crxdoc-zh.appspot.com/extensions/getstarted

3.1 创建清单文件 manifest.json

在每一个 Google 浏览器插件拓展，都会有一个 JSON 格式的文件，文件名叫做 manifest.json。这个文件主要记录着拓展插件的版本，名称，对拓展插件的描述，插件生成后的图标等诸多描述。

下面的代码编辑，可以根据自己个人的爱好选择 Sublime Text 或者 Vim 编辑器。其中 Sublime Text 的位置在实验楼系统菜单项的开发中：

打开后，双击主文件夹，看到 Code_702 这个文件夹，将 Code_702 拖入到 Sublime Text 即可：

现在，我们在 Code_702 这个文件夹下，创建清单文件 manifest.json，其代码如下：

其中值得注意的是，单我们单击插件的图标时，插件所执行的页面，为 popup.html 这个文件，这个文件是一个 html 文件。所以本质上来说， Google 拓展插件，就是由基本的 css，js，html 构成的一个小 Web 页面展示，只是其载体为 Google 浏览器而已。

此时的目录结构如下：

整个实验的完整代码，将会在实验的末尾给出。下面我们创建当展示页面。即单击图标 Logo 时，插件弹出页面的 popup.html 文件。

3.2 创建任务列表展示页面 popup.html 文件

还是在 Code_702 这个文件夹下，创建展示页面 popup.html，其代码如下：

此时项目的目录结构为：

这里有个微小的细节值得一提，代码直接从左侧的文档复制到实验楼里，中文会出现乱码。这里解决的办法如下，对代码中的中文，使用相应的英文代替，或者在实验楼中，使用中文输入法重新拼写。是会员的同学，也可以使用 WebIDE 功能。

3.3 创建任务列表逻辑处理文件 todolist.js

文件 todolist.js 是一个 Angular 语法的文件，用来处理清单列表中的逻辑对象。其中主要包括增添任务，删除任务等主要功能。代码不是很难，有任何一门编程语言基础的同学，都可以快速地看懂这个 js 文件。这个文件创建在 /js 这个文件夹下面，首先进入到 /js 文件夹：

创建文件 todolist.js 并编写文件代码，内容如下：

最终的项目的结构如下：

四、效果展示

4.1 文件打包

接下来，我们利用 Google 浏览器对文件进行打包，生成拓展插件格式的文件。步骤如图所示，先打开 Google 浏览器，接着选择更多工具，再选择拓展程序、

接着我们勾选开发者模式（下图的箭头 1），再选择打包拓展程序：

此时，选择我们的项目文件夹 Code_702：

最后回到打包程序界面，选择打包拓展程序：

成功后，会在打包的同级目录下，生成两个文件：

• 拓展程序，后缀为 .crx

• 密钥文件，后缀为 .pem

将 Code_702 同级目录下后缀为.crx文件拖入到 Google 浏览器，拓展程序页面，即可安装：

4.2 效果展示

这是在实验楼里的效果图，由于 Adobe Flash 过期，所以 popup.html 里的下面这行代码不起作用：

如果是在本地，进行 Google 浏览器插件安装，只要把 Adobe Flash 更新即可，这是在本地运行的效果。生成的 .crx 文件已经打包，包含在实验代码里，在课程的结尾给出：

五、思考与总结

5.1 思考和总结

本实验基于实验楼的 Ubuntu 环境，利用 Google 浏览器打包文件，生成谷歌拓展插件。在编写 Google 插件的过程中，主要用到了以下几个知识：

• 基本的 Web 基础知识点

• Google 拓展插件的项目结构

• Angular 的基本用法

• Bootstrap 的基础知识

• 基本的 Linux 系统基础操作

制作 Google 浏览器拓展插件，其项目文件，必须包含有清单文件，以及点击图标 Logo 后，要展示的 html 文件。

本实验的最终代码地址，及项目结构如下：

http://labfile.oss.aliyuncs.com/courses/702/Code_and_Crx.zip

本文转载自异步社区。

原文链接：https://www.epubit.com/articleDetails?id=NC7E3EF93B3C00001A5AFDD8914901041