Chrome Extension Overview 笔记

| 分类 Web 

记录一下 阅读 chrome extension 的笔记,原文地址:https://developer.chrome.com/extensions/overview.

1 基础

Chrome 扩展实际上是打包在一起的一个文件集合,包括: HTML, CSS, JavaScript, images 等等。这些文件组成的扩展用于向浏览器增加新的功能。 Chrome 扩展本质上就是网页,可以使用从 XMLHttpRequest , json , HTML5 等所有的浏览器提供的 API。

2 文件

Chrome 扩展有如下的文件:

  • 一个 Manifest File
  • 一个或多个的 HTML 文件
  • (可选) 一个或多个的 JavaScript 文件
  • (可选) 任何其他的所需文件,如图片等

扩展开发的时候,将所有文件放在一个目录下,Chrome 可以从该目录下加载开发中的插件。开发完成之后,其中的所有文件会被打包成一个扩展名为 .rts ZIP 包。

2.1 Manifest 文件

Manifest 文件用于向浏览器提供扩展的基本信息,比如文件以及兼容性等。下面是一个典型的 Manifest 文件:

 1: {
 2:   "name": "My Extension",
 3:   "version": "2.1",
 4:   "description": "Gets information from Google.",
 5:   "icons": { "128": "icon_128.png" },
 6:   "background": {
 7:     "persistent": false,
 8:     "scripts": ["bg.js"]
 9:   },
10:   "permissions": ["http://*.google.com/", "https://*.google.com/"],
11:   "browser_action": {
12:     "default_title": "",
13:     "default_icon": "icon_19.png",
14:     "default_popup": "popup.html"
15:   }
16: }

Manifest 的具体细节,参考:https://developer.chrome.com/extensions/manifest.

3 框架

扩展的大概组成如下:

  • 后台页 ( background page ) : 不可见但包含了该扩展主要逻辑的页面。
  • UI Pages : 用于展示扩展提供的某些内容。
  • Content Script : 用于与加载的网页交互的 JS 脚本。

3.1 Background Page

后台页包含了扩展的主要逻辑。根据后台页是否始终打开,分为两种:

  • Persistent background pages : 始终打开
  • Event Pages: 按需打开和关闭.

3.2 UI Pages

扩展可以有多个 UI Pages,例如:

  • Popup page: 用于 BrowserActions。
  • Options : 用于更改选项。

同一扩展中的 UI Pages 可以访问其他 UI Pages 的 DOM。

3.3 Content Scripts

扩展通过 Content Scripts 与网页交互,它由 JavaScript 组成,并在加载网页时候执行。 Content Scripts 可以访问网页的 DOM,但是无法更改 background page 的 DOM。

Content Scripts 通过消息与后台页以及其他 UI Pages 交互。

chrome_extention_components.png

4 使用 Chrome API

Chrome 为扩展提供了以 chrome. 开头的 Chrome API,用于让扩展和浏览器合作的更紧密。

4.1 同步与异步

4.1.1 异步 API

chrome.* 的 API 大多为异步 API:该类型 API 调用时候会直接返回,执行的结果将通过注册的回调通知给扩展。

1: chrome.tabs.create(object createProperties, function callback)

4.1.2 同步 API

有些 API 为同步 API,不需要回调,该类 API 在结果返回之前会阻塞。例如:

1: string chrome.runtime.getURL()

5 页面之间的交互

扩展的页面间可以直接相互交互,=chrome.extension= 提供了 getViews()getBackgroundPage() 用于获取某个 Page 和后台页。

6 数据的存储

插件可以通过 Storage API 或者 HTML5 的 Web Storage API 来存储数据。但如果扩展处于匿名模式 (incognito mode),则无法存储数据,可以通过相关的 Tab 或者 Window 的 incognito 属性来检查插件是否处于匿名状态:

1: function saveTabData(tab, data) {
2:   if (tab.incognito) {
3:     chrome.runtime.getBackgroundPage(function(bgPage) {
4:       bgPage[tab.url] = data;      // Persist data ONLY in memory
5:     });
6:   } else {
7:     localStorage[tab.url] = data;  // OK to store data
8:   }
9: }

上一篇     下一篇