文章目录
一、课程简介
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 极速浏览器应用开发平台部分资料:
参考部分官方文档资料。官方的文档写得很简单,有兴趣的同学也可以看下,可能需要翻墙:
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">×</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