(chrome应用开发三步曲.docVIP

　【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开发，