Chrome扩展及应用开发[试读]

本章首先会对Chrome扩展应用进行简单的概述，然后将带着读者编写一个简单的扩展，使读者对扩展的认识更加深入。在讲解扩展Manifest文件格式时，也会简单讲解一下JSON（JavaScript Object Notation）这一轻量级的数据交换格式，从而避免没有接触过JSON的读者在阅读后续内容时遇到困难。另外，本章还会简单讲解一下DOM，这对从未接触过网页编程的读者会非常有帮助。 1.1 认识Chrome扩展及应用 Chrome是Google公司基于WebKit开发的一款浏览器[1]，但从某种角度上来说，它的作用已经远远超越了浏览器，而是成为了一个平台，甚至是一个操作系统。Ch... 查看全部[ 1.1 认识Chrome扩展及应用 ]

Chrome将其平台上的程序分为扩展与应用，并且使用了同样的文件结构，那么两者的区别是什么呢？在早期的Chrome版本中，两者的区别非常模糊，而且有些扩展也可以用应用实现，反之亦然。但今天看来，Google正在努力使两者的界限变得清晰。 总的来说，扩展与浏览器结合得更紧密些，更加强调扩展浏览器功能。而应用无法像扩展一样轻易获取用户在浏览器中浏览的内容并进行更改，实际上应用有更加严格的权限限制，所以应用更像是一个独立的与Chrome浏览器关联不大的程序，此时你可以把Chrome看成是一个开发环境，而不是一个浏览器。 不过到目前为止，Google还没有强制规定只能用扩展做什么，只能用应用做什么... 查看全部[ 1.2 应用与扩展的区别 ]

我发现很多讲解编程的图书，一开始都会详细地讲解相关的预备知识，而大多数读者却更希望马上进行实践。其实，人们总是对基础知识很排斥，这也是为什么教育行业开始推崇自上向下的教材设计方案了——先让读者看到一个最接近表面的东西，之后再慢慢深入地讲解内在的原理和基础。所以我决定在开始讲解之前，先带大家写一个Demo程序。这样不仅可以让大家在实践中对基础知识掌握得更加牢靠，同时也调动了大家的积极性。 Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中，用户单击后激活扩展进行下一步的操作，也可以干脆没有图标，在后台静默地运行。比如微博的扩展，可以设计成将图标显示在工具栏中，用户点击后打开一个显示用户微... 查看全部[ 1.3 我的第一个Chrome扩展 ]

Chrome扩展都包含一个Manifest文件——manifest.json，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。 Manifest文件使用JSON格式保存数据，为了避免有的读者对JSON不了解而无法继续阅读，下面我将简单介绍一下JSON。JSON是JavaScript Object Notation的缩写，是一种基于JavaScript语言的轻量级数据交换格式。由于JSON存储的数据冗余度比XML更低，而且便于读取，所以也被很多其他语言所支持，现在JSON已经成为一种跨平台、跨语言的通用数据交换格式。 JSO... 查看全部[ 1.4 Manifest文件格式 ]

DOM是Document Object Model的缩写，翻译为文档对象模型，但我觉得这个听起来很生疏，还是直接叫DOM，所以本节的标题就定为了DOM简述。由于Chrome扩展应用使用HTML渲染界面，所以不可避免地要接触DOM。考虑到并非所有读者都编写过HTML，我决定单独拿出一小节来讲解DOM，帮助这些读者快速入门。当然，用短短的一节是无法讲透的——毕竟DOM的内容足以写另外一本书了——这里只是要给大家引出一个方向，浅浅地打下一点基础，深入的学习还需要阅读更加详细的资料。 DOM分为3个不同的部分，分别是核心DOM、XML DOM和HTML DOM，我们主要关心的是HTML DOM，... 查看全部[ 1.5 DOM简述 ]

通过前面的介绍，相信读者已经对Chrome扩展和应用的开发有了初步的认识，本节将介绍Chrome扩展的调试方法与代码质量。 Chrome扩展的调试方法与一般的前端调试方法相同，均可通过Chrome提供的控制台查看debug信息。 通常我们在调试前端代码时，通过右键菜单中的“审查元素”，或者通过快捷键Ctrl+Shift+J（OS X系统使用Command+Option+J）唤出控制台。对于提供Popup窗口的扩展，我们同样可以在Popup页面上通过右键菜单中的“审查元素”打开控制台对Popup页面进行调试，也可以在扩展图标上点击右键，选择“审查弹出内容”，不过背景页面需要通过其他方式进入控... 查看全部[ 1.6 调试方法与代码质量 ]