《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API

2.5 与 Google 扩展程序相关的 JavaScript API

Google Chrome 为扩展程序提供了许多专用 API，如 chrome.runtime 和 chrome.alarms。 chrome.*API 中的方法通常是异步的，调用后会立即返回结果而不需要等待操作完成，所以对 chrome.*API 的调用往往需要以一个回调函数作为参数以处理调用结果。当然，也有少量 chrome.*API 是同步调用的，这样的 chrome.*API 往往有一个返回类型，也无须使用回调函数 作为参数。

我们一般将 Chrome 提供的 API 分为稳定的 API（stable API）、测试版的 API（beta API）， 以及开发中的 API（dev API）。本节将介绍与 Google 扩展程序相关的 JavaScript API。

1．chrome.browserAction

该 API 会将图标（icon）放在 Google Chrome 主工具栏的右侧，如图 2-24 所示。除图标之外， 还会有工具提示（tooltip）、徽章（badge）和弹出窗口。这些可以通过 getBadgeBackgroundColor()、 getBadgeText()、getPopup()、getTitle()等方法进行修改。在使用 chrome.browserAction 前，我们需 要在 manifest 文件中声明，如代码清单 2-19 所示。

代码清单 2-19

{
"name": "My extension",
..."browser_action": {
..."default_icon": "images/icon32.png"// optional// 等价于 "default_icon": { "32": "images/icon32.png" }},
...}

接下来，我们重点看一下如何监听扩展程序图标的 OnClicked 事件。OnClicked 事件的介绍如 图 2-25 所示。

addListener()方法以一个函数作为参数，用来处理当单击图标时需要完成的逻辑功能，比 如弹出界面等。

2．chrome.windows

使用该 API 可以与浏览器窗口交互，我们可以通过该 API 在浏览器中创建、修改或重新 排列窗口。在使用该 API 之前，我们需要在 manifest 文件中声明，如代码清单 2-20 所示。

代码清单 2-20

{
"name": "My extension",
..."permissions": ["tabs"],
...}

接着，我们看 windows.create()方法的介绍，如图 2-26 所示。

该方法有如下两个参数。

• createData：表示新窗口的配置对象，可以通过该参数设置新窗口的大小、位置、类 型、地址等，详情请参考表 2-6。

• callback：表示新窗口要执行的回调函数。

3．chrome.notifications

使用该 API 可以创建提示用户的浏览器通知，如图 2-27 所示。

图2-27 浏览器通知

在使用该 API 前，需要在 manifest 文件中声明，如代码清单 2-21 所示。

代码清单 2-21

{
"name": "My extension",
..."permissions": ["notifications"],
...}

notifications.create()方法的介绍如图 2-28 所示。

该方法有如下 3 个参数。

• notificationId：用来标记不同的浏览器通知，如果没有指定该参数的值，会自动生成 一个 ID，为可选参数。

• options：表示浏览器通知的配置项，详情请参考表 2-7。

• callback：表示创建浏览器通知后要执行的回调函数。

表 2-7 options 参数的值