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

  1. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
  2. 手把手教你开发Chrome扩展二:为html添加行为
  3. 手把手教你开发Chrome扩展三:关于本地存储数据

Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越firefox,firefox上内存占用上实在不令人满意,也许我使用firefox的一个原因就是因为firebug,不过相信chrome平台的类firebug插件也会很快出现。

Chrome的扩展开发十分简单,我们只需要掌握web开发的htm+CSS+Javascript,就能很快开发出自己的扩展。

你需要了解的内容

在开发前首先要掌握一些基础知识。

1、Chrome扩展文件

Chrome扩展文件以.crx为后缀名,在Google Chrome扩展官方网站下载扩展时,Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下,一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp,安装完成或者取消安装,该文件就会被删除。.crx实际上是一个压缩文件,使用解压文件打开这个文件就可以看到其中的文件目录,下图中是“关灯看视频”扩展的截图:

因此可以认为,我们实际上就是写一个Web应用,然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。

2、Browser Actions(扩展图标)

把Browser Actions翻译成扩展图标不是很准确,但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json,就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。

3、Page Actions(地址栏图标)

如果你熟悉一些Chrome插件的话,你一定会发现有些扩展的图标不是显示在地址栏的右边,而是显示在地址内部右方,这就是Page Actions地址栏图标。

可以看出上面中有三个Page Actions,图中我标出的是Chrome添加书签,现在你就会发现其实这个也是Chrome的扩展,只不是它是直接内置在Chrome的。

Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的,必须在特定的页面中这个功能才能使用。因此在开发中注意:如果不是全部页面中都能使用的功能请使用Page Actions方式。

4、popup弹出窗口

popup属于Browser Actions,当点击图标时出现这个窗口,可以在里面放置任何html元素,它的宽度是自适应的。当然,这个弹出窗口不会被Chrome拦截的:)

如下图中是evernote的popup窗口:

5、Background Pages后台页面

这个窗口不会显示,它是扩展程序的后台服务,它会一直保持运行。比如在一些需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作。

自己动手做一个

我们以一个简单的任务管理程序来一步步讲解。

上图是界面实现,我们首先完成界面的显示部分,首先建立一个新文件夹,以扩展应用的名称为标题,我们这里的应用叫做MyTaskList。然后把找一个图标文件,放到文件夹中,也可直接右键下载我的这个图标:

图标文件不要小于19px*19px,但最好也不要超过这个尺寸,虽然大图它会自适应,但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中,可以建立任意文件夹放进去,因为CSS文件把定义它们的路径。

建立manifest.json来定义我们程序配置:

  "name": "MyTaskList"

  "version": "0.9.0"

  "description": "Management my everyday‘s task lists."

  "browser_action": { 

    "default_icon": "icon.png" ,

    "default_title": "My Task List",

    "default_popup": "popup.html"

  

}

其中name代表应用程序名,version代表版本号,description代表功能描述。这些在安装扩展后就能看到,见下图:

browser_action代表扩展图标段显示,它会定义图标地址、标题(也就是鼠标悬停提示)和默认的popup页面。我们这里定义的popup页面为popup.html。

接下来开始定义popup.html显示,它不需要使用<html>、<head>和<body>标签,可以直接写上样式、脚本和html。我们的popup.html源码为:

<style type="text/css">

*{margin:0;padding:0;}

body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}

img{margin:0 4px;}

#addItemDiv{color:#ccc;}

.hide{display:none;}

.show{display:block;}

.taskItem{cursor:pointer;}

input{width:100%;}

label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}

label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}

</style>

<div id="newItem" class="gray">添加新项</div>

<div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div>

<div id="taskItemList">

    <div class="taskItem">

        <label class="on"></label><span class="taskTitle">新任务</span>

    </div>

    <div class="taskItem">

        <label class="off"></label><span class="taskTitle">已完成任务</span>

    </div>

</div>

打开预览,样子就已经出来了:

这样我们文件就已经建立完成,文件列表如下:

现在就可以先尝试把它打包装到自己的Chrome里。

首先打开Chrome-工具-扩展程序,展开开发人员模式,打到“打包扩展程序”按钮:

点击“打包扩展程序…”,弹出打包选择文件窗口,在扩展程序根目标中找到我们建立的文件夹,私有密码文件第一次不用选择:

点击确定,它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem,MyTaskList.pem是程序签名文件,以新版本的开发中还需要这个文件,不要删除它。把MyTaskList.crx拖进Chrome窗体内,就会把这个应用MyTaskList安装在Chrome里。

