Pages

Sunday, 29 May 2016

如何从零开始写一个 Chrome 扩展?

直接看谷歌的官方文档,写的非常赞。
一开始有一个例子 developer.chrome.com/ex,他帮你都写好了,你按着他说的,把一个个文件都搞下来,就能弄出一个extension,然后他会指引你了解一下chrome extension的架构,搞清楚各个文件的功能 developer.chrome.com/ex。我觉得这部分看了不一定能知道怎么做,但是了解一下还是很有帮助的,当你遇到一个需求的时候,你至少大概能知道要用哪种类型的技术,比如说应该用content.js还是event.js之类的,他讲的很清楚。
从上面提到的两个文档,根据他的提示,把一些该看的都看了,一些暂时用不上的功能,我觉得可以先不看,还是以任务驱动吧,想想自己想做什么,然后实践出一个demo来,干看的话可能记不住,也理解不深。
他还提供了好多例子,developer.chrome.com/ex,各种功能都有,下载下来看看人怎么写的就好,当然主要是看配置文件,一些权限管理什么的。API的使用文档里说的很清楚也有例子,实在不行就网上搜就好了,用一回就明白了。
实际开发中遇到困难,求助stackoverflow就好了,各种答案。
说到底,除了要借助一点点的chrome API以外,其余的就是普通的js html 和 css,没什么东西,很容易学。
边看文档边实践边Google就能做出东西了,先把东西做出来,然后再把东西优化做精。
我也是最近才开始学的,某课程大作业需要用,做了一个模仿evernote剪藏的插件,关于chrome extension的经验还有待整理,等整理完了再来补充下答案.
 --------------------
 
360把Chrome的开发文档翻译了这种事我会乱说吗?open.chrome.360.cn/html
  1. 首先要先明确做一个干什么用的扩展,最好是能解决实际问题的,不然没动力。
  2. 然后就开始看360的那个开发文档。我就当你已经会JS(以及HTML和CSS)了,什么?还不会?那就先从头学起,相信对于计算机专业的同学来说毫无压力,建议可以先做几个网页上的JS应用(其实扩展就是个后台运行的网页而已)。
  3. 360那个文档应该一天就看完了,然后就可以搞一个简单的了。之后就是调试改善,如果可以解决实际问题那就分享给同学,这对于动力的提升很有帮助。
  4. 当然,360那个文档不全的,官方文档也要看。
  5. 有时间可以研究一下现成的扩展的代码
---------------------
首先你得会javascript,至于怎么叫会就不详说,比如javascript才基本语法,javascript的回调机制,javascript操作DOM,甚至ajax等。其次是一定的HTML,和CSS的技术能力,其实这些就是web前端那套知识。
再其次是至少看完一次chrome的API内容,从中了解chrome的插件工作机制,只有了解的插件的工作机制你才能知道怎么去开发插件。
交流平台的话我就不做广告推荐了。最好的平台是搜索工具。书籍的话据我了解暂时没有。
资料的话
chrome API官网:code.google.com/chrome/
-------------------------

推荐个不错的教程,<Chrome插件开发简单实战教程>:
http://www.chromi.org/archives/13915
 
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扩展及应用开发
这本书汇集了以上很多回答中的精华内容,从零开始足够了。
  • Else if {不会Javascript}
先学习Javascript:W3School的教程对于初学者足够了:JavaScript 教程 ,而且好处是有调试器,所编即所见。
然后回到上面,学习《Chrome扩展及应用开发》。
自我理解和收获:Chrome Extension解决了自己很多需求,用简单的代码实现强大的功能,而且可以给他人共享
---------------

Google 的官方教程得翻墙才能看,360 的文档又太老,刚好最近兴趣来了想学习写 Chrome 扩展,就顺便写了个入门教程,有不对或者不完善的地方欢迎指正。

一个 Chrome 扩展其实就是一个配置(入口)文件 manifest.json 和一系列 html、css、js、图片文件的集合,所以只要有前端基础,写一个简单的 Chrome 扩展是分分钟的事情。

由于 html、css、js 及文件组织,跟普通的 web 开发一样,那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了,下面以一个 股票信息查看 扩展和一个 天气预报 扩展举例。

manifest 文件的编写
1. 基本属性

包括扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 manifest 版本(manifest_version)等信息。

其中,name、version 和 manifest_version 是必须的,而且 manifest_version 必须为 2
------------
 
必须是官方提供的一系列插件实例啊,直接点开查看源码吧
GoogleChrome/chrome-app-samples · GitHub

图灵社区里新放出一本有关于这方面的免费电子书,并且支持推送至 kindle,写得比较细致,推荐一下。
图灵社区 : 图书 : Chrome扩展及应用开发

