谷歌浏览器扩展程序开发教程之创建你的第一个扩展程序

开始（Hello, World!）

这个指南将会教你如何创建一个简单的扩展程序。你将在谷歌浏览器上添加一个图标，当你点击这个图标时，它将会显示一个自动生成的页面。图标和页面看起来像这样子：

你可以使用任何版本的谷歌浏览器开发扩展程序，无论是在Windows、Mac或者Linux上。你在某一平台所开发的扩展程序应该可以不做任何修改就可以在谷歌浏览器所支持的任一平台上运行。

创建并加载一个扩展程序

在这里我们创建的扩展程序是一个Browser Action，它在Chrome的工具栏增添了一个你可以控制其行为的按键。

    1、在你电脑上的某个地方创建一个文件夹，用于存放扩展程序的代码。

    2、在这个文件夹里面，创建一个文本文件，命名为manifest.json，其内容为：     

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

    3、将下面的图标复制到相同的文件夹里：

           Download icon.png

    4、加载扩展程序：

          a、点击扳手图标，选择工具>扩展程序，打开扩展程序管理页面；

          b、在开发人员模式前面的复选框里打勾，进入开发人员模式，同时会出现更多的按钮和信息；

          c、点击‘载入正在开发的扩展程序’，会出现一个文件对话框；

          d、在对话框中选择扩展程序文件夹，然后点击确定。

如果你的扩展程序是有效的，它的图标就会出现在地址栏的旁边，关于此扩展程序的信息就会出现在扩展程序的管理页面，如下图所示：

向扩展程序中添加代码

在这一步中，你将会让你的扩展程序做一些事情，而不仅仅是看起来好看。

    1、编辑manifest.json文件，添加下面的内容：

...
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  ...

         在你的扩展程序文件夹里面创建两个文本文件，命名为popup.html和popup.js，并分别添加下面的代码到文件中：

                           HTML code（popup.html）和JavaScript code（popup.js）

    2、回到扩展程序管理页面，点击重新载入以加载新版本的扩展程序。

    3、点击扩展程序的图标，会弹出一个页面，现实popup.html文件的内容。如下图：

如果你没有看到这个页面，请严格按照上面的指示重新做一遍。不要尝试加载扩展程序目录之外的HTML文件——这将不会工作！

注：本系列教程均翻译自谷歌扩展程序官方开发文档