Press "Enter" to skip to content

谷歌(Chrome)浏览器扩展开发二 :入门教程

谷歌浏览器扩展开发第二弹,今天通过一个新的例子来进一步了解一个浏览器的扩展是如何创建的。

扩展有各种不同却又相互联系的组件组成。组件可包括后台脚本、内容脚本、选项页面、UI元素 以及各种逻辑文件。扩展组件是由Web开发技术创建的,Html、CSS和Javascript。扩展的组件取决于它的功能且可能不需要所有的选项。

本教程将构建一个扩展,允许用户更改developer.chrome.com上任意页面的背景颜色。我们将使用多个核心组件来了解它们之间的关系。

首先,创建一个新目录来存放扩展文件。你也可以从这里下载实例扩展程序。

创建清单( Manifest )

扩展从清单文件开始,创建一个名为manifest.json的文件,并写入如下内容:

包含清单文件的扩展目录可以在开发人员模式下以当前状态作为扩展添加。

  1. 打开 chrome://extensions 扩展管理页面,也可以点击浏览器右上角的菜单栏找到更多工具里面的扩展程序打开 ;
  2. 将页面右上角的开发者模式打开;
  3. 点击“加载已解压的扩展程序”,然后选择我们创建的扩展目录加载。

如此该扩展程序则成功安装。 由于清单中未包含任何图标,因此将为扩展加载通用工具栏图标。

添加指令

尽管扩展已经被安装,但是它没有任何指令。创建一个名为background.js的JS文件来引入背景脚本,或者从这里下载文件。所创建的文件需要放入扩展目录中。

背景脚本或者是其他重要组件,都需要在清单文件中进行注册。在清单文件中注册背景脚本以告诉扩展该引用哪个文件,以及该文件的一些行为。

现在扩展已经知道它包含了一个非持久性后台脚本,并将扫描已注册文件中需要监听的重要事件。

在扩展安装的同时,它需要一个来自 持久化变量的信息。

首先在后台脚本中包含一个runtime.onInstalled监听事件。在 onInstalled 监听事件的内部,扩展将使用存储API设置一个值,这个将允许多个扩展的组件访问并更新该值:

大多数API(包括存储API)都必须在清单的“permissions”字段下注册,扩展程序才能使用它们。

来到扩展程序页面,点击扩展的重新加载按钮,一个带有蓝色“背景页”字样的新字段“查看视图”将会呈现。点击链接查看背景页,切换到console栏,将会看到我们输出的内容。

包含用户界面

扩展可以拥有多种形式的用户界面,但是都是以弹窗作为表现形式。在扩展目录中添加一个 popup.html的文件,并写入如下内容:

此扩展将使用一个按钮来更改背景色。与后台脚本一样,此文件需要在清单文件的page_action字段下指定为弹出窗口。

工具栏图标也包含在page_action的default_icons字段下,你可以在此下载图标文件,解压后放在扩展目录中,更新manifest以便扩展知道该如何使用图片:

扩展程序还会在扩展程序管理页面显示图标、权限警告和网站图标。这些图标将会在清单文件中的icons字段中指定:

如果在此阶段重新载入扩展,那么它将显示为一个灰度的图标,但是不会包含任何功能差异。因为page_action在清单文件中声明了,所以将由扩展告知浏览器用户何时可以和popup.html交互。

在runtime.onInstalled监听事件中,使用declarativeContent API将声明的规则添加到后台脚本中。

同样的,扩展也需要在清单文件中授权declarativeContent API使用。

现在,当用户导航到包含“ developer.chrome.com ”的Url时,浏览器右侧工具栏中将显示一个全彩的扩展图标。当扩展图标亮起(彩色) 时 ,用户可以点击扩展图标以打开popup.html弹窗。

弹窗UI的最后一步就是为按钮添加颜色。创建一个名为 popup.js 的文件,将如下代码写入文件中:

此段代码将从popup.html页面中获取按钮元素,并从存储中取得颜色值,然后将颜色作为按钮的背景色。在popup.html文件中载入popup.js。

重新载入扩展以查看最新效果。

层次逻辑

现在扩展已经知道在用户访问包含” developer.chrome.com “的Url时,将显示彩色扩展按钮意为当前扩展可用,当用户点击扩展按钮时弹出popup.html页面获得一个带颜色的按钮。

接下来,我们将进行下一步的交互,在popup.js文件中加入如下代码:

我们在按钮上添加了点击事件,该事件将触发以编程方式插入的内容脚本。此功能将会将页面的背景色更改为和按钮相同的背景色。使用程序注入可以允许用户调用内容脚本,而不是将不需要的代码自动插入网页中。

同样地,我们需要在清单文件中加入activeTab权限,以允许扩展临时访问tabs API。这使得扩展程序可以调用tabs.executeScript。

此扩展程序现在可以正常使用了。重新加载扩展程序,打开包含 ” developer.chrome.com ” 域名的任意页面,点击扩展按钮打开弹窗页面,然后点击页面中的按钮,可以看到页面的背景色也相应改变了。但是你可能希望页面变成其他颜色。

给用户选项

此扩展目前用户用户更改为一个固定颜色,现在我们来添加一个选项页面,通过扩展功能 给与用户更多的选择 ,进一步自定义其浏览体验。

首先,在扩展目录下创建一个名为options.html的文件,写入代码如下:

然后在清单文件中注册选项页面:

重新载入扩展并点击详细信息。向下滚动详细信息页面,然后选择扩展程序选项以查看选项页面,不过当前页面只显示简单的一句话。

最后一步就是添加选项逻辑。创建一个名为options.js的文件,并加入如下代码:

添加了4个选项,并使用onclick事件监听器将它们生成为选择页面上的按钮。用户点击按钮时,它将更新扩展程序全局存储的颜色值。由于所有扩展文件都从全局存储的值取颜色,所以无需更新其它值。

最后,到这里我们的扩展就算开发完成了。

Comments are closed, but trackbacks and pingbacks are open.