Pages

Monday, 2 September 2013

如何快速开发一个Chrome插件:下载CRX文件并查看源码

虽然360极速浏览器的工程师们把chrome官方开发指南全部编译出来了(地址:点击这里),但是要提高自己的水平,还是要多看别人的代码才行,所以学会反编译crx插件文件并学习代码很重要。

一、CRX源码的形式

一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有。
应用(扩展)可以与Web页面交互,或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用(扩展)还可以访问浏览器提供的内部功能,例如标签或书签等。

每个应用(扩展)都应该包含下面的文件:
  • 一个manifest文件
  • 一个或多个html文件(除非这个应用是一个皮肤)
  • 可选的一个或多个javascript文件
  • 可选的任何需要的其他文件,例如图片
在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。

二、如何下载CRX文件

Chrome Extension Downloader 是一个可以下载到 Chrome 应用商店扩展 .crx 文件的网站,直接输入 Chrome 扩展地址就能得到 .crx 文件。
.crx 文件是 Chrome 浏览器的应用扩展打包文件,有它就可以无需联网安装应用扩展。
或许有千百个理由需要下载 .crx 文件,总之就是要下载下来,比如青小蛙需要帮妹纸远程装个扩展,但妹纸的网络下载不了,总不能打飞的现场安装吧…
网络上还有其他一些办法下载,比如修改 URL 大法,以 Google Maps 扩展(https://chrome.google.com/webstore/detail/google-maps /lneaknkopdijkpnocmklfnjbeapigfbh)为例,只需将上面的地址 ID 部分(看似乱码部分)复制下来,替代下面的“这里这里”
https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D这里这里%26uc
然后用非 Chrome 浏览器打开这个地址,就可以下载 .crx 文件了。问题是,上面的妹纸说打不开应用商店…
回到 Chrome Extension Downloader 中,只需将应用地址输入网站,就完成下载了,简单方便不用折腾。
另外由于安全原因,Chrome 要安装非应用商店的扩展,需要打开扩展管理界面,将 .crx 拖进去才可以。还是由于安全原因,不要随意安装不了解来源的 .crx 扩展,自己下载的最可靠。