chrome插件中文开发文档(非官方)

教程:入门 (Hello, World!)

这个教程将带你创建一个简单的扩展.你将会添加一个点击时显示一个自动生成的页面的图标在chrome上图标和页面看起来会是这样：

a window with a grid of images related to 'Hello World'

你可以使用任何已发布版本的chrome开发扩展，在windows上，Mac或者Linux。 你开发的扩展在任何chrome支持的平台上运行都不会有任何变化。

创建和载入插件

这个插件我们将创建一个 浏览器按钮,它添加一个你可以控制其行为的按钮在chrome工具栏上

  1. 在你电脑上某个地方创建一个文件夹来包含所有扩展程序代码。

  2. 在你的扩展文件夹中, 创建一个名为 manifest.json的文本文件, 将下面的代码保存进去: 

    {
  "name": "我的第一个扩展程序",
  "version": "1.0",
  "manifest_version": 2,
  "description": "第一个由我开发的扩展",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

  3. 保存这个图标到插件目录下:

    下载 icon.png

  4. 载入插件。

    1. 单击多功能框最右边的按钮 并选择 工具 > 扩展程序来打开插件管理页面。
    2. 确保右上角开发者模式复选框已选中。
    3. 单击 载入正在开发的扩展程序...，弹出文件选择对话框。
    4. 浏览至您的扩展程序文件所在的目录，并选择确定.

如果扩展程序有效的话，它将被载入并且立刻处于活动状态！如果无效的话，页面顶部将显示错误消息，纠正错误再重试。

添加代码

在这个步骤中，你将会让你的插件做一些看起来不错的事情

  1. 编辑manifest.json 来添加下面的代码:

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

    在你的插件目录中, 创建后面两个文件 popup.html 和 popup.js. 添加下面的代码到文件中:

    HTML code (popup.html) and JavaScript code (popup.js) for hello_world
  2. 返回到扩展管理页面,点击重新加载按钮 来加载新版本的扩展。
  3. 点击插件图标. 一个显示 popup.html内容的弹出窗口将会出现.

它看起来应该是这样:

a popup with a grid of images related to HELLO WORLD

如果你没看到弹出窗口, 试着再次跟着教程再做一次, 不要尝试加载插件目录外的HTML文件 — 它将不会工作!

现在做什么?

这里有一些建议接下来看什么:

如果你不喜欢阅读,尝试下面: