这篇文章翻译自http://code.google.com/chrome/extensions/overview.html，我还没有真正做过插件，翻译这篇文章算是班门弄斧，有翻译的不好的地方请一定指出来，希望能够达到完美！

( 对新手说的话：文章涉及到的一些术语，对没有任何网页知识的新手来说还是挺难懂的，可以借助Google/baidu看一下，其实不懂也没多大关系，这篇文章只是一个概述，完全可以跳过这些术语，希望大家对制作插件不要失去信心。)

只要看完这篇文章，并且做过入门指南中的例子，你就可以真正开始开发属于自己的Chrome插件了。

一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一个web页面，你可以用任何浏览器提供给web页面的接口，从XMLHttpRequest 到JSON ，再到HTML本地缓存都可以使用。

Chrome扩展能做什么呢？我们肯定使用过一些扩展，会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互，甚至是从web服务器获取数据。更加详细的内容可以从Developer's Guide看到。

每个扩展由下列文件组成：

• 一个manifest文件(主文件,json格式)
• 至少一个HTML文件(主题可以没有HTML文件)
• JavaScript文件 (可选，非必须)
• 任何其他你需要的文件(比如图片)

当你开发一个扩展的时候，需要把这些文件放在一个文件夹里，当你发布这个扩展的时候，这个文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。

引用文件

你可以放置任何文件到你的扩展里面，但是怎么调用这些文件呢？一般来说，使用相对地址调用，类似HTML中调用文件。下面是个例子，在子文件夹images中有个图片myimage.png，我们可以这样调用它

其中images/myimage.png表示这个文件。

也许你注意到当使用Google Chrome debugger查看这些文件的时候给，每个文件的地址是下面这种格式

这个地址中，<extensionID>是你制作的扩展的唯一标示符，也就是扩展的身份证编号。<pathToFile>是文件相对扩展顶级文件夹得位置。

manifest文件

主文件取名manifest.json，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域等信息。下面是个典型的manifest文件，这个扩展可以调用google.com的内容。

绝大部分扩展有background文件，一个不可见的文件控制着整个扩展的运行。

上面这个图片显示的浏览器至少安装了两个扩展：一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html)，这个background文件中有JavaScript代码控制整个浏览器的活动。

HTML页面

background不是唯一存在的HTML文件，比如浏览器行为可能是弹出一个小窗口，这个小窗口的内容就可以调用一个HTML文件。Chrome扩展也能够用chrome.tabs.create() or window.open()这种函数来显示HTML文件。

扩展里面的HTML文件可以互相访问对方的DOM结构，可以引用其他文件中定义的函数。

下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口的内容是一个HTML的web文件，这个弹出窗口不需要包含background文件中的代码，因为，popup.html和background是可以互相访问的。

内容脚本(Content scripts)

如果你插件需要和网页交互，那么他就需要一个内容脚本(Content scripts)，内容脚本常由JavaScript编写，会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分，而不是扩展的一部分。

内容脚本可以访问到当前浏览器浏览的页面，而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。下面的图片中，内容脚本可以读取、更改网页的DOM。注意，他不能更改background.html中的内容。

内容脚本也不是和父扩展完全隔离开来，他也可以和父级扩展交换信息。如下图中所示，内容脚本在发现一个RSS Feed地址后将会给background.html发送一个信息。或者background.html给内容脚本发送一个信息要求改变网页外观。

不同页面间的交互

一个扩展中的文件常常需要交互。由于扩展的所有文件都由同一个进程执行，网页能够直接给其他页面发送命令。

可以使用类似chrome.extension methods such as getViews() and getBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面，第一个页面就可以调用其他页面的函数，甚至可以控制DOM。

好了，你已经大概了解了一个扩展程序的基本内容，可以开始写作自己的扩展了。

本文由ChromeChina翻译，转载注明出处http://dev.chromechina.com/