---------------
在学好Javascript与简单的HTML5知识后,从Firefox的油猴脚本开始练习一些简单的脚本封装与注入,然后就可以GitHub一个相关小项目研究一遍就入门了,这样可以避免疲劳,带着兴趣获得点成就感(知乎相关的Chrome插件就很多啊,怒fork几个)。

这个过程中肯定是会有很多不懂的地方,一边查各种博客文档找到答案,积累知识技巧到一定程度了,然后更多的就是根据你非技术的Idea,心之所向身之所往,追寻这个你认为很好的Idea完善更多技术细节直到完成你的第一个独立Chrome插件。

技术的讲,Chrome插件算是前端中一个小应用,要有更大的视野还要多看有关前端前沿的引擎,工具库,WebGL等相关资料,看你有多愿意投资未来浏览器了。

总之,起点要是学技术你就姿势不正确了,起点一定要是需求或者兴趣来完善技术,这样长远来看受益无穷.
---------------
 
chrome 插件就是一个封装的网页(html, css, js),会这三项的话不难写。
我的话,难点在于chrome的数据传输方式,它硬性规定content script.js 和 background.js 不能直接共享数据,于是sendMeessage和onMessage(监听动作),以及storage.sync.set 和 storage.sync.get(存取数据)我花了挺长时间才弄清怎么工作的的(汗)
……搞清这几项后,写起来不困难.
----------------

如果你没做过,不了解Chrome Extension的架构,我建议从官方的getstarted开始developer.chrome.com/ex写一个轮廓,然后装载到Chrome里立刻可以看到效果;然后读developer.chrome.com/ex (Learn the basics)一点点调试改进。如果你已经有一点经验,这个工具也许有用Extensionizr,点几下鼠标,一个插件的轮廓就自动生成了,很方便。
content script是可以在当前浏览网页下打开developer tools直接调试的,event page需要到chrome://extensions下点击background page链接才可以看到调试输出:

注意API在不停地迭代,比如background page的persistent:true已经不推荐了,Google推荐按需加载的event page,翻译的文档可能是过期的,用官方文档比较好,你要真想用Google,什么墙也拦不住你.
 --------------
 
文档不用看太细,用得时候查。
360翻译的(版本较低) 综述--扩展开发文档
官方的developer.chrome.com/ex
官方示例
developer.chrome.com/ex
关键点
1. content_scripts 嵌入脚本(嵌入在浏览页面中,可访问浏览页面元素)类似JS注入。
2. background 后台脚本,可以理解为一个后台程序
3. 嵌入脚本可以和后台脚本直接通信,调用其方法,这个用的不多
4. 嵌入脚本可以和后台脚本间接通信,后台监听事件,前台调用事件,主要就用这个
5. chrome调试 打开发人员工具,maintab:Source->subtab:[Source,Content scripts,Snippets]嵌入代码在Content scripts中
看看提供的事件API就行了
基础好,直接看其他拓展的源码。
git除了官方开源上不多,不好找。

然而,目前chrome所有安装的拓展都有本地副本,并且,很多都没有压缩(混淆),源码一目了然!!

MAC的保存路径osx10.11 亲测
~/Library/Application Support/Google/Chrome/Profile 1/Extensions
windows 未测
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions

要实现特殊功能,查API文档,或找对应项目参考(代码就算混淆,chrome.api也很容易定位)

以下是两个在原扩展上添加功能
cclient/chrome-extensions-googletranslatewithyoudaowordnote · GitHub google翻译+有道生词本
cclient/chrome-extensions-youdaowithwordnode · GitHub 有道翻译+有道生词本.
-----------------

最近做了三个chrome插件,说说我是怎么学的吧!

你要有一定的前端开发基础,按重要顺序应该是,HTML,JavaScript,CSS。然后最好能看懂英文文档,因为网上可以找到一些“比较新”的教程,一般都是国外网友写的。做到这些,你基本上可以试着开发chrome插件了。

开发过程中你可以参考国内的浏览器插件开发文档,它们基本都是用的chromium内核。百度浏览器的文档翻译的比较细致,基本一看就懂:入门:建立百度浏览器应用 当然,360极速浏览器的文档你也可以参考一下。

最重要的一点,你可以上网下载一些小插件,把它们的后缀名改成rar然后解压,这样那些插件的源代码就会直接展现在你眼前。仔细研究里面的代码有助于你快速了解chrome插件,会给你很多启发。里面的方法甚至可以直接搬出来用。

我借鉴迅雷下载插件(右键下载,跟右键翻译很像)自己开发出了谷歌右键翻译小插件,不过功能简单,通过页面转跳实现了翻译。然后仔细看了网上一个比较复杂的翻译插件又开发了LOFTER标签批量添加器,其中后台标签管理模块就是仿照翻译插件的翻译选项设置页做出来的。

其实在做这些以前,你最好先有一个想法,比如你想开发一个什么插件,然后试着去实现它.

from  http://www.zhihu.com/question/20179805