Chrome扩展及应用开发清晰带图书签电子版pdf

之前看到有个同样的资源但没有图片，找了好久搞了一个图片版，做了下书签，希望对大家有帮助。写入文件对象对象复制及移动目录和文件第章媒体库获取媒体库添加及移除媒体库更新媒体库获取媒体文件信息第章网络通信协议建立与关闭连接发送与接收数据多播获取和组局域网聊天应用协议建立与关闭连接发送与接收数据获取建立与关闭连接监听数据获取第章其他接口操作设备发现设备操作接口操作传输串口通信建立连接发送和接收数据获取连接及状态文字转语音朗读文字获取声音获取朗读状态及监听事件系统信息附录制作主题附录附录初识视图与路由附录扩展及应用完整列表扩展全部应用全部此书电子版免费供大家下载阅读,如果您已为此副本付费,请立即申请退款并联系作者举报此行为。请注意,虽然此书电子版免费供大家阅读,但这并不代表作者放弃了版权,您在未经授权的情况下依然不得以任何方式复制或抄袭本书内容。此书的电子版目前仅授权图灵社区和百度阅读两个平台发布,如果您通过其他渠道获取到了此副本,则是侵权行为,请到上述两个平台下载合法授权的副本。获取合法授权副本的好处是可以及时得到此书的最新版本,早期版本中的错误会被及时纠正。感谢您对版权保护工作所做出的贡献。个电子专业的在校茡生,每天学习的是电子在晶格中如何游走,研究的是半导体詈件的电学特性,无论如何都不会与这本书的作者联系在一起。说起来写这本书非常偶然,在某一天我就想弓点什么了,想写点很多人都会看的东西,作为人生中的一个成就。虽然我的专业是电子,但编程一直都是我最大的爱好,前端更是我最熟悉的领域。作为的追随者,我是第一批使用浏览器的用户,并在推出扩展功能后较早投入到其中的开发者之一,所以开发自然就成为了我写作的选题。这本书诞生于图灵社区,图灵社区的写作氛围很好,而且在线编辑器支持语法。在开始我并不好意思直接说写的是书,直到定稿前夕我才把文集二字改成了书。回顾几个月之前,一拍脑门夹着笔记本就去图书馆开写了,在写作的过程中遇到一个又一个坑,有时为了让一个实例跑通要调上一整个下午,如果当初我知道会遇到这么多困难想来是不会动笔的。但既然动笔了,半途而废着实没有颜面,所以就一直坚持到了最后。写作对个人能力的提升是非常大的,由于每一个知识点都必须咬死,不可含糊其辞,所以我在写作的过程中不得不一遍遍仔细翻阋官方开发文档和标准,同时还要编写实例进行验证。值得庆幸的是,这本书还没有完成就得到了很多读者的关注,他们给了我很大的鼓励,有的读者还表示可以无私帮我校审书稿。在此我要重点感谢方觉,大家可能对这个名字并不熟悉,但他创建和维护的相信开发扩展和应用的开发者没有几个不知道这本教程也参考和引用了上面的部分内容。他不仅仅对本书的语言表述进行了仔细认真的推敲,而且还纠正了一些知识点中的错误,包括官方文档中同样岀现的错误,这让我感到十分惊讶,后来才发现他还是项目的贡献者,这更是令我敬佩不已。吕鹏和李典是我很早就在互联网上结识的朋友。吕鹏同学和我-直在一起鼓捣些小程序,都说能找到志同道合的小伙伴不易,我十分庆幸能在广阔的互联网中与他结识。最初我认识吕鹏时他还是大二的在校生,转眼已是微软的大牛,我也为能有如此优秀的朋友感到自豪。在我刚刚开始写独立博客时,李典同学就成为了我的读者,虽然他一直躲在后面。李典同学是第一个为此书提交勘误表的读者,在早先他为我的个项目贡献代码时,我就发现他是一个做事十分认真的人,这次也不例外至于后来我将他的勘误表作为样板发给了参与校审的每一位读者。参与校审的还有赵余和韩骏,在此一并表示感谢!另外不得不提的是,我在设计此书的封面时,使用了的摄影作品,海龟。他在得知我要将这幅作品用于此书的封面设计后,慷慨地授权我免费使用,在此也向他表达诚挚的感谢!作者水平有限,书中不免出现错误,欢迎读者朋友指正。您可以通过与作者联系,也可以通过图灵社区在线提交勘误信息,在此先行感谢。第章初步接触扩展应用开发公司基于开发的一款浏览器,但从某种角度上来说它已经超越了浏览器成为了一个平台甚至是一个操作系统。继承了内核对的高速渲染,同时自行开发的引擎使得在中的执行效率大幅提升,这使得更加高级复杂的程序在中运行成为可能。之后使用的渲染引擎是组件的一个分支。浏览器除了页面渲染速度快挾行速度快以外,另一大特点就是支持开发者为其编写各种各样的扩展来扩充其功能,用编写桌面程序,这使得变得更加强大。编写这样的程序就是本书所要讲解的内容。本章首先对扩展应用进行简单概述,之后带着读者编写一个简单的扩展,使读者对扩展的认识更加深入。在讲解扩展文件格式时,也会简单讲解一数据格式,避免没有接触过的读者阅读后续的内容产生困难。另外本章也用一小、节简单讲解了一下,这对从未接触过网页编程的读者会非常有帮助。是一种轻量级的数据交换格式。认识扩展及应用扩展是用于扩充浏览器功能的程序应用是以为平台运行的程序,两者似乎并没有太明确的区别,甚至有些程序既可以设计成扩展也可以设计成应用。但既然将基平台的程序分为了两类,说明两者还是有区别的。扩展主要用于对浏览器功能的增强,它更强调与浏览噩相结合。比如扩展可以在浏览器的工具栏和地址栏中显示图标,它可以更改用户当前浏览的网页中的内容,也可以更改浏览器代理服务器的设置应用更强调是独立的程序,你可以不打开浏览器而运行这些程序。同时这些程序可以调用更底层的系统接口,比如串口本地文件读写等等。同时应用可以拥有样式吏加自由的独立窗口,而扩展的界面只能限定在浏览器窗口中。由于扩展和应用有很多相似之处,为了叙述方便本章会统一说成扩展,但应该清楚同样适用于应用。扩展是一系列文件的集合,这些文件包括文件、样式文件、脚本文件、图片等静态文件以及。个别扩展还会包含二进制文件,如动态库和动态库等,但这需要调用关而出于安全性考虑已经决定逐渐淘汰,所以我不准备在本书中向大家介绍有的内容扩展被安装后就会读取扩展中的文件。这个文件的文件名固定为内容是按照一定格式描述的扩展相关信息,如扩展名称、版本、更新地址、请求的权限、扩展的界面入口等等。就可以知道在浏览器中如何呈现这个扩展,以及这个扩展如何同用户进行交互。由于扩展是基于平台的,说得直白些,是基于浏览器的当然有些更加高级的接口不仅仅依赖于浏览器所以扩展在处理逻辑运算和实现程序功能吋所采用的编程语言必然「能怎么会脫离网站而成为一种程房怎开始是为提升网站与用户交互体验而设计出的一种轻量级脚本言可能你会感到惊讶,毕竟逻辑语言呢?随着浏览器引擎的出现执行效率得到了大幅提升,甚至出现了将其作为后端语言的项目。所以将乍为一种客户端程序语言就更是绰绰有余了只要提供吏加丰富的功能函数而平台正提供了这样的环境。总的来说扩展更像是一个运行于本地的网站,只是它可以利用台提供的丰富的接口,获得更加全面的信息,进行更加复杂的操作。而它的界面则使用和进行描述,这样的好处是可以用很短的时间构建出賞心悦目的。界面的渲染完全不需要开发者操心,而是交给去做。同时由是一门解释语言,无需对其配置编译器,调试代码时你只要刷新一下浏览器就可以看到修改后的结果,这使得开发周期大大缩短。现代浏览器使用的引擎会对编译,同浏览器相比于虛拟机、解释器(和中默认安装了而中默认没有安装〕等其他语言环境更加普及我甚至可以在我们学校的图书馆计算机中找至浏览器所以你所开发的扩展就可以在更多的计算机中运行。当你眼前遇到一个问题需要利用计算机去处理,而这台计算机恰好安装了浏览器,那么你就可以欢快地打开记事本开始编写程序了,之后加载到浏览器中就可以查看运行结果,这是一件多么酷的事啊别急,后面的内容就会让你得到这项新技能我的第一个扩展我发现很多讲解编程的书籍,在前面都会详细地讲解相关的预备知识,而大多数读者却更希望马上进行实践。没错,人们总是对基础知识很排斥,这也就是为什么在教育行业开始推崇自顶向下的教材设计方案了先让读者看到一个最接近表面的东西,之后再慢慢深入地讲解内在的原理和基础。所以我决定在还没有讲什么的时候,先带大家写一个程序。这样不仅可以让大家在实践中对基础知识掌握得更加牢靠,同时也调动了大家的积极性扩展的启动入口可以在浏览器的工具栏和地址栏中,用户单击后激活扩展进行下一步的操作,也可以干脆没有图标,在后台静默地运行。比如微博的扩展,可以计成将图标显示在工具栏中,用户点击后打开一个显示用户微博时间轴的界面;订阅器扩展可以设计成将图标显示在地址栏中,当用户点击后,订阅地址栏中当前显示的自动使用链接的扩展可以不显示图标,只是在后台默默地监视,当用户访问了非的链接后,自动跳转到链接即可。安品三☆扩展图标在浏览器中的位置我们准备编写一款显示用户计算机当前时间的扩展,这应该比有越得多。设计思路是在浏览〓的具栏中显示一个时钟的图标,当用户点击这个图标时显示一个实时显示计算机时间的界面。首先新建一个名为的文件夹,在此文件夹中新建一个名为的文件,内容如下manifest version":2name":"我的时钟",versiondescription":"我的第一个 Chrome扩展",icons":i16 :images/icon16 png",48":images/icon48 png",128":images/icon128 pngbrowser actiondefault icon19:images/icon19 png",38:images/icon38 png" default title":"我的时钟",default popup":popup. html上面的字段有些我们可以一眼看出在定义什么;比如name定义了扩展的名称, version定义了扩展的版本, description定义了扩展的描述, Icons定义了扩展相关图标文件的位置。 version的值最多可以是由三个圆点分为四段的版本号,每段只能是数字,每段数字不能大于且不能以开头(可以是,但不可,版本号段左侧为高位,比如版本比版本更高。每次更新扩展时,新的版本号必须比之前的版本号高browser action指定扩展的图标放在的工具栏中, browser action中的 default icon属性定义了相应图标文件的位置, default title定义了当用户鼠标悬停于扩展图标上所显示的文字, defau1t_ popup则定义了当用户单击扩展图标时所显示页面的文件位置。接下来我们开始编写如果你曾经编写过网页,会发现上面这个页面省略了很多内容,比如标签。因为对于扩展来说,很多对网页有意义的内容是无意义的,所以我们可以只挑需要的写,当然你全写出来也不会有什么问题上面的这个页面首先定义了全局元素的 margin和 padding为,这样我们可以更加自由地控制元素的外观。在编写网页时,boy的尺寸往往不会专门给定,但对于扩展有时这是必要的,比如此例中我们需要诉当用户单击扩展图标后展示一个多大的界面。之后我们在body标签中定义了一个id为c1 ock diy的dv容器,用这个容器来显示当前的时间,这样我们就把的布局写好了。接下来我们就需要引入处理数据并动态显示了。值得注意的是不允许将代码段直接内嵌入文档,所以我们需婁通过外部引入的方式引用文件。然 inline- script也是被禁止的,所以所有元素的事件都需要使用代码进行绑定,如果你没有使用一个拥有强大选择器的库(如),最好给需要绑定事件的元素分配一个id以便进行操作。下面来编写文件。function my clock(el)fvar today=new Datevar h=today. getHours o;var m=today. getMinuteso)var s=today. getseconds()m=m>=16?m:("’+m)s=s>=10?s:(""+s);el innerHTmL h+": +m+":+5:setTimeout(function(my clock(el)), 1000);var clock div document getElementById('clock div);my clock(clock_ div);在文件中我们定义了一个myc1ock函数用于显示时间,这个函数包含了一个e1参数,这个参数为显示时间的容器,由于在文档中我们没计在id为c1ock_div的div容器中显示时间,所以调用myc1ock函数时我们传入了这个容器,在文件中用变量 clock div表示。之后mc1ock函数毫秒之后又会再次调用自身,这样 clock div中显示的时间就会被更新夲此这个扩展就编写完毕了,当然别忘了将图标文件也放入相应的文件夹中。b my clock I[燃出鳃*包到料中享实名修改日期大小是下吧围1B/1/2013120.文件最近方的位置1a/3o/201311:5文件夹回奠L manifestisonI0/30/201311:51soN文件E popup. html10/31/2013 12:0 Chrome HTML D1 KB扩展的文件结构下面我们就需要将这个扩展载入中运行了。依次点击工具扩展程序打开扩展程序页面(也可以直接在地址栏中输入进入),勾选右上角的开发者模式,点击加载正在开发的扩展程序,选择扩展所在的文件夹,就可以在浏览器工具栏中看到我们的扩展了。扩展程序开发者模式加數正在开发的属程序。打包扩属得序立即更新扩屏程序我的时钟10已启用台我的第一个 Chrome扩展权园ID: Ichngpfibmefaagnilfkngddgchkbnbo来源: CAUsers\ Sneezy Desktop\my_clock显示按租口在障身模式下启用里斩加数t+R将扩展载入到中当鼠标点击扩展图标后,一个显示时钟的界面就出现了。开新的标签页X书签0:29:20严时钟扩展的运行界面这个扩展的源代码可以通