Chrome插件开发简单实战教程

标签: Chrome Chrome APPs Chrome扩展 Chrome APP | 发表时间:2012-02-26 23:33 | 作者:Eyon
出处:http://www.chromi.org

感谢 何明远 的投递

Chrome凭借其简单,稳定,快速的优点迅速风靡全球,占领浏览器市场,直逼IE的市场份额,超越也只是时间问题。初次打开Chrome浏览器,你会发现整个页面只有一个地址栏,一对箭头,刷新按钮和一把扳手,当然还有最重要的空白页面,这就是Chrome的整体构造,可以说是最简单的浏览器了,但是仔细深入你会Chrome的功能远不止这些,通过Chrome的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能,这时你就会发现Chrome的强大之处。

Chrome的扩展中心地址是 https://chrome.google.com/webstore,里面有全球的开发者开发的插件,你只需要选择,然后点击添加到Chrome即可。目前从事Chrome开发的人非常少,我觉得可能是某种网络不稳定因素造成的Google服务不稳定,导致了大家都不愿意开发这片市场,所以在网络上关于Chrome开发的资料少之又少,目前官方的开发文档也都是英文的,阻挡了不少E文小白对Chrome开发的热情。
Chrome官方开发文档地址: http://code.google.com/chrome/extensions/dev/devguide.html 我大致看了一下,对他的结构也有所了解,这里将做一个简单的实战来检测一下我的开发水平。 学艺不精,多多包涵,老鸟路过,新手可以参考下,作为入门教程。

过去大家在添加插件后,图标会出现在地址栏的右边,点击即可快速打开插件,在新版的Chrome中,又多出了一个叫Apps的东西,如下图画红线的部分:

App的开发和扩展大同小异,为了满足大家的成就感快速开发出一个可用的App这里就从App讲解。

一个最简单的APP需要由一个图标和一个名为manifest.json的文件组成。

第一步:

新建一个文件夹,准备一个图标,建议128×128大小的。然后创建一个文件,命名为manifest.json,用记事本打开,复制以下代码:


{
"app": {
"launch": {
"web_url": "http://blog.sina.com.cn/eyeofming"
},
"urls": [ "http://blog.sina.com.cn/eyeofming" ]
},
"description": "Ming's China Blog",
"icons": {
"128": "eye.png"
},
"name": "Eye Of Ming",
"version": "1.0"
}

web_url和url是你要启动的网址,description是App的描述,icons下的128是图标的尺寸,比如说你的图标是16×16的,那么你就填16,建议128×128的大小,然后eye.png就是你的图标文件名。name是App的名字,下面的version是版本号,这个就自定义了,需要注意的是避免使用中文,一定要用utf-8。

第二步:

这一步可以称之为调式,在Chrome中输入chrome://settings/extensions 打开插件页,先勾选开发者模式,这样会出现一个载入插件的选项,如下图:

点击载入插件后,在路径中找到保存文件的文件夹然后打开就行了,如果顺利的打开,就说明你的插件没有任何问题,如果错误的话,他会提示你在哪里错了,然后按照他的提示修改就行了。来看看我的作品,如下图:

是不是很简单,如果你还没学会,不要急多试几次就好了, 这里是打包的源码,大家可以自行修改。

第三步:

制作好App后,要想出现在Google的扩展中心你需要提交给Google进行审核,提交地址: https://chrome.google.com/webstore/developer/update 注意要压缩成zip格式后提交,不要用.crx格式。上传后,填写相关信息,然后就是等待审核上线。

相关资源推荐

图标大全: http://findicons.com/
代码编辑工具: Notepad++ http://notepad-plus-plus.org/

相关 [chrome 插件 开发] 推荐:

为豆瓣爱好者开发的 Chrome 插件:豆瓣一点

- bridge - 谷奥——探寻谷歌的奥秘
豆瓣一点这枚Chrome扩展适用于将豆瓣的电影和书籍评价作为是否入手重要依据的朋友,作者说他自己在VeryCD上看到新的电影和美剧都要到豆瓣上看看再决定下载. 作者开发这个扩展也是为了方便自己上网时随时查询,故取名“豆瓣一点”,寓意“点一下就可以豆瓣一下了”. 豆瓣搜索:在网页中选中一段文字,在豆瓣中搜索.

