新書推薦：
《
这个甜甜圈不能卖：奇思妙想爆笑绘本（全2册）
》
售價：NT$
447.0
《
生活中的民法典实用全书：应知应懂的法律常识
》
售價：NT$
498.0
《
饲渊
》
售價：NT$
223.0
《
现金为王：把利润留下来，把成本降下去
》
售價：NT$
386.0
《
经纬度丛书·巴勒斯坦人的故事：流亡者的悲情、绝望与抗争
》
售價：NT$
493.0
《
改变世界的哲学家们
》
售價：NT$
493.0
《
将军
》
售價：NT$
269.0
《
墓志的生成及其在唐代的衍变研究
》
售價：NT$
549.0
|
| 編輯推薦： |
国内第一本介绍Chrome扩展及应用的书
第一本诞生于图灵社区的书
电子书在各大社区受到一致好评
带你“零距离”地观摩大型技术平台对规范与标准的实现
让你灵活运用扩展装备浏览器，巧妙借助HTML5创建自己的桌面应用
《Chrome扩展及应用开发》是第一本讲解如何开发Chrome扩展和应用的系统教程。全书共十章，分为两大部分，分别是扩展和应用。本书由浅入深，条理清晰，非常适合初学者自学。本书提供了大量实例，并结合实例详细生动地讲解相关知识在实践中的应用，加深读者对知识的理解。
|
| 內容簡介： |
《Chrome扩展及应用开发》简述了Chrome平台开发的概念、扩展与应用的区别及其常用功能，并结合具体场景给出了实例。主要介绍了Chrome扩展基础、Chrome扩展的UI界面、管理浏览器和部分高级API划分，讲解了文件系统、网络通信、操作USB设备和串口通信等多个与操作系统紧密相关的内容，还介绍了Chrome主题开发、支持国际化的程序开发，以及如何使用Angular框架进行开发。
《Chrome扩展及应用开发》以直观生动的实例帮助读者理解知识要点，以自顶向下的方式进行讲解，让读者先接触最直观的内容，然后慢慢深挖究其本质，非常适合开发者自学。
|
| 關於作者： |
|
李喆 网名Sneezry，Chrome扩展及应用开发者，吉林大学电子科学与工程学院在读硕士，现研究方向为计算机视觉的硬件实现。喜欢小动物，养有一只智利狼蛛作为宠物。
|
| 目錄：
|
目 录
第1章 初步接触Chrome扩展及应用开发 001
1.1 认识Chrome扩展及应用 002
1.2 应用与扩展的区别 003
1.3 我的第一个Chrome扩展 004
1.4 Manifest文件格式 008
1.5 DOM简述 011
1.6 调试方法与代码质量 013
第2章 Chrome扩展基础 016
2.1 操作用户正在浏览的页面 017
2.2 跨域请求 020
2.3 常驻后台 025
2.4 带选项页面的扩展 027
2.5 扩展页面间的通信 032
2.6 存储数据 034
2.7 i18n 037
第3章 Chrome扩展的UI界面 039
3.1 CSS简述 040
3.1.1 默认样式及box模型 040
3.1.2 元素定位 042
3.1.3 字体及背景颜色 043
3.2 Browser Actions 045
3.2.1 图标 045
3.2.2 popup页面 047
3.2.3 标题和badge 049
3.3 右键菜单 051
3.4 桌面提醒 056
3.5 omnibox 058
3.6 Page Actions 061
第4章 管理你的浏览器 062
4.1 书签 063
4.1.1 创建书签 064
4.1.2 创建书签分类 064
4.1.3 调整书签位置 065
4.1.4 更新书签 065
4.1.5 移除书签 065
4.1.6 获取书签内容 065
4.1.7 书签事件 066
4.2 Cookies 068
4.2.1 管理Cookie 068
4.2.2 读取Cookie 069
4.2.3 设置Cookie 069
4.2.4 删除Cookie 070
4.2.5 获取全部的cookie store 070
4.2.6 监控操作Cookie的行为 071
4.3 历史 071
4.3.1 读取历史 072
4.3.2 添加历史 073
4.3.3 删除历史 074
4.3.4 对历史操作的监听 074
4.4 管理扩展与应用 075
4.4.1 读取用户已安装的扩展和应用的信息 075
4.4.2 获取权限警告 076
4.4.3 启用、禁用、卸载扩展和启动应用 076
4.4.4 对管理操作的监听 077
4.5 标签 078
4.5.1 获取标签信息 078
4.5.2 创建标签 079
4.5.3 更新标签 079
4.5.4 移动标签 080
4.5.5 重载标签 080
4.5.6 移除标签 080
4.5.7 获取当前标签页面的显示语言 081
4.5.8 获取指定窗口活动标签可见部分的截图 081
4.5.9 注入JavaScript和CSS 081
4.5.10 与指定标签中的内容脚本content script通信 082
4.5.11 监视标签行为 082
4.6 Override Pages 084
第5章 部分高级API 086
5.1 下载 087
5.2 网络请求 089
5.3 代理 092
5.4 系统信息 095
第6章 Chrome应用基础 098
6.1 更加严格的内容安全策略 099
6.2 图标设计规范 101
6.3 应用的生命周期 103
6.4 应用窗口 106
6.4.1 创建窗口 106
6.4.2 样式更加自由的窗口 109
6.4.3 获取窗口 115
6.4.4 窗口事件 116
6.5 编写第一个Chrome应用 117
第7章 文件系统 125
7.1 目录及文件操作对象 126
7.2 获取目录及文件操作对象 127
7.3 读取文件 128
7.4 遍历目录 130
7.5 创建及删除目录和文件 132
7.6 写入文件 134
7.6.1 Typed Array 134
7.6.2 Blob对象 136
7.6.3 FileWriter对象 137
7.7 复制及移动目录和文件 139
第8章 媒体库 140
8.1 获取媒体库 141
8.2 添加及移除媒体库 146
8.3 更新媒体库 148
8.4 获取媒体文件信息 152
第9章 网络通信 154
9.1 UDP协议 155
9.1.1 建立与关闭连接 156
9.1.2 发送与接收数据 158
9.1.3 多播 160
9.1.4 获取socket和组 162
9.1.5 局域网聊天应用 163
9.2 TCP协议 166
9.2.1 建立与关闭连接 167
9.2.2 发送与接收数据 168
9.2.3 获取socket 170
9.3 TCP Server 170
9.3.1 建立与关闭连接 171
9.3.2 监听数据 173
9.3.3 获取socket 174
9.3.4 HTTP Server 175
9.4 WebSocket 178
第10章 其他接口 179
10.1 操作USB设备 180
10.1.1 发现设备 180
10.1.2 接口操作 181
10.1.3 传输操作 182
10.2 串口通信 183
10.2.1 建立连接 183
10.2.2 发送和接收数据 184
10.2.3 获取连接及状态 185
10.3 文字转语音 185
10.3.1 朗读文字 186
10.3.2 获取声音 187
10.3.3 获取朗读状态并监听事件 188
10.4 系统信息 189
附录A 制作Chrome主题 191
A.1 背景图片 193
A.2 颜色 198
A.3 颜色叠加 205
A.4 UI属性 206
A.5 使用My Chrome Theme制作主题 209
附录B CSS选择器 212
B.1 基本选择器 213
B.2 高级选择器 215
B.3 伪类 216
附录C 初识AngularJS 220
C.1 视图 221
C.2 $scope 224
C.3 module与路由 225
附录D Chrome扩展及应用的完整API列表 229
D.1 Chrome扩展的全部API 230
D.2 Chrome应用的全部API 235
|
| 內容試閱：
|
第1章 初步接触Chrome扩展及应用开发
本章首先会对Chrome扩展应用进行简单的概述，然后将带着读者编写一个简单的扩展，使读者对扩展的认识更加深入。在讲解扩展Manifest文件格式时，也会简单讲解一下JSON（JavaScript Object Notation）这一轻量级的数据交换格式，从而避免没有接触过JSON的读者在阅读后续内容时遇到困难。另外，本章还会简单讲解一下DOM，这对从未接触过网页编程的读者会非常有帮助。
1.1 认识Chrome扩展及应用
Chrome是Google公司基于WebKit开发的一款浏览器[1]，但从某种角度上来说，它的作用已经远远超越了浏览器，而是成为了一个平台，甚至是一个操作系统。Chrome继承了WebKit内核对HTML的高速渲染，同时Google自行开发的V8引擎使得JavaScript在Chrome中的执行效率大幅提升，这使得更加高级复杂的JavaScript程序在Chrome中运行成为可能。
Chrome浏览器除了页面渲染速度快、JavaScript执行速度快以外，另一大特点就是支持开发者为其编写各种各样的扩展来扩充其功能，支持用HTML5编写桌面程序，这使得Chrome变得更加强大。编写这样的程序就是本书所要讲解的内容。
由于Chrome扩展和Chrome应用有很多相似之处，为了叙述方便，本章会统一说成Chrome扩展，但读者应该清楚，这些内容同样适用于Chrome应用。
Chrome扩展是一系列文件的集合，这些文件包括HTML文件、CSS样式文件、JavaScript脚本文件、图片等静态文件以及manifest.json。个别扩展还会包含二进制文件，如DLL动态库和so动态库等，但这需要调用NPAPI，而Google出于安全性考虑，已经决定逐渐淘汰NPAPI，所以本书不会向大家介绍有关NPAPI的内容[2]。
安装扩展后，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是一门解释型语言（现代浏览器使用的JavaScript引擎会对JavaScript进行编译，如V8），无需对其配置编译器，因此调试代码时，你只要刷新一下浏览器就可以看到修改后的结果，这使得开发周期大大缩短。
同时，Chrome浏览器比Java虚拟机、Python解释器（Linux和OS
X中默认安装了Python，而Windows中默认没有安装）等其他语言环境更加普及——我甚至可以在我们学校图书馆的计算机中找到Chrome浏览器——所以你所开发的Chrome扩展可以在更多的计算机中运行。当你遇到一个问题需要利用计算机去处理时，而这台计算机恰好安装了Chrome浏览器，那么你就可以欢快地打开记事本开始编写程序了，完成之后加载到Chrome浏览器中就可以查看运行结果，这是一件多么酷的事啊！
别急，后面的内容就会让你掌握这项新技能！
1.2 应用与扩展的区别
Chrome将其平台上的程序分为扩展与应用，并且使用了同样的文件结构，那么两者的区别是什么呢？在早期的Chrome版本中，两者的区别非常模糊，而且有些扩展也可以用应用实现，反之亦然。但今天看来，Google正在努力使两者的界限变得清晰。
总的来说，扩展与浏览器结合得更紧密些，更加强调扩展浏览器功能。而应用无法像扩展一样轻易获取用户在浏览器中浏览的内容并进行更改，实际上应用有更加严格的权限限制，所以应用更像是一个独立的与Chrome浏览器关联不大的程序，此时你可以把Chrome看成是一个开发环境，而不是一个浏览器。
不过到目前为止，Google还没有强制规定只能用扩展做什么，只能用应用做什么，所以对于那些扩展和应用都可以实现的功能，到底用何种方式实现，那是开发者自己的选择。不过我建议大家遵照上述的原则选择实现方式。
除此之外，Chrome应用还分为Hosted App（托管应用）和Packaged App（打包应用），这两者也是有明显区别的。相对而言，Hosted
App更像是一个高级的书签，这种应用只提供一个图标和Manifest文件，在Manifest中声明了此应用的启动页面URL，以及包含的其他页面URL和这些页面请求的高级权限。比如下面的例子创建了一个启动页面为http:mail.google.commail、包含mail.google.commail和www.google.commail且请求unlimitedStorage和notif
ications权限的应用。
{
"name": "Google Mail",
"description": "Read your gmail",
"version": "1",
"app": {
"urls": [
"*:mail.google.commail",
"*:www.google.commail"
],
"launch": {
"web_url": "http:mail.google.commail"
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"unlimitedStorage",
"notif ications"
]
}
Packaged App，顾名思义，就是将所有文件打包在一起的应用，这类应用通常可以在离线时使用，因为它运行所需的全部文件都在本地。
由于Hosted App结构和功能都相对简单，所以本书都将重点讲解Packaged App。
1.3 我的第一个Chrome扩展
我发现很多讲解编程的图书，一开始都会详细地讲解相关的预备知识，而大多数读者却更希望马上进行实践。其实，人们总是对基础知识很排斥，这也是为什么教育行业开始推崇自上向下的教材设计方案了——先让读者看到一个最接近表面的东西，之后再慢慢深入地讲解内在的原理和基础。所以我决定在开始讲解之前，先带大家写一个Demo程序。这样不仅可以让大家在实践中对基础知识掌握得更加牢靠，同时也调动了大家的积极性。
Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中，用户单击后激活扩展进行下一步的操作，也可以干脆没有图标，在后台静默地运行。比如微博的扩展，可以设计成将图标显示在工具栏中，用户点击后打开一个显示用户微博时间轴的界面；RSS订阅器扩展可以设计成将图标显示在地址栏中，当用户点击后，订阅地址栏中当前显示的URL；自动使用Google
SSL链接的扩展可以不显示图标，只是在后台默默地监视，当用户访问了非SSL的Google链接后，自动跳转到SSL链接即可。如图1-1所示。
图1-1 Chrome扩展图标在浏览器中的位置
我们准备编写一款显示用户计算机当前时间的扩展，这应该比Hello
World有趣得多。设计思路是在浏览器的工具栏中显示一个时钟的图标，当用户点击这个图标时显示一个实时显示计算机时间的界面。
首先新建一个名为my_clock的文件夹，在此文件夹中新建一个名为manifest.json的文件，代码如下：
{
"manifest_version": 2,
"name": "我的时钟",
"version": "1.0",
"description": "我的第一个Chrome扩展",
"icons": {
"16": "imagesicon16.png",
"48": "imagesicon48.png",
"128": "imagesicon128.png"
},
"browser_action": {
"default_icon": {
"19": "imagesicon19.png",
"38": "imagesicon38.png"
},
"default_title": "我的时钟",
"default_popup": "popup.html"
}
}
上面的字段中，有些可以一眼看出在定义什么，比如name定义了扩展的名称，version定义了扩展的版本，description定义了扩展的描述，icons定义了扩展相关图标文件的位置。version的值最多可以是由3个圆点分为4段的版本号，每段只能是数字，每段数字不能大于6
5535且不能以0开头（可以是0，但不可以是0123），版本号段左侧为高位，比如1.0.2.0版本比1.0.0.1版本更高。每次更新扩展时，新的版本号必须比之前的版本号高。
browser_action指定扩展的图标放在Chrome的工具栏中，browser_action中的default_icon属性定义了相应图标文件的位置，default_title定义了当用户鼠标悬停于扩展图标上所显示的文字，default_popup则定义了当用户单击扩展图标时所显示页面的文件位置。
接下来我们开始编写popup.html。
html
head
style
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
style
head
body
div id="clock_div"div
script src="jsmy_clock.js"script
body
html
如果你曾经编写过网页，就会发现上面这个页面省略了很多内容，比如title标签。因为对于Chrome扩展来说，很多对网页有意义的内容是无意义的，所以我们可以只挑需要的写，当然你全写出来也不会有什么问题。
上面的这个页面首先定义了全局元素的margin和padding为0，这样我们可以更加自由地控制元素的外观。在编写网页时，body的尺寸往往不会专门给定，但对于Chrome扩展来说，有时这是必要的，比如此例中我们需要告诉Chrome当用户单击扩展图标后展示一个多大的界面。
之后我们在body标签中定义了一个id为clock_div的div容器，用这个容器来显示当前的时间，这样我们就把HTML的布局写好了。接下来我们就需要引入JavaScript处理数据并动态显示了。值得注意的是，Chrome不允许将JavaScript代码段直接内嵌入HTML文档，所以我们需要通过外部引入的方式引用JS文件。当然inline-script也是被禁止的，所以所有元素的事件都需要使用JavaScript代码进行绑定，如果你没有使用一个拥有强大选择器的库（如jQuery），最好给需要绑定事件的元素分配一个id以便进行操作。
下面来编写my_clock.js文件。
function my_clockel{
var today=new Date;
var h=today.getHours;
var m=today.getMinutes;
var s=today.getSeconds;
m=m=10?m:apos;0apos;+m;
s=s=10?s:apos;0apos;+s;
el.innerHTML = h+":"+m+":"+s;
setTimeoutfunction{my_clockel}, 1000;
}
var clock_div = document.getElementByIdapos;clock_divapos;;
my_clockclock_div;
在my_clock.js文件中，我们定义了一个my_clock函数用于显示时间，这个函数包含了一个el参数，这个参数为显示时间的容器，由于在HTML文档中我们设计在id为clock_div的div容器中显示时间，所以调用my_clock函数时我们传入了这个容器，在js文件中用变量clock_div表示。之后my_clock函数1000毫秒之后又会再次调用自身，这样clock_div中显示的时间就会被更新。
至此这个扩展就编写完毕了，文件结构参见图1-2。当然别忘了将图标文件也放入相应的文件夹中。
图1-2 扩展的文件结构
下面我们就需要将这个扩展载入Chrome中运行了。如图1-3所示，依次点击“”—“工具”—“扩展程序”，打开扩展程序页面（也可以直接在地址栏中输入chrome:extensions进入），勾选右上角的“开发者模式”，点击“加载正在开发的扩展程序”，选择扩展所在的文件夹，就可以在浏览器工具栏中看到我们的扩展了。
图1-3 将扩展载入到Chrome中
点击扩展图标后，一个显示时钟的界面就出现了，如图1-4所示。
图1-4 时钟扩展的运行界面
这个扩展的源代码可以通过https:github.comsneezrychrome_extensions_and_apps_programmingtreemastermy_clock下载。
1.4 Manifest文件格式
Chrome扩展都包含一个Manifest文件——manifest.json，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。
Manifest文件使用JSON格式保存数据，为了避免有的读者对JSON不了解而无法继续阅读，下面我将简单介绍一下JSON。JSON是JavaScript
Object
Notation的缩写，是一种基于JavaScript语言的轻量级数据交换格式。由于JSON存储的数据冗余度比XML更低，而且便于读取，所以也被很多其他语言所支持，现在JSON已经成为一种跨平台、跨语言的通用数据交换格式。
JSON包含两种结构：一种是key:value对的形式，名称和值之间用冒号（:）连接，多个key:value对之间用逗号（,）连接，最后在整个对象两侧加上“{”和“}”，如图1-5所示；另一种是值的有序集合，值与值之间用逗号（,）连接，最后在整个数组两侧加上“[”和“]”，如图1-6所示。
图1-5 对象形式的结构（图片来源于www.json.org）
图1-6 数组形式的结构（图片来源于www.json.org）
其中，无论是对象形式还是数组形式，它们的值均可以是字符串、数字、对象、数组、布尔和null中的一种，也就是说，JSON有嵌套的性质，值也可以是JSON格式的数据。
下面是一个JSON的例子：
{
"name" : "Harry Potter",
"author" : {
"name" : "J.K.Rowling",
"birth" : 1964
},
"books" : [
"Harry Potter and the Philosopherapos;s Stone",
"Harry Potter and the Chamber of Secrets",
"Harry Potter and the Prisoner of Azkaban",
"Harry Potter and the Goblet of Fire",
"Harry Potter and the Order of the Phoenix",
"Harry Potter and the Half-Blood Prince",
"Harry Potter and the Deathly Hallows"
]
}
上述例子中的JSON整体是一个对象的形式，这个对象包含3个属性，分别是name、author和books。其中name的值是字符串，为"Harry
Potter"；author的值是一个对象，这个对象有两个属性，分别是name和birth，name的值是字符串，为"J.K.Rowling"，birth的值是数字，为1964，可以说author的值也是一个JSON格式的数据；books的值是数组，这个数组包含7个元素，每个元素都是一个字符串。
接下来我们看看Chrome扩展中Manifest的内容。Google的官方文档中对于扩展和应用给出了两个不同的Manifest介绍界面，这是因为有些属性只能由扩展使用，而有些属性只能由应用使用。如果这两者同时出现在同一个Manifest文件中，就会使Chrome困惑，不知道是按照扩展还是按照应用来对待这个程序。但无论是扩展还是应用，它们的Manifest又有很多共有的属性，所以我决定还是放到一起讲。
Chrome扩展的Manifest必须包含name、version和manifest_version属性，目前来说manifest_version属性值只能为数字2，对于应用来说，还必须包含app属性。
其他常用的可选属性还有browser_action、page_action、background、permissions、options_page、content_scripts，所以我们可以保留一份manifest.json模板，当编写新的扩展时直接填入相应的属性值。如果我们需要的属性不在这个模板中，可以再去查阅官方文档，但我想这样的一份模板可以应对大部分的扩展了。
{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
"default_locale": "en",
"description": "A plain text description",
"icons": {
"16": "imagesicon16.png",
"48": "imagesicon48.png",
"128": "imagesicon128.png"
},
"browser_action": {
"default_icon": {
"19": "imagesicon19.png",
"38": "imagesicon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"page_action": {
"default_icon": {
"19": "imagesicon19.png",
"38": "imagesicon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["http:www.google.com*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
"options_page": "options.html",
"permissions": [
"*:www.google.com*"
],
"web_accessible_resources": [
"images*.png"
]
}
在官方文档中可以找到完整的Manifest属性列表，扩展在https:developer.chrome.comextensionsmanifest，应用在https:developer.chrome.comappsmanifest。由于Google更新得非常频繁，上述页面内容可能会经常变动，但那些比较基本的属性变动的几率不会很大。
1.5 DOM简述
DOM是Document Object
Model的缩写，翻译为文档对象模型，但我觉得这个听起来很生疏，还是直接叫DOM，所以本节的标题就定为了DOM简述。由于Chrome扩展应用使用HTML渲染界面，所以不可避免地要接触DOM。考虑到并非所有读者都编写过HTML，我决定单独拿出一小节来讲解DOM，帮助这些读者快速入门。当然，用短短的一节是无法讲透的——毕竟DOM的内容足以写另外一本书了——这里只是要给大家引出一个方向，浅浅地打下一点基础，深入的学习还需要阅读更加详细的资料。
DOM分为3个不同的部分，分别是核心DOM、XML DOM和HTML DOM，我们主要关心的是HTML DOM，所以我也只讲解HTML
DOM。图1-7给出了HTML DOM的树状结构图，可以看到HTML文档都有一个html根元素。
图1-7 HTML DOM树（图片来源于www.w3school.com.cn）
html根元素又有两个子元素，分别是head和body，所以最简单而完整的HTML文档如下所示：
html
headhead
bodybody
html
这个文档没有任何内容，但拥有HTML完整的结构。在DOM中，每个元素通常是以tag_name的形式开始，并以tag_name的形式结束。在HTML中，有一些特定的tag_name，如div、p、a、form等。
这些元素可以包含一些属性，还可以包含子节点，子节点可以是元素也可以是文本。如：
img src="imagesdog.png"
divHello World!div
上面的例子中，img元素不是以成对的标签形式出现的，而是在标签内部末尾使用“”闭合标签，这样的元素在HTML文档中没有子节点，所以称为自闭标签。类似的元素还有input。
除了自闭标签，其他的标签必须成对出现，并且嵌套规则必须明确，这有点像我们小学时学习数学所使用的括号“”和中括号“[]”。比如下面的嵌套方式是正确的：
divpHello World!pdiv
但下面的例子是错误的：
divpdivp
divpdiv
第一个是嵌套错误；第二个是p标签没有成对出现，标签没有闭合。
有时元素还会拥有属性，比如下面的例子：
input type="text" id="stu_name" value="Billy"
上面这个input有3个属性，分别是type、id和value，type="text"表明这个输入框的类型是文本输入框，id="stu_name"表明给这个元素分配了一个名为stu_name的id，这样可以更加方便地被JavaScript和CSS选择器定位到，value="Billy"表明将这个输入框的默认值设定为Billy。
不同的元素往往拥有不同的属性名，比如对于img元素，通常会包含src属性以指定所显示图片的地址，而input元素往往会包含type属性来描述输入框的类型。
在JavaScript中有多种获取DOM元素的方法，常见的有getElementById、getElementsByName、getElementsByTagName、getElementsByClassName，分别是通过id、name、标签名和类名获取元素。
请注意，上面提到的4种方法中，第一个方法名中是Element，而后面的都是Elements。这是因为HTML中元素的id必须是唯一的，但是不同的元素可以拥有同样的name、标签名和类名，所以通过第一种方式获取的是一个元素，而后面几种方法获取的是一个包含多个元素的数组。值得强调的是，即使HTML中只有一个元素的name为"my_element"，那么通过getElementsByNameapos;my_elementapos;获取到的也是数组型的数据——虽然这个数组只包含一个元素。
JavaScript可以通过getAttribute方法读取元素的属性，通过setAttribute方法添加或更改元素的属性，通过removeAttribute方法删除元素的属性。对于非自定义的属性，JavaScript可以直接像读取对象属性那样读取或更改它们，比如：
var imgurl = document.getElementByIdapos;my_imageapos;.src;
document.getElementByIdapos;my_another_imageapos;.src = imgurl;
var imgurl =
document.getElementByIdapos;my_imageapos;.getAttributeapos;srcapos;;
document.getElementByIdapos;my_another_imageapos;.setAttributeapos;srcapos;,
imgurl;
CSS的选择器基本分为3种，分别是tagName、.className和#id。如下面的例子：
p {
width: 200px;
}
.postlist {
width: 150px;
}
#footer {
width: 100px;
}
分别定义了p标签元素宽度为200像素，类名为postlist的元素宽度为150像素，id为footer的元素宽度为100像素。这个样式表分别作用于以下元素：
pp
div class="postlist"div
div id="footer"div
CSS选择器还可以通过元素属性进行定位，比如下面的例子可以作用于所有的文本输入框：
input[type="text"] {
font-size: 16px;
}
更多关于DOM的知识可以参阅http:www.w3school.com.cnhtmldom。
1.6 调试方法与代码质量
通过前面的介绍，相信读者已经对Chrome扩展和应用的开发有了初步的认识，本节将介绍Chrome扩展的调试方法与代码质量。
Chrome扩展的调试方法与一般的前端调试方法相同，均可通过Chrome提供的控制台查看debug信息。
通常我们在调试前端代码时，通过右键菜单中的“审查元素”，或者通过快捷键Ctrl+Shift+J（OS
X系统使用Command+Option+J）唤出控制台。对于提供Popup窗口的扩展，我们同样可以在Popup页面上通过右键菜单中的“审查元素”打开控制台对Popup页面进行调试，也可以在扩展图标上点击右键，选择“审查弹出内容”，不过背景页面需要通过其他方式进入控制台。
对于背景页面的调试，我们首先需要进入扩展程序管理页面，可以通过“工具”—“扩展程序”进入，也可以直接在地址栏中输入chrome:extensions进入，之后通过点击相应扩展的“背景页”链接唤出控制台，对后台页面进行调试。
如图1-8所示，通过控制台可以看到背景页输出的debug信息，通过debug信息得知此应用没有成功建立socket，通过后续分析得知端口被占用。
图1-8 调试背景页面
通过console.log可以输出debug信息，比如：
console.logapos;Hello World.apos;;
上述代码运行后，可以看到控制台输出“Hello World.”（见图1-9）。
图1-9 输出debug信息到控制台
我们还可以通过控制台提供的命令行直接运行JavaScript语句，这样就可以在不重载扩展的情况下动态调试代码，非常方便。
由于Chrome扩展是一个本地化的程序，相比于单纯的前端页面，它所提供的功能更加复杂，所以编写高性能的JavaScript是必要的。对于大型程序，往往需要多人合作开发，所以必要时应考虑JavaScript代码编写规范，编写可维护的JavaScript。在此推荐两本经典著作：《高性能JavaScript》和《编写可维护的JavaScript》。这两本著作分别详细讲解了JavaScript运行原理及高性能代码的实现，以及JavaScript的编写规范。虽然很多讲解JavaScript的书都多多少少会讲解到JavaScript代码高性能和可维护这两个方面，有的讲解Node.js的书也会介绍，但在此还是建议读者认真去品味上述两本著作，相信会让你有不同的感悟。
另外Google提供了Closure
Compiler服务，该服务不仅对代码进行压缩，而且还会出于提高性能的考虑对代码进行优化，压缩后的代码在一定程度上也有加密的作用。
Closure
Compiler服务可以在线通过http:closure-compiler.appspot.comhome使用，也可以通过https:github.comgoogleclosure-compiler获取Closure
Compiler的源码。
[1] Chrome 28之后使用的Blink渲染引擎是WebKit中WebCore组件的一个分支。
[2] Google提出了NaCl（Native
Client）取代NPAPI，感兴趣的读者请自行参见https:developer.chrome.comnative-client了解相关内容。
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
