【IT168技术】作为谷歌推出和一项重要的互联网应用产品，Chrome以一个开放的姿态迎来发展的重要阶段。Chrome浏览器以快速、安全、稳定给广大的消费者带来完美的互联网体验。如今应用为王的时代已经到来，作为平台如何能够获取开发者的支持，如何提供更多，更丰富的应用产品是消费者非常关心的话题。
Chrome的开放性给开发者提供了展示自我的机会，开发者可以通过自己开发应用程序，上传到Chrome的应用商店，利用Chrome浏览器带来的巨大流量，获得更多的收益。
国内的众多开放平台虽然都在以开放的姿态吸引广大的开发者，但是往往会同时扮演裁判和运动员的双重角色，让开发者有时候会陷入无奈的境地。谷歌作为一个互联网服务提供商，互联网服务是一个重要的收入来源，因此开发者大可不必有这方面的忧虑。
在介绍了Chrome平台的优势之后，向开发者介绍如何在Chrome平台上进行入门开发，希望能够让初级入门开发者能够了解Chrome平台开发的基础知识，为后续的开发工作做铺垫。
一、开发工具和示例演示
在开发工具方面，给开发者介绍利用Chrome自带的一系列开发人员工具对插件进行调试，也可用于其他网页开发。
首先开发者可以在左边的菜单中可以找到“开发人员工具”。
当前的Chrome版本是6.0.401.1 (正式版本 47018) beta，开发工具界面如下：
一般比较常用的是第一个Elements、第三个Scripts工具、Storage工具和Console。其他工具可以，帮助你分析哪些元素影响页面加载速度等。
调出插件页面
Chrome所提供的这些工具都是针对网页的，而插件也是一个网页，那问题是怎么调出这些插件呢(比如在单个标签页显示你的popup.html页面)。
首先打开“扩展程序”页面，开启开发人员模式。
这时你会看到所有插件的唯一ID。
假设你的ID是abcdef,那么在Chrome里你的插件目录就是：chrome-extension://abcdef/
如果你的插件根目录下有个popup.html (插件栏点击后弹出的页面)，那么你可以使用这个地址进行访问。chrome-extension://abcdef/popup.html
如果你这个插件需要长时间开发，不妨加个书签。
后台页面或者其他页面都可以用这种方式让他显示在新标签中。
下图是迅雷自动破解插件的popup页面的开发截图。
Elements工具
这个工具主要用来调试页面布局(CSS),可以在不修改源代码的情况下对单个元素或特定class\id添加样式。
1、查看元素区域
如下图，在此界面下，页面源代码的层次结构非常清楚。点击某个标签，页面中该标签生效的区域会出现蓝色高亮。
这时右栏将显示该标签所使用的CSS，包括你内嵌的CSS和Chrome对标签的默认渲染样式。
上图中，在鼠标所指示的位置双击，可以出现一文本框，在文本框里可以输入希望当前选中标签所应用的新样式，回车确认输入。
如果你回车后，输入被清除了，那就请检查下是否有拼写错误或者是不受支持的css属性。
右栏中某些样式后面有个选择框(如上图中黑色背景代码后面)，更改此状态可以选择是否应用此样式(而不需要删除)。另外有些样式并不允许你禁用，我认为这些是浏览器的自动属性，或者受保护的页面。
2、审查元素代码
上面介绍的是怎么通过代码查看元素，也可也通过元素查看相关的代码区域。方法是在需要查看的元素上，点击鼠标右键，选择“审查元素”。
直接能够定位到这个元素
Scripts工具
这个工具可以监视JS代码中的变量,设置断点,单步执行.对调试JS逻辑错误非常方便。
Storage工具
这个工具可以查看页面的Storage数据和cookies数据。我写的几个插件一般使用Storage存储用户选项，这样用户在清除浏览器Cookies时也不会丢失插件设置。
Console工具
这也是个JavaScript调试工具，在Script界面下也可也看到。
Resources工具
这个工具可以分析页面加载时各个元素载入顺序和时间(比如好多图片和JS到底哪个先被下载)。
二、 Chrome扩展开发简介
Chrome扩展特色：
1、每个扩展独立进程，安全
2、Chrome自动升级，最新最高效
3、扩展自动升级，无需重启浏览器
4、简单的跨域http请求
5、监听浏览器事件
6、对所浏览网页完全控制权，甚至可以干扰页面脚本
7、浏览器关闭后扩展仍然后台运行
8、NPAPI Plugins与操作系统交互(Win)
9、标准Web开发，无需顾及兼容性，完美支持CSS3、HTML5等最新特性
三、开发流程
Chrome扩展核心文件是根目录下的 manifest.json 文件，此文件描述了扩展的基本属性，某些功能对应的脚本，以及申请扩展所需的权限。
1. 最简单的扩展
首先创建一个目录，这个目录相当于网站根目录，最终会打包发布给用户。
根目录下必须有 manifest.json 这一文件，编码格式为 UTF-8 无BOM 。文本内容为json格式，且至少包含 name 和 version
这就是最简单的Chrome扩展了，什么也没有!
2. 定义功能脚本
Chrome扩展的主要功能都可以通过javascript完成，目前最常用3种方案是：后台页面，popup页面，和网页注入。后台页面中的脚本会在Chrome打开后立即执行，popup是浏览器扩展栏图标点击后显示的页面，网页注入可以在浏览特定网页时操作页面dom或者简体鼠标/键盘事件。
Chrome还提供监听地址栏(Omni box)等的api，完整设置可以在这里看到。
3. Hello Chrome
在 manifest.json 定义好后，在Chrome里打开扩展管理页面，在右上角打开开发者模式，点击“载入正在开发的扩展程序”
选择刚才创建的目录，扩展会被立即载入并执行background里的脚本。
如果以后的开发改动了任何代码都应尽量点击“重新载入”(刷新所改动的页面也可以)。
4. 发布
大部分扩展会直接发布到官方扩展中心(Chrome网上商店)，Chrome扩展也支持自己打包并托管(请别人测试会非常有用)。上传到官方网站可以和自己的域名绑定，并提供统计和反馈平台，但步骤比较繁琐，有时甚至会因为大陆网络无法访问。需要注意的一点是提交时上传的是根目录的zip包，每次上传都要使version更大.
四、 开发资源
对于开发者来说，在学习任何平台开发之前都需要收集一些文档，而做Chrome开发，最有帮助的资源就是官方文档http://code.google.com/Chrome/extensions/getstarted.html，Chrome升级后最新出现的api也会最早在这里发布。
官方文档有多个版本，对应于不同的Chrome版本分支 Stable、Beta、Dev。也会有一些体验性的API可以尝试，但不应该发布给用户，因为这些api随时可能会被取消。
360极速版(Chrome换皮肤版?)团队做了个中文本开发文档，http://open.Chrome.360.cn/html/dev_doc.html。目前看来和官方接口非常统一，但不会即时更新(他的Chrome核心都会远远落后官方版)，建议开发者做初期开发时可以用来熟悉接口规范。