Chrome插件开发简单实战教程

- - Chrome迷
Chrome凭借其简单,稳定,快速的优点迅速风靡全球,占领浏览器市场,直逼IE的市场份额,超越也只是时间问题. 初次打开Chrome浏览器,你会发现整个页面只有一个地址栏,一对箭头,刷新按钮和一把扳手,当然还有最重要的空白页面,这就是Chrome的整体构造,可以说是最简单的浏览器了,但是仔细深入你会Chrome的功能远不止这些,通过Chrome的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能,这时你就会发现Chrome的强大之处.

chrome 插件开发指南(Manifest V3) - 掘金

- -
严格来讲,我们正在说的东西应该叫 Chrome 扩展(Chrome Extension),真正意义上的 Chrome 插件是更底层的浏览器功能扩展,需要对浏览器源码有一定掌握才有能力去开发. 鉴于 Chrome 插件的叫法已经习惯,本文中也全部采用这种叫法. 在百度指数里也没有收录“chrome 扩展”这个词,只有“chrome 插件”.

[译]Web设计者和开发者必备的28个Chrome插件

- liu - 博客园-首页原创精华区
       对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场.        在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论究竟哪个浏览器更加优秀. Mozilla的开源产品经受了时间的考验和Firefox已经快速成为继微软IE浏览器后的第二大最流行的浏览器.

Chrome优秀插件推荐 — SEO必备

- yun - 就SEO
和Chrome已经是老朋友了,一直很喜欢他简洁的风格. 虽然现在插件越来越多,Chrome依然快速简洁,并且功能却愈加强大. 下面给大家介绍我做SEO时最常用的几个插件. 可以看网站PR, Alexa, WOT, IP地址以及所在的地理位置,简单但十分好用. 可以查看外链情况,页面的Meta,书签收录,域名信息,nofollow等等,很全很强大的插件.

10个提高效率的Chrome插件

- 建江 - ITeye资讯频道
  导读:Chrome浏览器是一直都热闹异常的浏览器大家庭中新成员. 虽然Google Chrome浏览器相比之下还很年轻,但优异的性能、简洁的界面以及较高的可用性使其一鸣惊人.   Chrome浏览器的另一个实用的地方是,用户可以添加插件来处理日常的网络任务. 其中许多Chrome插件可以提高用户的工作效率,并能使用户工作更轻松快捷.

Chrome插件的国际化技巧

- iBeyond - keakon的涂鸦馆
今天在查看Proxy SwitchySharp的源码时,看到了一个国际化的技巧. 觉得很不错,于是给Sync My Tabs插件增加了国际化支持,并在此分享. 其实之前我在做Chrome插件时都有个疑点,翻译JavaScript里的文字用Chrome的i18n API很容易,但是要翻译HTML就麻烦了,毕竟动态生成HTML没有静态的方便.

SocialBa! – 社交网络同步插件[Chrome]

- - 小众软件
如今登陆社交网站、发点心情、吐点槽,已经成为很多人每天必做的事情,好比吃饭,一天不吃饿得慌. 是一款 Chrome 插件,可以帮助以上人群同步几乎所有主流社交网站的心情和吐槽,包括新浪微博、腾讯微博、人人网、Google+、Facebook、Twitter、VKontakte、开心网、QQ空间、Linkedin、Plurk.

Chrome网页应用开发教程

- tiger - 互联网的那点事
发布时间:2011年2月1日. 发布源:How-Tos(OhBoard). 我花了10天时间开发了OhBorad,这个小巧的白板应用. 12月12日,我萌生了想法,12月22日我赚到了第一笔钱3.99美金. 所以在这里和大家分享一下这个开发指南. 如果你打算自己做Chrome网页应用,那么你可幸运了.

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

- huangct - 博客园-首页原创精华区
Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本. 界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越firefox,firefox上内存占用上实在不令人满意,也许我使用firefox的一个原因就是因为firebug,不过相信chrome平台的类firebug插件也会很快出现.