chrome扩展及应用开发pdf.pdf-资料库

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第1页.png

第1页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第2页.png

第2页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第3页.png

第3页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第4页.png

第4页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第5页.png

第5页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第6页.png

第6页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第7页.png

第7页 / 共337页

576572bf-1154-4a90-84e5-ea0ced2c3a25.pdf-第8页.png

第8页 / 共337页

Chrome 扩展及应用开发 Sneezry 著 Tacey 整理成 world

前言一个电子专业的在校学生，每天学习的是电子在晶格中如何游走，研究的是半导体器件的电学特性，无论如何都不会与这本书的作者联系在一起。说起来写这本书非常偶然，在某一天我突然就想写点什么了，想写点很多人都会看的东西，作为人生中的一个成就。虽然我的专业是电子，但编程一直都是我最大的爱好，前端更是我最熟悉的领域。作为 Google 的追随者，我是第一批使用 Chrome 浏览器的用户，并在 Chrome 推出扩展功能后较早投入到其中的开发者之一，所以 Chrome 开发自然就成为了我写作的选题。这本书诞生于图灵社区，图灵社区的写作氛围很好，而且在线编辑器支持 Markdown 语法。在开始我并不好意思直接说写的是书，直到定稿前夕我才把“文集”二字改成了“书”。回顾几个月之前，一拍脑门夹着笔记本就去图书馆开写了，在写作的过程中遇到一个又一个坑，有时为了让一个实例跑通要调上一整个下午，如果当初我知道会遇到这么多困难想来是不会动笔的。但既然动笔了，半途而废着实没有颜面，所以就一直坚持到了最后。写作对个人能力的提升是非常大的，由于每一个知识点都必须咬死，不可含糊其辞，所以我在写作的过程中不得不一遍遍仔细翻阅 Chrome 官方开发文档和 W3C 标准，同时还要编写实例进行验证。值得庆幸的是，这本书还没有完成就得到了很多读者的关注，他们给了我很大的鼓励，有的读者还表示可以无私帮我校审书稿。在此我要重点感谢方觉，大家可能对这个名字并不熟悉，但他创建和维护的 crxdoc-zh.appspot.com 相信开发 Chrome 扩展和应用的开发者没有几个不知道，这本教

程也参考和引用了上面的部分内容。他不仅仅对本书的语言表述进行了仔细认真的推敲，而且还纠正了一些知识点中的错误，包括官方文档中同样出现的错误，这让我感到十分惊讶，后来才发现他还是 Chromium 项目的贡献者，这更是令我敬佩不已。吕鹏和李典是我很早就在互联网上结识的朋友。吕鹏同学和我一直在一起鼓捣些小程序，都说能找到志同道合的小伙伴不易，我十分庆幸能在广阔的互联网中与他结识。最初我认识吕鹏时他还是大二的在校生，转眼已是微软的大牛，我也为能有如此优秀的朋友感到自豪。在我刚刚开始写独立博客时，李典同学就成为了我的读者，虽然他一直躲在 Google Reader 后面。李典同学是第一个为此书提交勘误表的读者，在早先他为我的一个项目贡献代码时，我就发现他是一个做事十分认真的人，这次也不例外，以至于后来我将他的勘误表作为样板发给了参与校审的每一位读者。参与校审的还有赵余和韩骏，在此一并表示感谢！另外不得不提的是，我在设计此书的封面时，使用了 Chan Cheong Pin 的摄影作品，海龟。他在得知我要将这幅作品用于此书的封面设计后，慷慨地授权我免费使用，在此也向他表达诚挚的感谢！由于作者水平有限，书中不免出现错误，欢迎读者朋友指正。您可以通过 lizhe@lizhe.org 与作者联系，也可以通过图灵社区在线提交勘误信息，在此先行感谢。第 1 章初步接触 Chrome 扩展应用开发 Chrome 是 Google 公司基于 WebKit 开发的一款浏览器 1，但从某种角度上来说它已经超越了浏览器成为了一个平台甚至是一个操作系统。Chrome 继承了 WebKit 内核对

