初识 Chrome Extension

Chrome Extension 是 Chrome 浏览器的扩展，也就是大家所说的『插件』。Chrome 插件其实就是运用 Web 技术开发的能增强 Chrome 功能的软件。

如果您有用 Electron 开发桌面应用或者开发微信小程序的经验，就应该很容易理解 Chrome Extension 的开发原理。Electron 是运用 Web 技术加 Electron 提供给我们的 API 开发，那么就是 Chrome Extension 的开发应用的就是 Web 技术加上 Chrome 的 API 即可。

具体点地说，Chrome Extension API 中已经列出了我们所有能用到的 API，可以做到但不限于：

网络请求控制
自定义右键
网页中插入 CSS 、JavaScript 文件
管理书签
管理 cookie
omnibox 管理
...

细心的你，可能看到还有 Chrome App API，关于 Chrome App 我们后面会说到。

你的第一款插件

现在，让我们开始你的第一款插件开发。

下载init这个文件夹，可以看见，这个文件夹及其简单，只有 manifest.json 文件和 img 文件夹，甚至 img 都不是必须的，只要一个 manifest.json 就可以了。
在地址栏输入 chrome://extensions 或者 菜单->更多工具->扩展程序 进入插件管理页面，然后打开 开发者模式
点击 加载已解压的扩展程序，选择刚下载的 init 文件夹
完成了！你现在可以看到你的第一款 Chrome Extension 了！

好了，请保存好 init 文件夹，这是我们之后每一个 demo 的基础，你会看到我们每一个复杂的实例都是从这个简单的文件夹开始的。

manifest.json 文件

一个Chrome Extension只允许包含一个manifest.json文件（清单文件），它提供了有关Extension方方面面的信息，例如你的Chrome Extension将具备什么样的能力（调用chrome api所需要的权限设置），你的Chrome Extension popup将是一个什么样的图标icon等等。

如下所示是一个典型的清单文件：

{
  "name": "我的扩展程序",
  "version": "2.1",
  "description": "从 Google 获取信息。",
  "icons": { "128": "icon_128.png" },
  "background": {
    "persistent": false,
    "scripts": ["bg.js"]
  },
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "default_popup": "popup.html"
  }
}

每一项所属的意义都是明确的，例如icons，如果你想配置popup的icon，那么key-value就是"16":"img/icon.png"，如果你想配置background面板的icon，那么key-value就是"48:"img/icon.png""。manifest.json文件几乎贯彻了你的Chrome Extension应用程序。

更多清单的信息，可查阅 [Manifest File Format][Manifest File Format]