初识 Chrome Extension

1,377 阅读3分钟

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 我们后面会说到。

你的第一款插件

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

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

4. 完成了!你现在可以看到你的第一款 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

如何调试你的 Chrome Extension

调试 Chrome Extension 就如同调试一款网页应用程序一般简单,借助 Chrome Dev Tool 提供的能力,我们能很方便的进行调试。

Popup 的调试面板,右键点击 查看,如图:

Background 的调试面板,需要在地址栏中输入 chrome://extensions/ ,然后选择当前要调试扩展的background。

Options 的调试面板可以在 Popup 中右键选择 Option 进入页面后,按正常的网页调试来开启,如图:

Chrome Web App 与 Extension 的区别

在 Chrome 的世界里还有另外一种与 Extension 稍有区别的类型,那就是 Chrome Web App。它通常具备独立的用户界面,并且具备典型丰富的用户交互功能。

具体点来说:

  • API调用不一样
  • 打包,安装的方式不一样
  • 独立的应用程序

一个非常典型的 Chrome Web App,如:Postman