手把手教你实现 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.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 极速浏览器应用开发平台部分资料:
参考部分官方文档资料。官方的文档写得很简单,有兴趣的同学也可以看下,可能需要翻墙:
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">×</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 拓展插件(转自实验楼)的更多相关文章
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- 手把手教你实现一个支持插件化的 uTools 工具箱(一)
前言 对于前端同学来说,我们会经常用到各种小工具,比如:图床.颜色拾取.二维码生成器.url 管理.文本比对.json 格式化.当然我们可以 chrome 收藏夹来管理各种在线的小工具,但作为一个有追 ...
- [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...
- Google常用拓展插件
1.web前端助手(FEhelper)提供一些实用的前端小工具,功能十分贴心 2.bookMarks Manager 一个书签管理工具 3.Clear Cache 清除浏览器的缓存,有很多供选择的条目 ...
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...
- Flutter实战:手把手教你写Flutter Plugin
前言 如果你对移动端有所关注,那么你一定会听说过Flutter.得益于Google,Flutter一经推出便得受到了广泛关注.很多开发者跃跃欲试,国内部分大厂,诸如美团.闲鱼等团队已经开始了Flutt ...
- 手把手教你开发chrome扩展
转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...
- 自已开发IM有那么难吗?手把手教你自撸一个Andriod版简易IM (有源码)
本文由作者FreddyChen原创分享,为了更好的体现文章价值,引用时有少许改动,感谢原作者. 1.写在前面 一直想写一篇关于im即时通讯分享的文章,无奈工作太忙,很难抽出时间.今天终于从公司离职了, ...
随机推荐
- selenium java maven自动化测试环境搭建
版本说明: JDK 版本:1.8.0_112: Eclipse IDE: 4.6.1: Maven 版本:apache-maven-3.3.9: Selenium 版本: 3.0.1: Firefox ...
- 微信支付---公众号支付和H5支付区别
微信支付分为如下几种:(来源https://pay.weixin.qq.com/wiki/doc/api/index.html) 本文主要讲解公众号支付和H5支付,两者均属于线上支付比较常用的方式: ...
- 各大型网站架构分析收集-原网址http://blog.csdn.net/lovingprince/article/details/3379710
1. PlentyOfFish 网站架构学习http://www.dbanotes.net/arch/plentyoffish_arch.html 采取 Windows 技术路线的 Web 2.0 站 ...
- match和search的区别
正则表达式帮助你方便的检查一个字符串是否与某种模式匹配. re模块使Python语言拥有全部的正则表达式功能. re.match尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,mat ...
- 理解linux下的load
我们在做Linux负载计算的时候,我们需要了解负载的几个概念 1)Linux负载是什么 2)Linux负载怎么计算 3)如何区分目前负载是“好”还是“坏” 4)什么时候应该注意哪些不正常的值 1) ...
- R语言安装xlsx包,读入excel表格
开学的时候,男神给了数据(.xlsx格式)让用R语言分析分析,作为编程小白,读了一天都没读近R,更别提如何分析了. 现在小伙伴们都喜欢读txt 和csv格式的,好多xlsx的表格读不进R,将xlsx格 ...
- 《JavaScript Dom 编程艺术》读书笔记-第8章
充实文档的内容,包括几个方面: 一个为文档创建“缩略图列表”的函数: 一个为文档创建“文献来源链接”的函数: 一个为文档创建“快捷键清单”的函数. <abbr>在HTML5 中以取代< ...
- 全文检索的Demo
用到lucene版本为6.3.0版本,利用的分词器为IKAnalyzer分词器,该分词对中文有较好的支持.关于支持lucene的6.xx以上的IkAnalyzer分词jar包下载地址:https:// ...
- FCC JS基础算法题(4):Title Case a Sentence(句中单词首字母大写)
题目描述: 确保字符串的每个单词首字母都大写,其余部分小写.像'the'和'of'这样的连接符同理. 算法: function titleCase(str) { // 转小写及分割成数组 var st ...
- sqlserver2008数据库自动备份的sql脚本及使用bat命令执行脚本
-----sql脚本 declare @fileName varchar(255) ,--定义备份文件名变量 @dbname varchar(255)--定义备份数据库名变量decla ...