Chrome扩展编写之Hello World（一）

Chrome浏览器在4.x版本后开始支持扩展开发。其扩展开发最大的特点是基于标准Web技术，开发一个扩展类似开发一个网站，你只需要懂得标准的HTML、CSS、JS技术即可快速上手。特别是对于熟悉Web前端开发的人员而言，其学习成本几乎为零。用Chrome扩展演示Hello World这样的例子过于简单，以至于我犹豫过是否要采用这样的例子，后来我想Hello World这样的传统应该发扬下去，另外很多时候把简单问题复杂化似乎不难，因此我打算分篇以简单到复杂的方式来讲解Hello World扩展的编写，这样既发扬了传统，又把扩展编写的主要要点都覆盖到。现在请按下来步骤来实现这个简单的扩展：

1.新建一个目录，命名为"hello_extension”（可自己任意命名）

2.在目录下新建一个名为"manifest.json”的文件，用记事本等文本编辑工具编辑该文件输入下面的内容：

{
    "name": "hello extension",
   "version": "1.0",
    "content_scripts": [ {
      "js": [ "hello.js" ],
      "matches": [ "http://*.google.com.hk/*"],
      "run_at": "document_end"
   } ]
}

3.在目录下新建一个hello.js文件，其内容为：

alert('hello world');
alert(document.title);

至此我们的扩展就编写完成了，下面在浏览器中加载我们的扩展来看看效果。

启动浏览器，注意你的chrome版本需4.x以上，在工具菜单中选择“扩展程序”

打开扩展管理页面如下：

点击“载入正在开发的扩展程序”按钮，选择刚才新建的目录“hello_extension”确定后显示如下：

说明我们的扩展已经加载成功了。现在新开一个Tab，在地址栏输入http://www.google.com.hk/或者任意含有‘.google.com.hk/’的URL地址。你将看到两个alert输出，一个显示‘hello world’，一个显示当前页面的标题字符串。

原理解释

此扩展虽然简单，但包含了扩展编写的两个重要知识点：“清单文件”和“内容脚本”。下面分别说明：

清单文件

每一个扩展必须包含一个清单文件用于描述扩展的基本信息，该文件名字必须是“manifest.json”。其格式为JSON格式，如果你迫不及待的想了解其具体可能的字段，可参考官方文档，该官方文档对扩展编写进行了比较详细的介绍，虽然内容不多，但该讲的关键点都讲到了，建议逐句仔细阅读。在我们的清单的文件中，涉及到了：

name：该字段为一个字符串，用于描述扩展的名称。

version：扩展的版本。

content_scripts：如果扩展有内容脚本需要注入则需要在该字段中进行描述。注意内容脚本字段是一个数组，用[]表示，多个脚本用逗号隔开即可（我们的例子中只有一个），每个项是一个字典用{}表示。其中：

js：该字段指明内容脚本文件的名称，在我们的例子中为hello.js。

matches：匹配规则，匹配规则描述了对应内容脚本文件针对哪些url地址有效。在我们的例子中，http://*.google.com.hk/*用到了通配符*。表示匹配google.com.hr域名下所有主机（第一个*）的任意路径（第二个*）。

run_at：该字段指明对应内容脚本执行的时机。可以取三个值：

document_start：文档开始，相当于document对象刚刚创建，此时DOM树还没有构建完成。这个值是内容脚本挂接文档级事件的好时机。

document_end：文档结束，此时DOM树已经构建，主文档加载完毕，但图片等子资源数据可能未加载完成。

document_idle：空闲，可理解为在window.onload事件之后执行。

内容脚本

内容脚本在Chrome扩展编写中扮演着非常重要的角色。其内容就是JavaScript代码。内容脚本虽然物理位置是在扩展目录中，但其内容代码是根据匹配规则被注入到对应的原始网页中，因此可以简单的把内容脚本理解为原始网页的组成部分。内容脚本和原始网页共享相同的DOM数据，因此内容脚本可以对页面DOM进行任意增、删、改操作，这是内容脚本最主要的功能。在我们的例子中，我们除了输出固定字符串“hello world”外，还动态访问了页面document对象的title属性。

内容脚本的执行时机

内容脚本的执行时机通过run_at字段来指定，参考上面。

内容脚本的执行环境

我们知道chrome浏览器是多进程架构，对于每个扩展也会运行在单独的进程中，但是注意，如果扩展仅仅涉及内容脚本（扩展的功能完全是由内容脚本实现）的话，chrome不会为此扩展启动单独的进程。因为内容脚本被注入到匹配页面中，其执行环境为匹配网页的的Render进程。这是内容脚本执行的进程环境。

另外虽然内容脚本被注入到页面中，它和页面中本身的脚本的执行环境也是分割的，即内容脚本运行在孤立的V8上下文环境中。因此内容脚本不能访问页面脚本中的变量和函数。它们唯一共享的是DOM。这是可以理解的，试想如果内容脚本和页面本身的脚本运行在相同的脚本上下文中，变量、函数岂不是可能导致冲突？

 

总结

我们涉及到了扩展编写中的两个内容，清单文件和内容脚本，其中清单文件是每个扩展必须有的用于描述扩展本身的一些信息的文件，其名字必须是manifest.json。起内容格式为JSON。内容脚本除了运行在孤立的上下文不能访问原始页面的变量和函数外，可以看着是原始网页的组成部分，其最重要的就是共享DOM，你可以通过内容脚本对页面DOM结构进行任意操作。因此你现在就可以做很多实用的扩展了，毕竟DOM给你了，想干嘛，你看着办吧！

下一次我将继续以Hello World为背景来覆盖chrome扩展编写的新的知识点，如有兴趣，敬请关注。