一、课程简介

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.zip
rm 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=" width:373px;">
<img src="./images/logo.png" alt="" >
<button class="btn btn-success">Learning by doing</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>

此时项目的目录结构为:

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

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

干货推荐

【干货】Chrome插件(扩展)开发全攻略 :http://blog.haoji.me/chrome-plugin-develop.html?from=xa 如果连接失效可以单击这里:https://www.jianshu.com/p/9c4a552cc984

特别推荐:http://www.ituring.com.cn/book/1421

手把手教你实现 Google 拓展插件(转自实验楼)的更多相关文章

  1. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

  2. 手把手教你实现一个支持插件化的 uTools 工具箱(一)

    前言 对于前端同学来说,我们会经常用到各种小工具,比如:图床.颜色拾取.二维码生成器.url 管理.文本比对.json 格式化.当然我们可以 chrome 收藏夹来管理各种在线的小工具,但作为一个有追 ...

  3. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  4. Google常用拓展插件

    1.web前端助手(FEhelper)提供一些实用的前端小工具,功能十分贴心 2.bookMarks Manager 一个书签管理工具 3.Clear Cache 清除浏览器的缓存,有很多供选择的条目 ...

  5. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  6. Flutter实战:手把手教你写Flutter Plugin

    前言 如果你对移动端有所关注,那么你一定会听说过Flutter.得益于Google,Flutter一经推出便得受到了广泛关注.很多开发者跃跃欲试,国内部分大厂,诸如美团.闲鱼等团队已经开始了Flutt ...

  7. 手把手教你开发chrome扩展

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...

  8. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  9. 自已开发IM有那么难吗?手把手教你自撸一个Andriod版简易IM (有源码)

    本文由作者FreddyChen原创分享,为了更好的体现文章价值,引用时有少许改动,感谢原作者. 1.写在前面 一直想写一篇关于im即时通讯分享的文章,无奈工作太忙,很难抽出时间.今天终于从公司离职了, ...

随机推荐

  1. 数据结构与算法之PHP排序算法(插入排序)

    一.基本思想 插入排序算法是每一步将一个待排序的数据插入到前面已经排好序的有序序列中,直到所有元素插入完毕为止.   二.算法过程 1)将第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未 ...

  2. LimeSDR环境安装与测试

    虚拟机:ubuntu虚拟机建议4g内存,64g硬盘,usb3.0已开启 //否则编译过程耗尽内存 1 换阿里云源(加速)# deb cdrom:[Ubuntu 16.04 LTS _Xenial Xe ...

  3. 跟随我在oracle学习php(8)

    JavaScript 是一种专为与网页交互而设计的脚本语言, javascript:特效 表单验证原理:什么时候,找到标签,什么时候,操作标签 使用<script>元素的方式有两种:直接在 ...

  4. python url 下载并保存

    方法一:用urllib import jsonimport urllib url_model='{"version":"2","url":& ...

  5. 小白的python之路10/22 day1

    一.操作系统 操作系统就是一个协调.管理和控制计算机硬件资源和软件资源的控制程序.操作系统所处的位置如下图

  6. sql查询练习

    #建学生信息表student create table student ( sno varchar(20) not null primary key, sname varchar(20) not nu ...

  7. 安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩

    安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...

  8. 调用 LoadLibraryEx 失败,在 ISAPI 筛选器 "C:\Program Files\php\php5isapi.dll"

    把 ISAPI 筛选器这里的php配置删掉,php改用fastcgi配置

  9. LAMP架构上(一)

    第十七课LAMP架构上(一) 目录 一.LAMP架构介绍 二.MySQL.MariaDB介绍 三.MySQL安装 四.MariaDB安装 五.Apache安装 六.安装PHP5 七.安装PHP7 八. ...

  10. 关于数据安全RSA,MD5,TOKEN

    网络上明文传输时 1.数据可能被窃取:2.数据可能被篡改:3.数据被泄露 如何解决: 1.数据被窃取是由于数据能随意的被拿到,且能够被识别.可以有2个方式解决 a.使数据不能随意被获取: 使用toke ...