HTML 的高速渲染，同时 Google 自行开发的 V8 引擎使得 JavaScript 在 Chrome 中的执行效率大幅提升，这使得更加高级复杂的 JavaScript 程序在 Chrome 中运行成为可能。 1 Chrome 28 之后使用的 Blink 渲染引擎是 WebKit 中 WebCore 组件的一个分支。 Chrome 浏览器除了页面渲染速度快，JavaScript 执行速度快以外，另一大特点就是支持开发者为其编写各种各样的扩展来扩充其功能，用 HTML5 编写桌面程序，这使得 Chrome 变得更加强大。编写这样的程序就是本书所要讲解的内容。本章首先对 Chrome 扩展应用进行简单概述，之后带着读者编写一个简单的扩展，使读者对扩展的认识更加深入。在讲解扩展 Manifest 文件格式时，也会简单讲解一下 JSON 数据格式 2，避免没有接触过 JSON 的读者阅读后续的内容产生困难。另外本章也用一小节简单讲解了一下 DOM，这对从未接触过网页编程的读者会非常有帮助。 2 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 1.1 认识 Chrome 扩展及应用 Chrome 扩展是用于扩充 Chrome 浏览器功能的程序，Chrome 应用是以 Chrome 为平台运行的程序，两者似乎并没有太明确的区别，甚至有些程序既可以设计成 Chrome 扩展也可以设计成 Chrome 应用。但既然 Google 将基于 Chrome 平台的程序分为了两类，说明两者还是有区别的。 Chrome 扩展主要用于对浏览器功能的增强，它更强调与浏览器相结合。比如 Chrome 扩展可以在浏览器的工具栏和地址栏中显示图标，它可以更改用户当前浏览的网页中的内容，也可以更改浏览器代理服务器的设置等等。

Chrome 应用更强调是独立的程序，你可以不打开 Chrome 浏览器而运行这些程序。同时这些程序可以调用更加底层的系统接口，比如串口、USB、本地文件读写等等。同时 Chrome 应用可以拥有样式更加自由的独立窗口，而 Chrome 扩展的界面只能限定在浏览器窗口中。由于 Chrome 扩展和 Chrome 应用有很多相似之处，为了叙述方便本章会统一说成 Chrome 扩展，但应该清楚同样适用于 Chrome 应用。 Chrome 扩展是一系列文件的集合，这些文件包括 HTML 文件、CSS 样式文件、JavaScript 脚本文件、图片等静态文件以及 manifest.json。个别扩展还会包含二进制文件，如 DLL 动态库和 so 动态库等，但这需要调用 NPAPI，而 Google 出于安全性考虑已经决定逐渐淘汰 NPAPI，所以我不准备在本书中向大家介绍有关 NPAPI 的内容。扩展被安装后，Chrome 就会读取扩展中的 manifest.json 文件。这个文件的文件名固定为 manifest.json，内容是按照一定格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的 UI 界面入口等等。这样 Chrome 就可以知道在浏览器中如何呈现这个扩展，以及这个扩展如何同用户进行交互。由于 Chrome 扩展是基于 Chrome 平台的，说得直白些，是基于 WebKit 浏览器的——当然有些更加高级的接口不仅仅依赖于 WebKit 浏览器——所以 Chrome 扩展在处理逻辑运算和实现程序功能时所采用的编程语言必然只能是 JavaScript。可能你会感到惊讶，毕竟 JavaScript 最开始是为提升网站与用户交互体验而设计出的一种轻量级脚本语言，怎么会脱离网站而成为一种程序的逻辑语言呢？随着 Chrome 浏览器 V8 引擎的出现，JavaScript 的执行效率得到了大幅提升，甚至出现了将其作为后端语言的项目

——Node.js。所以将 JavaScript 作为一种客户端程序语言就更是绰绰有余了——只要提供更加丰富的功能函数——而 Chrome 平台正提供了这样的环境。总的来说，Chrome 扩展更像是一个运行于本地的网站，只是它可以利用 Chrome 平台提供的丰富的接口，获得更加全面的信息，进行更加复杂的操作。而它的界面则使用 HTML 和 CSS 进行描述，这样的好处是可以用很短的时间构建出赏心悦目的 UI。界面的渲染完全不需要开发者操心，而是交给 Chrome 去做。同时由于 JavaScript 是一门解释语言 1，无需对其配置编译器，调试代码时你只要刷新一下浏览器就可以看到修改后的结果，这使得开发周期大大缩短。 1 现代浏览器使用的 JavaScript 引擎会对 JavaScript 编译，V8。同时 Chrome 浏览器相比于 Java 虚拟机、Python 解释器（Linux 和 OS X 中默认安装了 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": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": { "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "我的时钟", "default_popup": "popup.html" } } 上面的字段有些我们可以一眼看出在定义什么，比如 name 定义了扩展的名称， version 定义了扩展的版本，description 定义了扩展的描述，icons 定义了扩展相关图标文件的位置。 version 的值最多可以是由三个圆点分为四段的版本号，每段只能是数字，每段数字不能大于 65535 且不能以 0 开头（可以是 0，但不可以是 0123），版本号段左侧为高位，比如 1.0.2.0 版本比 1.0.0.1 版本更高。每次更新扩展时，新的版本号必须比之前的版本号高。 browser_action 指定扩展的图标放在 Chrome 的工具栏中， browser_action 中的 default_icon 属性定义了相应图标文件的位置， default_title 定义了当用户鼠标悬停于

资料库

chrome扩展及应用开发pdf.pdf

相关推荐

课程资源

热门标签

最新资料