TL;DR:本文说明怎样创建一个简单的 Chrome 扩展,本地安装后,点击工具栏的扩展图标,弹出页面显示 Hello World。

这个扩展不会发布到 Chrome Web Store,因此会通过本地安装把扩展载入到你的 Chrome 浏览器。

首先创建一个文件夹存放扩展的源代码。在地址栏输入 chrome://extensions 打开扩展管理页面(或者通过右上角菜单 > More Tools > Extensions 打开),启用页面右上角的 Developer mode,在弹出的工具栏中点击 Load unpacked,选择载入源代码所在的文件夹。

当然这个时候源代码所在的文件夹还是空的,要向 Chrome 浏览器亮明身份,证明自己是合格的 Chrome 扩展,首先你需要 manifest.json 文件作为入口。

manifest.json

下面是本例用到的 `manifest.json 文件内容,除 "manifest_version": 2 是规定,其它各项不言自明。

{
  "manifest_version": 2,
  "name": "Hello World",
  "description": "Quick launch",
  "version": "1.0.0",
  "icons": {
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

文件列表

所以源代码总共三个文件

准备好这三个文件,在扩展管理页面通过 Load unpacked 载入安装,Hello World 扩展大功告成。

本例的目的把不必要的枝节去掉,搭出一个 Chrome 扩展的最基础原型,说明它有多简单。究其原因,实在因为曾经有人没把它说明得简单导致了我的挫败感。

之后,仅仅是替换本例中 HTML 的内容,比如替换为网址导航,或展示其它的内容,都是有实际用处的创意。对非专业人士来说,按需定制的浏览器扩展也是有意思的玩意儿。

在原形基础上,可以再添加 JS,通过 API 和浏览器互动为扩展添加更多的功能;开发一个功能全须全尾的扩展,发布到 Chrome Web Store 给更多的人使用。这些循序渐进的后继步骤,划出一条浏览器扩展开发的光明大道,而这一切,都始于 Hello World ……