chrome扩展及应用开发pdf

【实例简介】
chrome扩展及应用开发，图灵社区上可以看，这里是整合的pdf版本
程也参考和引用了上面的部分內容。他不仅仅对本书的语言表述进行了仔细认真的推敲,而 且还纠正了一些知识点中的错误,包括官方文档中同样出现的错误,这让我感到十分惊讶, 后来才发现他还是 Chromium项目的贡献者,这更是令我敬佩不已。 吕鹏和李典是我很早就在互联网上结识的朋友。吕鹏同学和我一直在一起鼓捣些小程序,都 说能找到志同道合的小伙伴不易,我十分庆幸能在广阔的互联网中与他结识。最初我认识吕 鹏时他还是大二的在校生,转眼已是微软的大牛,我也为能有如此优秀的朋友感到自豪。在 我刚刚开始写独立博客时,李典同学就成为了我的读者,虽然他一直躲在 Google Reader 后面。李典同学是第一个为此书提交勘误表的读者,在早先他为我的一个项目贡献代码时, 我就发现他是一个做事十分认真的人,这次也不例外,以至于后来我将他的勘误表作为样板 发给了参与校审的每一位读者。 参与校审的还有赵余和韩骏,在此一并表示感谢! 另外不得不提的是我在设计此书的封面时使用了 Chan Cheong pin的摄影作品海龟 他在得知我要将这幅作品用于此书的封面设计后,慷慨地授权我免费使用,在此也向他表达 诚挚的感谢! 由于作者水平有限,书中不免出现错误,欢迎读者朋友指正。您可以通过izhe@izhe。rq 与作者联系,也可以通过图灵社区在线提交勘误信息,在此先行感谢。 第1章初步接触 Chrome扩展应用开发 Chrome是 Google公司基于 Webkit开发的一款浏览器,但从某种角度上来说它已 经超越了浏览器成为了—个平台甚至是一个操作系统。 Chrome继承了 Webkit內核对 HTML的高速渲染,同时 Google自行开发的8引擎使得 Javascript在 Chrome中的执 行效率大幅提升,这使得更加高级复杂的 JavaScript程序在 hrome中运行成为可能。 1 Chrome28之后使用的Bink渲染引擎是 Webkit中 WebCore组件的一个分支。 Chrome浏览器除了页面渲染速度快, JavaScript执行速度快以外,另一大特点就是支持 开发者为其编写各种各样的扩展来扩充其功能,用HTML5编写桌面程序,这使得 Chrome 变得更加强大。编写这样的程序就是本书所要讲解的内容。 本章首先对 Chrome扩展应用进行简单概述,之后带着读者编写一个简单的扩展,使读者 对扩展的认识更加深入。在讲解扩展 Manifest文件格式时,也会简单讲解一下JSON数据 格式2,避免没有接触过JSON的读者阅读后续的内容产生困难。另外本章也用一小节简单 讲解了一下DOM,这对从未接触过网页编程的读者会非常有帮助。 2JSON( Java Script Object Notation)是一种经量級的数据交换格式, 1.1认识 Chrome扩展及应用 Chrome扩展是用于扩充 Chrome浏览器功能的程序,Chr。me应用是以Chr。me为平台 运行的程序,两者似乎并没有太明确的区别,甚至有些程序既可以设计成 Chrome扩展也 可以设计成 Chrome应用。但既然 Google将基于 Chrome平台的程序分为了两类,说明 两者还是有区别的 Chrome扩展主要用于对浏览器功能的增强,它更强调与浏览器相结合。比如 Chrome扩 展可以在浏览器的工具栏和地址栏中显示图标,它可以更改用户当前浏览的网页中的内容, 也可以更改浏览器代理服务器的设置等等 Chrome应用更强调是独立的程序,你可以不打开 Chrome浏览器而运行这些程序。同时 这些程序可以调用更加底层的系统接口,比如串口、USB、本地文件读写等等。同时 Chrome 应用可以拥有样式更加自由的独立窗口,而 Chrome扩展的界面只能限定在浏览器窗口中。 由于 Chrome扩展和 Chrome应用有很多相似之处为了叙述方便本章会统一说成 Chrome 扩展,但应该清楚同样适用于 Chrome应用。 Chrome扩展是一系列文件的集合,这些文件包括HTML文件、CSS样式文件、 JavaScript 脚本文件、图片等静态文件以及 manifest. son。个别扩展还会包含二进制文件,如DLL动 态库和so动态库等,但这需要调用NPA門I,而 Google出于安全性考虑已经决定逐渐淘汰 NPAPI,所以我不准备在本书中向大家介绍有关 NPAPI的内容 扩展被安裝后, Chrome就会读取扩展中的 manifest json文件。这个文件的文件名固定为 manifest json,内容是按照一定格式描述的扩展相关信息,如扩展名称、版本、更新地址、 请求的权限、扩展的UI界面入口等等。这样 Chrome就可以知道在浏览器中如何呈现这个 扩展,以及这个扩展如何同用户进行交互。 由于 Chrome扩展是基于 Chrome平台的,说得直白些,是基于 Webkit浏览器的——当 然有些更加高级的接口不仅仅依赖于 Webkit浏览器——所以 Chrome扩展在处理逻辑运 算和实现程序功能时所采用的编程语言必然只能是 JavaScript 可能你会感到惊讶,毕竟 JavaScript最开始是为提升网站与用户交互体验而设计出的一种 轻量级脚本语言,怎么会脱离网站而成为一种程序的逻辑语言呢?随着 Chrome浏览器ν8 引擎的岀现, JavaScript的执行效率得到了大幅提升,甚至岀现了将其作为后端语言的项目 Node js。所以将 JavaScript作为一种客户端程序语言就更是绰绰有余了—只要提 供更加丰富的功能函数——而 Chrome平台正提供了这样的环境。 总的来说, Chrome扩展更像是一个运行于本地的网站,只是它可以利用 Chrome平台提 供的丰富的接口,获得更加全面的信息,进行更加复杂的操作。而它的界面则使用HTML 和CSS进行描述,这样的好处是可以用很短的时间构建出賞心悦目的UI。界面的渲染完全 不需要开发者操心,而是交给 Chrome去做。同时由于 JavaScript是一门解释语言1,无 需对其配置编译器,调试代码时你只要刷新一下浏览器就可以看到修改后的结果,这使得开 发周期大大缩短。 1现代浏览器使用的 javascript擎会对 Javascript:编译,V8 同时 Chrome浏览器相比于Java虛拟机、 Python解释器( Linux和OSX中默认安装了 Python,而 Windows中默认没有安装)等其他语言环境更加普及—我甚至可以在我们 学校的图书馆计算机中找到 Chrome浏览器—所以你所开发的 Chrome扩展就可以在更 多的计算机中运行。当你眼前遇到一个问题需要利用计算机去处理,而这台计算机恰好安装 了 Chrome浏览器那么你就可以欢快地打开记事本开始编写程序了,之后加载到 Chrome 浏览器中就可以查看运行结果,这是一件多么酷的事啊! 别急,后面的内容就会让你得到这项新技能! 1.2我的第一个 Chrome扩展 我发现很多讲解编程的书籍,在前面都会详细地讲解相关的预备知识,而大多数读者却 更希望马上迸行实践。没错,人们总是对基础知识很排斥,这也就是为什么在教育行业开始 推崇自顶向下的教材设计方案了—先让读者看到一个最接近表面的东西,之后再慢慢深 入地讲解內在的原理和基础。所以我决定在还没有讲什么的时候,先带大家写一个Demo 程序。这样不仅可以让大家在实践中对基础知识掌握得更加牢靠,同时也调动了大家的积极 性 Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中,用户单击后激活扩展进行下 一步的操作,也可以干脆没有图标,在后台静默地运行。比如微博的扩展,可以设计成将图 标显示在工具栏中,用户点击后打开一个显示用户微博时间轴的界面;RSS订阅器扩展可 以设计成将图标显示在地址栏中,当用户点击后,订阅地址栏中当前显示的URL;自动使 用 Google SSL链接的扩展可以不显示图标,只是在后台默默地监视,当用户访问了非SSL 的 Google链接后,自动跳转到SSL链接即可 岛 Chrome力展图标在浏器中的位置 我们准备编写一款显示用户计算机当前时间的扩展,这应该比 Hello world有趣得多。设 计思路是在浏览器的工具栏中显示一个时钟的图标当用户点击这个图标时显示一个实时显 示计算机时间的界面。 首先新建一个名为 my_clock的文件夹在此文件夹中新建一个名为 manifest json的文件, 内容如下: manifest version":2 "name":"我的时钟", version":1.0 " description":"我的第一个 Chrome扩展", icons": i 16 :images/icon16 png", 48":images/icon48 png", 128":images/icon128 png browser action":0 default icon":i 19":images/icon19 png", 38:images/icon38 png " defau1 t title":"我的时钟", default_ popup":"popup. html 上面的字段有些我们可以一眼看出在定义什么,比如name定义了扩展的名称, version 定义了扩展的版本, description定义了扩展的描述, icons定义了扩展相关图标文件的位 置。 version的值最多可以是由三个圆点分为四段的版本号,每段只能是数字,每段数字不 能大于65535且不能以0开头(可以是0,但不可以是0123),版本号段左侧为高位,比 如102.0版本比1.0.0.1版本更高。每次更新扩展时,新的版本号必须比之前的版本号高。 browser action指定扩展的图标放在 Chrome的工具栏中, browser action中的 default icon属性定义了相应图标文件的位置, efault title定义了当用户鼠标悬停于 扩展图标上所显示的文字, default popup则定义了当用户单击扩展图标时所显示页面的文 件位置 接下来我们开始编写 popup.html。 <html> head> <style> dding: 0 body i height: 100px; div i line-height: 100px; font-size: 42px gn: center </style /head> <body> <div id="clock div"></div> <script src="js/my clock. js ></script> </body> </html> 如果你曾经编写过网页,会发现上面这个页面省略了很多内容,比如<tit1e标签。因为对 于 Chrome扩展来说,很多对网页有意义的内容是无意义的,所以我们可以只挑需要的写 当然你全写出来也不会有什么问题 上面的这个页面首先定义了全局元素的 margin和 padding为0,这样我们可以更加自由地 控制元素的外观。在编写网页时,body的尺寸往往不会专门给定,但对于 Chrome扩展有 时这是必要的,比如此例中我们需要告诉 Chrome当用户单击扩展图标后展示一个多大的 界面。 之后我们在boy标签中定义了一个1d为 clock di\的a容器,用这个容器来显示当 前的时间,这样我们就把HTML的布局写好了。接下来我们就需要引入 JavaScript处理数 据并动态显示了。值得注意的是 Chrome不允许将 Javascript代码段直接内嵌入HTML文 档,所以我们需要通过外部引入的方式引用S文件。当然 inline- script也是被禁止的, 所以所有元素的事件都需要使用 Javascript代码进行绑定,如果你没有使用一个拥有强大 选择器的库(如 jQuery),最好给需要绑定事件的元素分配一个id以便进行操作 下面来编写 my_ clock js文件。 function my clock(el) var today=new Date oj 【实例截图】
【核心代码】