时间: 2024-09-30 00:38:14

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单的相关文章

CSS3实战开发:手把手教大家折角效果实战开发

各位网友,大家好,我是陌上花会开,今天这篇文章,我将手把手教大家如何开发一套纯CSS的折角效果.一如往常,我不提供代码下载,但是我可以保证,只要将教程中的代码复制到本地,绝对百分百获得与我演示的效果一样,希望各位明白我的用意. 好了,直接开始今天的教程吧.首先,我先给大家演示一下今天实战案例的效果: 有人会说这是什么?这就是我们今天的实战开发,我将带领大家开发上图中的右上角折叠效果. 在我讲解完之前,有些人可能觉得很难,不可思议.我想跟你们说:真的so easy.下面就请跟着我的分解步骤一步步学

Chrome扩展,应用开发学习笔记之2---恶搞百度一下

Chrome扩展,应用开发学习笔记之2 恶搞百度一下 前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序. 前面说过,manifest.json文件是用来描写叙述这个扩展的,是整个扩展的入口,同一时候也是告诉chrome怎么处理这个扩展. 恶搞百度一下: 以下我们来编写一个恶搞百度一下的扩展程序,希望从这个实例中,对于chrome拓展有一个更好的认识.先看看这个拓展的效果,例如以下图: 从图中我们能够猜到,其功能就是让你无法点击百度一下那个bu

chrome扩展程序开发之在目标页面运行自己的JS

大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的.可惜我们没有这个能力.不过幸运的是,chrome的扩展程序可以帮我们做到这件事. Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试. 本文会做一个chrom

Chrome扩展开发之Chrome扩展的文件结构

一个Chrome扩展包括一系列文件,HTML文件.CSS样式文件.JavaScript脚本.图片等,以及一个最有特点的manifest.json. 1. manifest.json是啥 它是每个chrome扩展有且只有一个的清单文件,它指明了该扩展的基本信息,如名称.版本.需要的权限等等,格式是json. JSON JSON是一种独立于语言和平台的数据格式,JSON对象就是一种格式化的静态的数据,接下来的chrome扩展中各模块之间交换信息就是用这种格式.传送时就是作为简单的字符串来传,js在收

下载谷歌浏览器(Chrome)扩展离线安装包crx文件最简单的方法

引言(可以不看): 下面介绍一下,下载谷歌浏览器(Google Chrome)扩展的离线安装包crx文件最简单的方法!真的是再简单不过了! 谷歌浏览器(Google Chrome)的扩展功能让谷歌浏览器变的无比强大,需要特殊功能的时候去Chrome Web Store找一下,基本都可以找到合适的扩展.但是随着Chrome浏览器使用的时间越来越长,积累下来的扩展也越来越多,备份这些扩展就成了一个新的问题. 比如出于由于某些众所周知的原因,在给MM(或朋友.爸妈等)装机的时候可能上不去扩展安装页面.

《手把手教你实现电商网站开发》课程学习总结

地址:http://www.imooc.com/learn/100 这是一个纯HTML/CSS的教学视频,没有JS. 这个视频课程的学习我已经接近尾声了,我大概是17年11月开始观看学习的吧,断断续续的看,断断续续的学,只记得那时才刚接触前端,也才刚看完W3school上的HTML.CSS和JAVASCRIPT基础教程,然后懵懵懂懂的在慕课网筛选HTML/CSS,再筛选了下初级教程视频,就点开了这个视频,刚看没多久我感觉真心难啊,但看着初级难度我还是坚持下来了,到现在已经有半年多了,一个算是略有

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

CSS3实战开发:手把手教大家搜索表单发光特效实战开发

各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧: 从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效. PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果. 首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"><met

Chrome扩展开发——Gmail附件管理助手

零.为什么会有这一套博文 2014年底虽然已经基本完成GmailAssist这一chrome扩展开发(当时也是作为软件工程课程的实践项目),但该扩展程序对于邮箱内邮件数目较多(大约五位数的数量级上)的情况,就很难正常工作了,这显然不是一个合格的软件,当时虽然终期验收顺利“交差”了,但这个软件的“不合格”却一直是我的一个心病.经过一年的学习,尽管对于前端开发的知识没有什么更进一步的掌握,但对软件工程的思想等等有了比起当时来说更深一层的认识.同时,当时虽然是一定程度上遵循敏捷开发的原则来进行的开发,