手把手教你实现 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 浏览器:

# 使用 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 -->

图片描述

如果是在本地,进行 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

图片描述

备份下载:http://ojailsbpc.bkt.clouddn.com/Code_and_Crx.zip

原文链接:,发表于 源代码(CodeBeta),转发请注明来源!

发表评论