Google Chrome扩展原理与机制&HTML5

http://blog.163.com/liu2_zf/blog/static/4214096620106411344193

从目前来看，Google似乎将扩展（Extensions）与插件（Plugin）分开来讨论的，Chrome的扩展文件的扩展名（后缀）为.crx,Google Chrome可以自动关联这种扩展名为.crx的文件，那么目前扩展的工作原理是什么呢？

个人感觉这种机制属于本地化访问和 WEB 访问结合的方式，也属于HTML5 的一个方向。

最近的工作中也使用到了插件的机制看起来和这个有些类似。

事实上，当我们将crx文件使用winrar或者是7-zip等解压软件解开之后就可以发现，其中至少包含两个文件，一个文件是扩展名为.js的脚本文件，另一个是文件名为manifest.json的文件，部分可能还会包含一个css文件、图片文件和HTML网页文件，但是.js脚本文件和manifest.json是绝不可少的两个部分。

可以看出，目前的Chrome扩展仍然是调用JavaScript脚本，通过脚本来实现一些功能，实际上这个功能早在很久以前就已实现，只不过当时是直接调用脚本文件，而现在是将脚本文件转换成crx扩展而已。

下面我们来看看manifest.json这个文件里都有什么东西；用记事本打开manifest.json这个文件，可以发现该文件里有如下信息：

{
"format_version": 1,
"id": "00123456789ABCDEF0123456789ABCDEF0123456",
"version": "1.0",
"name": "My First Extension",
"description": "The first extension that I made."

}


如上面的内容所示，可以看到manifest.json这个文件里包含5个参数，这5个参数的含义分别如下：

format_version（必需的）：向Chrome指明扩展所使用的清单格式版本。目前只有一个格式版本，因此设为1；

id(必需的)：扩展的ID号（唯一的）。目前可以设为任何40个十进制数字，将来会改为扩展的公钥的SHA-1的哈希值；

version（必需的）:扩展的版本号。可以使用任意点分格式的数字串；

name（必需的）：扩展的名称；

description（可选的）：扩展的描述信息。

可以看出，manifest.json必须包含4个参数，很简单，这四个参数也就是记录了该扩展的基本信息。

2、内容脚本

内容脚本是由Chrome加载进来在web页面上运行的JavaScript文件。这和firefox扩展类似。要加入一个内容脚本，首先在清单文件中对其进行注册，如下所示：

{
"format_version": 1,
"id": "00123456789ABCDEF0123456789ABCDEF0123456",
"version": "1.0",
"name": "My First Extension",
"description": "The first extension that I made.",
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": ["foo.js"]
}
]
}


其实很好理解，也就是在manifest.json的后面指定Javascript的作用域，比如我只想在Google.com以及其下的所有子网页中使用该脚本，那么matches的值就设置为http://www.google.com/*，如果我想在所有HTTP页面上都运行该脚本，那么作用域即可设置为http://*/*，如果还想在HTTPS页面上应用，则可设置为https://*/*，是不是很简单？

matches下面还有个JS参数，这个参数实际上就是指定在作用域上运行哪个脚本，文件名称由你文件夹内所放置的脚本文件为准，也不难理解。

注：内容脚本可以在页面开头或结尾执行，默认情况下是结尾处执行，当然你也可以加入”run_at”:”document-start”来告诉Chrome在开头处执行。

3、NPAPI插件

Chrome扩展可以包含NPAPI插件这样的二进制组件。如果你想在扩展中使用一个NPAPI插件，首先在扩展中为其创建一个目录,名为”plugins”,然后在清单文件中为其注册如下：

{
"format_version": 1,
"id": "00123456789ABCDEF0123456789ABCDEF0123456",
"version": "1.0",
"name": "My First Extension",
"description": "The first extension that I made.",
"plugins_dir": "plugins"
}


相信聪明的你已经看明白了，实际上就是指定一下插件的路径，然后直接将NPAPI插件放入相应的路径即可。

manifest.json文件里的内容会在Chrome的已安装扩展页面里下面是，具体位置是chrome://extensions/，如图：