如下图所示，这些图标便是各种开拓者供应的 chrome 扩展程序：
区分扩展与插件
很多人会误称扩展程序为插件，这里有必要区分一下。
\公众扩展\"大众 和 \公众插件\"大众，实在都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫 \"大众扩展\公众，另一个叫 \"大众插件\"大众。
扩展（Extension）
指的是通过调用 Chrome 供应的 Chrome API 来扩展浏览器功能的一种组件，事情在浏览器层面，利用 HTML + Javascript 措辞开拓。比如著名的 Adblock plus。
插件（Plug-in）
指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，事情在内核层面，理论上可以用任何一种天生本地二进制程序的措辞开拓，比如 C/C++、Delphi 等。比如 Flash player 插件，就属于这种类型。一样平常在网页中用 <object> 或者 <embed>标签声明的部分，就要靠插件来渲染。
开拓自己的扩展程序OK，大略理解完什么是扩展程序后，下面我们来看看如何开拓一款扩展程序。
当然，首先我们要搞清楚为什么我们须要扩展程序，它有什么浸染呢？
就我而言，最近我开拓了一款大略的扩展程序 —— URLHelper 。你可以在chrome 运用商店下载到它：
开拓它的缘故原由是由于，在我们的业务开拓中，开拓过程常常须要面对超长的 URL，带有 N 多个参数，它可能长这样：
http://tv.video.qq.com/xxx/xxx/xxx/index?rootdomain=test.tv.video.qq.com&guid=066de07bdd33422f95b7ddaf993b2004&tvid=0930DCE900E081E142ED006B56025BA7&appver=3.1.0&bid=31001&appid=101161688&vipbid=38&fromvipbid=38&cid=qk97pyegxz8kdug&vid=&pid=&mid=&from=501&qua_info=PT%3DSNMAPP%26CHID%3D10009%26VN%3D3.1.0%26PR%3DVIDEO%26TVKPlatform%3D670603%26SMARKET%3D&type=0&listid=&matchid=&channelid=&source1=747&source2=709&penid=D21D81E4489E43422F842235B52DD&access=82E8E64DDD4A531B6FFA3E0967F76&kt_login=qq&vuserid=&vusession=&oauth_consumer_key=101161688&kt_userid=924400965&kt_license_account=SNM_0059858531&main_login=qq&kt_login_support=qq%2Cwx%2Cph&kt_boss_channel=tx_snm&ott_flag=2&sop=9&actid=&tvactid=&tv_params=policy_id%3D88&disable_update=&dp=&du=&viewid=&dv=&pageid=&ptag=&redirect_url=http%3A%2F%2Ftest.tv.video.qq.com%2Fktweb%2Fpay%2Fphone%2Fscan%3Frootdomain%3Dtest.tv.video.qq.com%26guid%3D066de07bdd33422f95b7ddaf993b2004%26tvid%3D0930DCE900E081E142ED006B56025BA7%26appver%3D3.1.0%26bid%3D31001%26appid%3D101161688%26vipbid%3D38%26fromvipbid%3D38%26cid%3Dqk97pyegxz8kdug%26vid%3D%26pid%3D%26mid%3D%26from%3D501%26qua_info%3DPT%253DSNMAPP%2526CHID%253D10009%2526VN%253D3.1.0%2526PR%253DVIDEO%2526TVKPlatform%253D670603%2526SMARKET%253D%26type%3D0%26listid%3D%26matchid%3D%26channelid%3D%26source1%3D747%26source2%3D709%26openid%3DD21D81E44801E9E43422F842235B52DD%26access_token%3D82E8E64DDD4EDA531B6FFA3E09676F76%26kt_login%3Dqq%26vuserid%3D%26vusession%3D%26oauth_consumer_key%3D101161688%26kt_userid%3D924400965%26kt_license_account%3DSNM_0059858531%26main_login%3Dqq%26kt_login_support%3Dqq%252Cwx%252Cph%26kt_boss_channel%3Dtx_snm%26ott_flag%3D2%26sop%3D9%26actid%3D%26tvactid%3D%26tv_params%3Dpolicy_id%253D88%26disable_update%3D%26dp%3D%26du%3D%26viewid%3D%26dv%3D%26pageid%3D%26ptag%3D%26opres%3D0&%24from=201
不是开玩笑，真实情形可能比这个还长。
由于调试的须要，常常要找到某一个特定的参数，获取或者修正它的值。
读者可以考试测验一下，贴到浏览器中，找到 cid 参数，修正为其余一个值。如果没有工具，这个过程是很痛楚的。一次还好，如果一天重复这个动作几十次，就有必要考虑借助工具了。
基于这个出发点，我制作了 URLHelper 这个扩展，它的界面大概长这个样子，可以非常方便的对 URL 参数进行删查改排序，修正参数刷新页面：
以是，扩展程序我以为每个前端都可以开拓，用于办理我们事情生活中在利用浏览器碰着的各种问题，譬如有名的 ：
WEB 前端助手 供应的字符串编码、JSON 格式化
PageSpeed 供应的页面性能检测等等
二维码天生器 将 URL 转化成对应的二维码
扩展程序架构OK，接下来聊聊一些扩展程序开拓干系的东西。
关于扩展程序的干系文档，可以看看这些文章：
建立 Chrome 扩展程序
扩展开拓文档
首先，我以为最主要的，是要理解全体扩展程序的基本架构，有几个非常主要的文件：
Content scripts -- 内容脚本
Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript 脚本。可以将 content script 看作是网页的一部分，而不是它所在的扩展程序的一部分。
它可以实现的一些功能的例子及适用场景，大致如下：
在网页中找出未链接的 URL，并将它们转换为超链接
查找特定的信息或者 DOM 构造，增加字体大小，使文本更具有可读性
创造并处理 DOM 中的微格式数据
我们可以这样理解它，在页面加载完毕之后，我们的扩展程序会向这个页面注入一个或者额多个脚本，这个脚本可以得到浏览器所访问的 web 页面的详细信息。也便是我们可以利用这个脚本网络页面上各种我们须要的信息。
以我上面的 URLHelper 为例子，在这个扩展中，content script 的浸染便是拿到页面的 URL ，然后通报给扩展程序的 background 页面或者 popup 页面。
当然，如果你只须要一个脚本程序每次注入页面后获取页面干系的信息，然后上报到自己的做事器之类的功能，这个扩展程序只须要这一个 Content scripts 就够了。它不须要与其他界面或者脚本进行交互和信息通报，扩展帮你做的便是自动注入这个脚本而须要你每次手动注入。
popup -- 弹窗页面
popup 页面也非常好理解，在 manifest.json的定义里它是 browser_action， 便是我们扩展程序的界面（弹窗页），便是上面的那张截图：
这个界面实在便是一个 Web 页面，点开任意一个扩展页面，右键都可以看到弹出检讨选项，点击这个选项，就会弹出一个开拓者工具，我们就可以愉快的开始对这个页面进行查看 DOM 构造、查看网络状态、 Debug 等任意操作了：
然后：
重点，这个 popup 页面完备由我们掌握，就像一个普通的 Web 页面，我们可以利用 Chrome 的通报机制利用这个页面和 Content scripts 进行交互，也就可以完成对页面的某些掌握。
以我上面的 URLHelper 为例子，在这个扩展中，当我点击扩展程序界面中的刷新页面按钮的时候，会从扩展界面的 DOM 年夜将修正后参数取出拼好，并且通过 Chrome 的通报机制 通报给 Content scripts，然
后 Content scripts 拿到新的参数，赋值给当前浏览器窗口页面的 document.location.href，实现页面的刷新。
background -- 后台网页
除了 popup 页面之外，还有一个 background 后台网页 。
chrome扩展程序将后台网页分为两种类型：
持续运行的后台网页
事宜页面
是否持久存在是事宜页面与后台网页之间的根本差异。（刚开始利用的时候可以理解为一个东西）
运用和扩展程序常日须要永劫光运行的脚本来管理某些任务或状态，这便是后台页面的浸染。事宜页面只在须要时加载，当事宜页面不活动时就会卸载，以便开释内存和其他系统资源，以是一样平常而言是推举利用事宜页面。
它存在的目的在于，在扩展的全体生命周期内须要永劫光管理一些任务或状态。它的紧张功能及适用场景，大致如下：
事宜页面监听的某个事宜触发
运用或扩展程序第一次安装或者更新到新版本（为了注册事宜）
内容脚本或其他扩展程序发送
扩展程序中的其他视图调用了 runtime.getBackgroundPage
以我上面的 URLHelper 为例子，在这个扩展中，我利用的是持续运行的后台网页，当浏览器页面刷新第一次注入 Content Script 时，会获取到当前页面 url ，然后发送并带上 url 信息见告给 background 后台网页， background 后台网页收到后，再转发给 popup 页面。
扩展程序小结
一个扩展程序最主要的我以为便是上述的三块内容：
Content scripts -- 内容脚本
popup -- 弹窗页面
background -- 后台网页
我们通过一个 manifest.json 的清单文件来配置它们及一些额外信息。关于manifest.json 的详细信息，可以戳：manifest 。
接下来，我们的扩展要灵巧地完成各种功能，最主要的便是相互间的通信！
信息数据在内容脚本、弹窗页面以及事宜页面之间通报是一个扩展程序最主要的部分。
扩展程序的通报通报存在的必要性是由于内容脚本在网页而不是扩展程序的环境中运行，以是它们常日须要某种办法与扩展程序的别的部分通信。
扩展程序（弹窗页面和后台页面）和内容脚本间的通信利用通报的办法。两边均可以监听另一边发来的，并通过同样的通道回应。可以包含任何有效的 JSON 工具。
利用 chrome. API
通报，紧张利用了 Chrome 浏览器的内置 chrome 工具进行。打开浏览器，试一下，chrome 工具实在包含了非常多的功能：
各种类型的通报都是通过这个chrome 工具进行，分为：
大略的一次性要求
永劫光的连接
跨扩展程序通报
从网页发送
原生通信
当然，对付常日而言的普通扩展程序而言，大略的一次性要求就足够我们利用了，举两个例子。
假设我们的 manifest.json 大略定义如下：
从 Content Script 向 background 事宜页面 通报
Content Script ，即是注入页面的脚本
background 后台页面
从 popup 弹窗页面 向 Content Script 通报
再举一个翻过来的例子，从 popup 弹窗页面 向 Content Script 通报。
popup 弹窗页面
Content Script
这里有个问题须要把稳，从 popup 弹窗页面 向 Content Script 通报时，由于浏览器可能同时打开多个 tab 页，以是须要指定一下通报的页面，指定发送至哪一个标签页。
利用 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {}) 则能精确选中当前打开的标签页。
其他更多的通报办法，可以戳这里：通报。
将扩展程序打包上线发布到 Chrome 运用商店
扩展程序开拓好了，希望供他人下载。那么当然须要发布到运用商店。流程大致如下：
登录到 Chrome 开拓者信息中央。
首先，你须要有一个 Google 帐号，然后登录网上运用商店。
添加一个新项并以 zip 文件的形式上传文件。
成功之后，将会登录到这个界面，：
在这个界面我们选择添加新内容即可 :
把稳，要打包成 .zip 格式，并且在根目录下有最主要的 manifest.json 文件，像我上传的全体目录构造，就非常大略：
首次发布，须要支付 5 美刀
选择文件并且成功上传之后，下一步非常主要。第一次发布扩展程序，谷歌会收取 $5 开拓者注册用度，之后可以发布 20 个扩展程序 。
这里付款中海内地的银行卡彷佛都弗成，只能选择国外的 VISA 等储蓄卡、信用卡进行支付，地区选择美国即可。
付款完成，可以愉快的发布了
OK，末了付款完成，就可以顺利发布了，稍等少焉，就可以搜索到我们自己开拓扩展程序了！
来源：http://www.cnblogs.com/coco1s/p/8004510.html 作者：ChokCoco
