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

文章目录

一、课程简介
二、实验环境准备
- 2.1 安装 Google 浏览器
- 2.2 下载必要的依赖项
三、插件拓展的结构及实现
四、效果展示
- 4.1 文件打包
- 4.2 效果展示
五、思考与总结
- 5.1 思考和总结

一、课程简介

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 浏览器：

# 使用 wget 命令对谷歌浏览器安装包，进行下载wget http://labfile.oss.aliyuncs.com/courses/702/google-chrome-stable_current_amd64.deb

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

# 使用命令 dpkg 对 Google 安装包进行安装sudo dpkg -i google-chrome-stable_current_amd64.deb

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

# 安装必备的依赖项目sudo apt-get -f install# 安装完依赖项后，我们再重新进行 Google 项目包安装sudo dpkg -i google-chrome-stable_current_amd64.deb

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

2.2 下载必要的依赖项

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

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

# 创建项目文件夹mkdir Code_702# 进入到该文件夹 cd Code_702

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

wget http://labfile.oss.aliyuncs.com/courses/702/shiyanlou.zip

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

# 解压依赖项文件夹 
unzip shiyanlou.zip# 删除下载的依赖项 shiyanlou.ziprm shiyanlou.zip

此时输入如下命令 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，其代码如下：

{  // 这个地方是固定的
  "manifest_version": 2,  // 插件显示的名称
  "name": "Google_Time",  // 对插件的详细描述
  "description": "Life is short, i use Python.",  // 版本描述
  "version": "1.0",  // 浏览器的行为
  "browser_action": {    // 插件的图标
    "default_icon": "icon.png",    // 插件的标题
    "default_title": "Learning by doing",    // 单击图标时，插件执行的页面
    "default_popup": "popup.html"
  }
}

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

此时的目录结构如下：

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

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

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

<!DOCTYPE html><html lang="en"  ng-app="todoapp"><head>
    <meta charset="UTF-8">
    <title>Learning by doing</title>

    <!-- 引入 css 文件 start-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
    <!-- 引入 css 文件 end-->

    <style>
    </style></head><body><div style="background-color: #dcdcdc; width:373px;"><img src="./images/logo.png" alt="" ><button class="btn btn-success">Learning by doning</button>    </div><!-- 引入人型时钟代码 start --><div>
     <object>
        <embed src="./time.swf" width="373px;" height="150px;" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash"></embed>
    </object>
 </div>
 <!-- 引入人型时钟代码 end --><div class="" style="width:373px;">
    <section ng-controller="todolistcontroller" >

        <!-- 输入框按钮组 start-->
        <form class="input-group input-group-lg">
            <input ng-model="text" type="text" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-success" ng-click="add()"> 增加 </button>
            </span>
        </form>
        <!-- 输入框按钮组 end-->

        <!-- 清单列表 start -->
        <ul class="list-group">
            <li ng-repeat="item in todolist" ng-class="{'done':item.done}" class="list-group-item">
                <button ng-click="delete(item)" class="close" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only"> Close </span>
                </button>
                <div class="checkbox">
                    <label>
                        <input ng-model="item.done" type="checkbox">
                        <span>{{item.text}}</span>    
                    </label>
                </div>
            </li>
        </ul>
        <!-- 清单列表 end -->

    <p>
        总共 <strong>{{todolist.length}}</strong>个任务，已完成<strong>{{doneCount()}}</strong>个    </p>
    </section></div><!-- 引入 js 文件 --><script src="./js/angular.min.js" type="text/javascript"></script>    <script src="./js/todolist.js"></script></body></html>

此时项目的目录结构为：

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

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

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

cd js

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

// 创建一个 Angular 对象var todoapp = window.angular.module("todoapp", []);// 对象的控制器参数todoapp.controller('todolistcontroller',['$scope', function($scope){
    $scope.text = '';    // 默认的清单列表
    $scope.todolist = [{
        text: 'hello world',
        done: false
    }, {
        text: 'I use Python',
        done: false
    }];    // 实现增添任务功能
    $scope.add = function(){        // 获取任务文本内容
        var text = $scope.text.trim();        if(text){
            $scope.todolist.push({
                text: text,
                done: false
            });

            $scope.text = '';
        }
    }    // 删除任务函数
    $scope.delete = function(todo){        var index = $scope.todolist.indexOf(todo);

        $scope.todolist.splice(index, 1);
    }    // 统计任务总数量
    $scope.doneCount = function(){        var temp = $scope.todolist.filter(function(item){            return item.done;
        });        // 返回任务个数
        return temp.length;
    }

}]);

最终的项目的结构如下：

四、效果展示

4.1 文件打包

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

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

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

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

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

拓展程序，后缀为 .crx
密钥文件，后缀为 .pem

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

4.2 效果展示

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

<!-- 引入人型时钟代码 start --><div>
     <object>
        <embed src="./time.swf" width="373px;" height="150px;" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash"></embed>
    </object>
 </div>
 <!-- 引入人型时钟代码 end -->