当读完了这个综述和入门之后，就可以开始创建应用（扩展）和WebApp了。
注意：WebApp是通过应用（扩展）的方式实现的，所以除非特别声明，本页所有内容都适用于WebApp。
一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。 应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。
应用（扩展）可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用（扩展）还可以访问浏览器提供的内部功能，例如标签或书签等。
应用（扩展）的界面
很多应用（不包括WebApp）会以browser action或page action的形式在浏览器界面上展现出来。每个应用（扩展）最多可以有一个browser action或page action。当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。
这个gmail提醒应用使用了browser action，它在工具栏上增加一个图标
这个新闻阅读应用也使用了browser action，当点击时会弹出一个气泡窗口
这个地图应用使用了page action和content script（注入到页面内执行的脚本）
应用也可以通过其它方式提供界面，比如加入到上下文菜单，提供一个选项页面或者用一个content script改变页面的显示等。可以在"开发指南"中找到应用（扩展）特性的完整列表以及实现的细节。
WebApp界面
一个WebApp通常会打包一个包含了主要功能的html页面进来。例如下图中这个WebApp在HTML页面中显示了一个flash文件。
更多信息，查看
每个应用（扩展）都应该包含下面的文件：
一个manifest文件
一个或多个html文件（除非这个应用是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片
在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用,上传应用（扩展），可以自动生成.crx文件。
任何需要的文件都可以放到应用（扩展）中，但是怎么使用它们呢？一般的说，可以像在普通的HTML文件中那样使用相对地址来引用一个文件。下面的例子演示了如何引用images子目录下的文件myimage.png
&img src="images/myimage.png"&
如果使用360极速版内置的调试器（开发人员工具），可以看到每一个应用（扩展）中的文件也可以用一个绝对路径来表示：chrome-extension://&extensionID&/&pathToFile&
在这个URL中，是为每一个应用（扩展）生成的唯一ID。从chrome://extensions页面中可以看到已经安装的所有应用（扩展）的唯一ID。是文件在应用（扩展）目录下的路径，也就是它的相对路径。
在这个URL中，名为manifest.json的文件包含了应用（扩展）的基本信息，例如最重要的文件列表，应用（扩展）所需要的权限等。下面是一个典型的应用（扩展），使用了browser action并访问google.com
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": { "128": "icon_128.png" },
"background_page": "bg.html",
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
详细信息，参考
绝大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。
上图显示了安装了两个应用（扩展）的浏览器。两个应用（扩展）分别是黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。
背景页面并不是应用（扩展）中唯一的页面。例如，一个browser action可以包含一个弹窗(popup)，而弹窗就是用html页面实现的。应用（扩展）还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。
应用（扩展）里面的HTML页面可以互相访问各自DOM树中的全部元素，或者互相调用其中的函数。
下图显示了一个browser action的弹窗的架构。弹窗的内容是由HTML文件（popup.html）定义的web页面。它不必复制背景页面(background.html)里的代码,因为它可以直接调用背景页面中的函数。
更多细节可以参考
如果一个应用（扩展）需要与web页面交互，那么就需要使用一个content script。Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本。可以将content script看作是网页的一部分，而不是它所在的应用（扩展）的一部分。
Content script可以获得浏览器所访问的web页面的详细信息，并可以对页面做出修改。下图显示了一个content script可以读取并修改当前页面的DOM树。但是它并不能修改它所在应用（扩展）的背景页面的DOM树。
Content script与它所在的应用（扩展）并不是完全没有联系。一个content script脚本可以与所在的应用（扩展）交换消息，如下图所示。例如，当一个content script从页面中发现一个RSS种子时，它可以发送一条消息。或者由背景页面发送一条消息，要求content script修改一个网页的内容。
更多的信息可以查看
一个应用（扩展）中的HTML页面间经常需要互相通信。由于一个应用（扩展）的所有页面是在同一个进程的同一个线程中运行的，因此它们之间可以直接互相调用各自的函数。
可以使用中的方法来获取应用（扩展）中的页面，例如getViews()和getBackgroundPage()。一旦一个页面得到了对应用（扩展）中其它页面的引用，它就可以调用被引用页面中的函数，并操作被引用页面的DOM树。
保存数据和隐身模式
应用（扩展）可以使用HTML5的 （例如localStorage）来保存数据，或者向服务器发出请求来保存数据。当需要保存数据的时候，首先需要确定是否从隐身模式窗口中发出的请求。缺省情况下，应用（扩展）是不会运行在隐身模式下的，而webapp是会的。需要明确用户在隐身模式下究竟需要应用（扩展）或webapp做什么。
隐身模式保证在该窗口下浏览不会留下痕迹。当处理隐身窗口的数据时，一定要遵循这个前提。例如，如果一个的应用（扩展）的功能是将浏览历史保存在云端（服务器），那么不要保存隐身模式下的浏览历史。另一方面，任何窗口下都可以保存应用（扩展）的数据，不论是否隐身。
重要规则：如果一条数据可能表明用户在网上看了什么或做了什么，不要在隐身模式下保存它。
要检查窗口是否在隐身模式下，检查Tab或Window对象的incognito属性。例如：
var bgPage = chrome.extension.getBackgroundPage();
function saveTabData(tab, data) {
if (tab.incognito) {
bgPage[tab.url] =
// Persist data ONLY in memory
localStorage[tab.url] = // OK to store data
现在应用（扩展）的基本知识已经介绍完了，可以开始写自己的应用（扩展）了。更多的信息可以参考：有开发过Chrome扩展的童鞋么?请问下大家的应用是怎么发布到Chrome Web Store的呢?
16:37:20 +08:00 · 2348 次点击
现在开发者认证需要$5的认证费用,我的两张外币信用卡Visa和Master都试过了,Google Wallet现在不支持天朝了 =.=试问下发布过应用的朋友是怎么操作的捏?谢啦~~
11 回复 &| &直到
08:00:00 +08:00
& & 16:47:33 +08:00
试试看财付通的虚拟运通卡？
& & 16:52:36 +08:00
@ 试过了,也不行的哦~~!
& & 16:55:30 +08:00
同疑问。我还试过国外的visa，美国地址美国卡，甚至新注册google帐号都不能支付成功。实在让我汗颜
& & 16:58:17 +08:00
额，忘记了……好像是直接就支付了
& & 17:27:08 +08:00
@ 人肉墙外?
& & & 17:28:31 +08:00
不能选香港了？
& & 22:18:18 +08:00
@ 没有，我记得是选了别的地区，貌似是香港，然后就扣费成功了
& & 23:07:24 +08:00
用的是招商银行的双币Master金卡，木有问题……
地址找个美国朋友挂靠的……
& & 03:30:30 +08:00
这两天好像付款有问题
& & 09:08:43 +08:00
最近的发布者验证确实有问题,等待下个Release修复吧
& & 09:11:14 +08:00
另外发现,dashboard中的扩展和应用是点击删除是不起作用的,必须在控制台调用一条JavaScript...
cxDeleteItem(itemid)
这条语句现在也不能执行...
好冷...
& · & 2016 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 59ms · UTC 14:30 · PVG 22:30 · LAX 06:30 · JFK 09:30? Do have faith in what you're doing.如何成为一名Chrome应用开发者 - 简书
如何成为一名Chrome应用开发者
Chrome网上应用店
Chrome网上应用店?有丰富的应用和插件，这些工具极大的提高了我们的生产效率。不过本文不是给大家推荐那些精品插件名单，而是教你如何作为一名开发者，为Chrome贡献自己的插件。
万里长城第零步，首先你得先翻墙
推荐用收费的VPN，以便于后续的一系列工作。不要把精力都花在了弄免费的翻墙工具上，毕竟收费的也不贵。
万里长城第一步，不必去办VISA卡
要想在?Chrome网上应用店（下文简称webstore）发布应用，需要在?webstore注册一下，填信息的时候你会发现没有中国大陆地区，所以Google在暗示天朝人民要用假的地址注册，于是我机智的选择了宝岛台湾。
然后Google还要你提供一个VISA/MasterCard账号，用来缴纳5美元注册费。我差点就真去办VISA卡了，后来网上一查，国内的VISA卡可能会认证失败，去淘宝上买虚拟卡又不放心，奋战一小时后我发现一个神奇的网站：.
mastercard
这网站专门用来搞全球购物的，冲100块钱，自动给你生成MasterCard账号，然后你就可以拿这个?卡号信息去注册webstore开发者了，分分钟验证通过，并没有网友说的那么麻烦。
至于剩下的钱，你可以买点儿别的，或者转到其他银行卡里,机智如我。
?webstore有四种程序类别：应用、游戏、扩展程序、主题背景。
放心，都是用JS来写的，对于前端来说只有一星门槛。本文不会讲具体基础开发知识，因为这里已经有非常好的教学资料了：
.来自图灵社区的免费电子书，适合入门。
.来自360极速浏览器翻译的官方文档。
.前两个适合入门，实际开发的时候还是推荐官方的，查API啥的都很方便。
webstore开发本人其实也是新手，但些许经验应该能帮助到其他人：
1.如何优雅的调试
右键Chrome工具栏的小图标会弹出一个窗口，选择审查弹出内容即可调试。
但是这种方法极度低效，直接找到你插件的ID：
Chrome 插件 ?ID
然后浏览器访问：
chrome-extension://&插件ID&/?插件入口html文件
比如我的是：
chrome-extension://fnfchnalfnjbjbfeccpophocngdgapad/index.html
然后就可以愉快的调试了。
2.如何查看其他插件的源码
访问 找到Chrome插件安装的本机目录:
chrome://version
然后找到extension目录，所有插件和数据都在这里，可以随便参考其他插件源码。
3.不要把JS代码写在html文件里
出于安全考虑，入口html文件中的JS代码只能通过script标签引用外部脚本文件，内嵌的JS代码会失效的。
4.注意国际化
webstore面向的是全球用户，你辛辛苦苦写的小工具肯定不想只限于国内用户吧，所以在你的项目里面加上_locales文件夹，写代码的时候时刻考虑到如何才能更好地支持国际化。
5.用好Google
开发遇到的问题Google一下一般能找到，StackOverflow 和Google网上论坛这两个站点要尤其留意，大部分问题这上面?都有解决方案。
更多小技巧就不一一列举了，多看官方文档，有更详细的介绍。
应用写好之后打包上传就好了，上传时Google会让你提供几张宣传图片，每一个需要填写的选项后面都有详细说明，需要认真阅读一下。
发布之后大概过上几个小时就能在webstore搜索到你的应用了：
至此大功告成，之后可以继续关注你的应用情况，适时更新。
最后附上自己写的一个Chrome收藏夹插件源码，仅供参考交流：
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 介绍 这是一个用于iOS开发的各种开源库、开源资料、开源技术等等的索引库. 具体内容 ============================= 版本管理@ 依赖管理@ G...
chrome扩展开发入门教程 最近在开发chrome插件，看到一篇非常适合入门的教程，特记录一下 注：转载 本文首发于 http://liuxianan.com，原文地址：http://blog.liuxianan.com/chrome-plugin-develop.htm...
这是一个用于iOS开发的各种开源库、开源资料、开源技术等等的索引库.转载自:https://github.com/Tim9Liu9/TimLiu-iOSgithub排名 https://github.com/trendinggithub搜索：https://github.c...
记细节如何影响别人 1英文名，the small big 比如小数字更能激励自己 注重潜力 谈业务 来自己家谈 案例:商场定价惯用9.9这种套路，让你觉得便宜。 细节作者西奥迪尼，说服力影响力专家。著作，影响力。 人是理性动物?人的大部分决定在很短的时间里，都是被直觉，情绪...
这辈子除了怕黑怕蛇，还怕什么？什么都不怕，反正一无所有，有什么可怕的？
圈子不同，不必强融，减少没有意义的社交。
如果你没有能力打开别人的话匣子，那也别打开自己的，因为会掉价，学会安静些
忘记一个人最好的方法是让他...
渴了就喝，饿了就吃，困了就睡，不舒服不高兴不耐烦了就哭，开心了就大笑，想玩就痛快玩儿，想闹就可劲儿闹，折腾累了也有人护着有人哄着，不用担心明天该如何，下一秒改如何。 孩子的世界单纯的令人艳羡。 我们多想像个孩子一样，有个人无条件宠溺着自己。但大多数人寻寻觅觅，经历情伤，受尽...
我知道你的书房里肯定有一本书叫做《把时间当作朋友》，我知道你还没来得及读它，或许你已经读了多遍，但只读了这书的七个字“把时间当作朋友”，噢，不，你已经读过一次了，可那次有点囫囵吞枣。现在那本书对你也只不过是很渴望读却不知道何时才能读的一本书而已。 其实上面大部分写的是我自己...
本文为原创，引用或转贴请私信。 帕伦克国(Palenque)的第五任统治者的名字叫K’AN JOY CHITAM I（注1）。公元490年5月3日生。他于公元529年2月25日继承王位。于公元565年2月6日死亡（75岁）。他应该属于玛雅众城邦中在位时间最长（36年），以及...开发者必读：Chrome应用开发三部曲
　作者: 景保玉　编辑:
　　【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开发，最有帮助的资源就是官方文档，Chrome升级后最新出现的api也会最早在这里发布。　　官方文档有多个版本，对应于不同的Chrome版本分支 Stable、Beta、Dev。也会有一些体验性的API可以尝试，但不应该发布给用户，因为这些api随时可能会被取消。　　360极速版(Chrome换皮肤版?)团队做了个中文本开发文档，。目前看来和官方接口非常统一，但不会即时更新(他的Chrome核心都会远远落后官方版)，建议开发者做初期开发时可以用来熟悉接口规范。
IT168企业级}