一、课程简介

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. selenium java maven自动化测试环境搭建

    版本说明: JDK 版本:1.8.0_112: Eclipse IDE: 4.6.1: Maven 版本:apache-maven-3.3.9: Selenium 版本: 3.0.1: Firefox ...

  2. 微信支付---公众号支付和H5支付区别

    微信支付分为如下几种:(来源https://pay.weixin.qq.com/wiki/doc/api/index.html) 本文主要讲解公众号支付和H5支付,两者均属于线上支付比较常用的方式: ...

  3. 各大型网站架构分析收集-原网址http://blog.csdn.net/lovingprince/article/details/3379710

    1. PlentyOfFish 网站架构学习http://www.dbanotes.net/arch/plentyoffish_arch.html 采取 Windows 技术路线的 Web 2.0 站 ...

  4. match和search的区别

    正则表达式帮助你方便的检查一个字符串是否与某种模式匹配. re模块使Python语言拥有全部的正则表达式功能. re.match尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,mat ...

  5. 理解linux下的load

    我们在做Linux负载计算的时候,我们需要了解负载的几个概念 1)Linux负载是什么 2)Linux负载怎么计算 3)如何区分目前负载是“好”还是“坏” 4)什么时候应该注意哪些不正常的值   1) ...

  6. R语言安装xlsx包,读入excel表格

    开学的时候,男神给了数据(.xlsx格式)让用R语言分析分析,作为编程小白,读了一天都没读近R,更别提如何分析了. 现在小伙伴们都喜欢读txt 和csv格式的,好多xlsx的表格读不进R,将xlsx格 ...

  7. 《JavaScript Dom 编程艺术》读书笔记-第8章

    充实文档的内容,包括几个方面: 一个为文档创建“缩略图列表”的函数: 一个为文档创建“文献来源链接”的函数: 一个为文档创建“快捷键清单”的函数. <abbr>在HTML5 中以取代< ...

  8. 全文检索的Demo

    用到lucene版本为6.3.0版本,利用的分词器为IKAnalyzer分词器,该分词对中文有较好的支持.关于支持lucene的6.xx以上的IkAnalyzer分词jar包下载地址:https:// ...

  9. FCC JS基础算法题(4):Title Case a Sentence(句中单词首字母大写)

    题目描述: 确保字符串的每个单词首字母都大写,其余部分小写.像'the'和'of'这样的连接符同理. 算法: function titleCase(str) { // 转小写及分割成数组 var st ...

  10. sqlserver2008数据库自动备份的sql脚本及使用bat命令执行脚本

    -----sql脚本 declare @fileName varchar(255) ,--定义备份文件名变量         @dbname varchar(255)--定义备份数据库名变量decla ...