扩展程序由不同但共同的组件组成。组件可以包含后台脚本、内容脚本、选项页面、界面元素和各种逻辑文件。扩展程序组件是使用网络开发技术(HTML、CSS 和 JavaScript)创建的。扩展程序的组件将取决于其功能,不一定需要所有选项。
本教程将构建一个扩展程序,让用户能够更改 developer.chrome.com 上任何页面的背景颜色。该扩展程序将使用许多核心组件来简要介绍它们之间的关系。
首先,请创建一个新目录来存放扩展程序的文件。
您可以在此处找到完成后的扩展程序。
创建清单
扩展程序从其清单开始。创建一个名为 manifest.json
的文件,并在该文件中添加以下代码。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
在开发者模式下,可将存放清单文件的目录添加为扩展程序(处于当前状态)。
- 前往
chrome://extensions
,打开“扩展程序管理”页面。- 您也可通过以下方式打开“扩展程序管理”页面:点击 Chrome 菜单,将光标悬停在更多工具上,然后选择扩展程序。
- 点击开发者模式旁边的切换开关以启用开发者模式。
- 点击加载未封装按钮,然后选择扩展程序目录。
搞定!该扩展程序已成功安装。由于清单中未包含任何图标,因此系统将为该扩展程序创建一个通用工具栏图标。
添加说明
虽然该扩展程序已安装,但没有任何说明。通过创建一个名为 background.js
的文件并将其置于扩展程序目录中,来引入后台脚本。
后台脚本和许多其他重要组件必须在清单中注册。在清单中注册后台脚本可告知扩展程序要引用哪个文件,以及该文件的行为方式。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
该扩展程序现在知道自己包含一个非永久性后台脚本,并会扫描注册文件以查找需要监听的重要事件。
此扩展程序一经安装,便需要永久性变量中的信息。首先,在后台脚本中添加 runtime.onInstalled
的监听事件。在 onInstalled
监听器内,该扩展程序将使用 storage API 设置一个值。这样一来,多个扩展程序组件就可以访问并更新该值。
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
大多数 API(包括 storage API)都必须在清单中的 "permissions"
字段下注册,这样扩展程序才能使用它们。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
返回扩展程序管理页面并点击重新加载链接。新增了一个 Inspect views 字段,其中包含蓝色链接 background page。
点击链接即可查看后台脚本的控制台日志“The color is green.
”
引入界面
扩展程序可以具有多种形式的界面,但这种界面会使用弹出式窗口。创建一个名为 popup.html
的文件并将其添加到目录中。此扩展程序使用一个按钮来更改背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
与后台脚本一样,需要在清单中的 page_action
下将此文件指定为弹出式窗口。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
工具栏图标的标识也包括在 default_icons
字段中的 page_action
下。在此处下载图片文件夹,将其解压缩,然后放置在该扩展程序的目录中。请更新清单,以便扩展程序知道如何使用这些图片。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
扩展程序还会在扩展程序管理页面、权限警告和网站图标上显示图片。这些映像在清单中的 icons
下指定。
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
如果在此阶段重新加载该扩展程序,它将包含灰度图标,但没有任何功能差异。由于清单中声明了 page_action
,因此由扩展程序决定何时告知浏览器用户何时可以与 popup.html
互动。
使用 runtime.onInstalled
监听器事件中的 declarativeContent
API 向后台脚本添加声明的规则。
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
此扩展程序需要有权访问其清单中的 declarativeContent
API。
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
现在,当用户导航到包含 "developer.chrome.com"
的网址时,浏览器会在浏览器工具栏中显示全彩页面操作图标。当该图标为全彩图标时,用户可以点击它查看 pop.html。
弹出式界面的最后一步是为按钮添加颜色。创建一个名为 popup.js
的文件,并将以下代码添加到扩展程序目录中。
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
此代码会从 popup.html
获取按钮,并从存储空间请求颜色值。然后,它会将该颜色用作按钮的背景。在 popup.html
中向 popup.js
添加脚本标记。
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
请重新加载该扩展程序以查看绿色按钮。
层逻辑
该扩展程序现在知道该弹出式窗口应该可供 developer.chrome.com 上用户访问,并会显示彩色按钮,但还需要相应的逻辑才能实现进一步的用户互动。更新 popup.js
以包含以下代码。
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
更新后的代码会在按钮上添加一个 onclick
事件,该事件会触发以编程方式注入的内容脚本。这会将网页的背景颜色变成与按钮相同的颜色。利用程序化注入,您可以实现由用户调用的内容脚本,而不是将不需要的代码自动插入网页。
清单需要有 activeTab
权限,才能允许扩展程序临时访问 tabs
API。这样一来,此扩展程序就可以调用 tabs.executeScript
。
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
该扩展程序现已完全正常运行!重新加载扩展程序,刷新此页面,打开弹出式窗口,然后点击按钮将其变为绿色!不过,某些用户可能需要将背景更改为其他颜色。
为用户提供选项
该扩展程序目前只允许用户将背景更改为绿色。添加选项页面可让用户更好地控制该扩展程序的功能,从而进一步自定义其浏览体验。
首先,在名为 options.html
的目录中创建一个名为 options.html
的文件,并添加以下代码。
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
然后在清单中注册选项页面
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
重新加载该扩展程序,然后点击详细信息。
向下滚动详情页面,然后选择 Extension options 以查看选项页面,不过该页面当前会显示为空白。
最后一步是添加选项逻辑。使用以下代码在扩展程序目录中创建一个名为 options.js
的文件。
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
然后,在选项页面上以按钮的形式提供了四种颜色选项,其中包含 onClick 事件监听器。当用户点击某个按钮时,该按钮会更新扩展程序的全局存储空间中的颜色值。由于扩展程序的所有文件都会从全局存储空间中提取颜色信息,因此无需更新其他值。
更进一步
恭喜!该目录现在包含一个功能完备的 Chrome 扩展程序,尽管很简单。
后续操作
- Chrome 扩展程序概览略有回溯,并详细说明了扩展程序架构的总体详情,并提供了开发者可能希望熟悉的一些具体概念。
- 如需了解可用于调试扩展程序的选项,请参阅调试教程。
- Chrome 扩展程序可以访问强大的 API,远不止于开放 Web 提供的 API。 chrome.* API 文档将逐步介绍每个 API。
- 开发者指南还有数十个其他链接,分别指向与创建高级扩展程序相关的文档。