Add a button to the toolbar
工具栏按钮是 webextensions 的一种主要 UI 组件,它在浏览器的工具栏中作为图标显示。当用户点击图标时,就会发生下面两种事件中的一样:
- 如果按钮有弹出菜单,则显示该弹出。弹出菜单是一个临时对话,它必须使用 HTML,CSS,JavaScript 语言表示。
- 如果没有弹出菜单,则生成一个单击事件,你可以在代码中监听该事件并执行其他响应。
在 WebExtensions 中这种按钮被称为浏览器行为按钮,它们可以像下面这样生成:
- manifest.json 文件中的键
browser_action
被用来定义按钮。 - JavaScript 接口
browserAction
被用来监听单击和更改按钮,或通过代码执行操作。
一个简单的按钮
在这一节中我们将创建一个工具栏按钮的 WebExtension。当用户单击按钮时,会打开一个https://developer.mozilla.org 的新标签页。
首先,新建名为 "button"的文件夹,在该文件夹下创建名为"manifest.json" 的文件,内容如下:
{
"description": "Demonstrating toolbar buttons",
"manifest_version": 2,
"name": "button-demo",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"16": "icons/page-16.png",
"32": "icons/page-32.png"
}
}
}
上面内容显示有一个名为“background.js”后台脚本,以及在“icons”文件夹下的浏览器行为按钮图标。
These icons are from the bitsies! iconset created by Recep Kütük.
接下来,在"buttons" 文件夹下创建 "icons" 文件夹,在该文件夹下存放下面的图标文件:
- "page-16.png" ()
- "page-32.png" ().
我们有两个图标,大图标用于在高分辨率状态下显示。浏览器会自动选择合适的图标。
接着,在附加组件的根目录下创建 "background.js"文件 , 内容如下:
function openPage() {
browser.tabs.create({
url: "https://developer.mozilla.org",
});
}
browser.browserAction.onClicked.addListener(openPage);
该文件用来监听浏览器单击事件。当单击事件发生时运行 openPage()
函数,这个函数通过使用tabs
接口加载指定的页面。
现在完整的附加组件看上去应该像下面这样:
button/ icons/ page-16.png page-32.png background.js manifest.json
安装这个WebExtension ,然后单击按钮:
添加一个弹出菜单
尝试在按钮上添加一个弹出菜单。修改 "manifest.json"如下:
{
"description": "Demonstrating toolbar buttons",
"manifest_version": 2,
"name": "button-demo",
"version": "1.0",
"browser_action": {
"browser_style": true,
"default_popup": "popup/choose_page.html",
"default_icon": {
"16": "icons/page-16.png",
"32": "icons/page-32.png"
}
}
}
我们把原文件做了三处改变:
- 我们不需要引用“background.js”文件,因为会在弹出菜单的脚本中处理该行为 (你也可以使用“background.js“来运行一个弹出窗口,只是现在我们不需要这么做).
- 我们添加了
"browser_style": true
, 使弹出样式看上去更像是浏览器的一部分。 - 最后,我们添加
"default_popup": "popup/choose_page.html"
, 告诉浏览器按钮被单击时弹出菜单,菜单的内容则在"popup/choose_page.html"页面中。
现在我们要创建弹出菜单。新建名为 "popup" 的文件夹,然后在文件夹内创建"choose_page.html" 文件,该文件内容如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="choose_page.css" />
</head>
<body>
<div class="page-choice">developer.mozilla.org</div>
<div class="page-choice">support.mozilla.org</div>
<div class="page-choice">addons.mozilla.org</div>
<script src="choose_page.js"></script>
</body>
</html>
你会发现这是一个普通的 HTML 页面,它包含三个 <div>
元素,在每个元素中有一个 Mozilla 页面地址。另外还包括一个 CSS 文件和一个 JavaScript 文件,我们会在后面添加它们。
在 "popup" 文件夹下,创建名为 "choose_page.css" 的文件,内容如下:
html,
body {
width: 300px;
}
.page-choice {
width: 100%;
padding: 4px;
font-size: 1.5em;
text-align: center;
cursor: pointer;
}
.page-choice:hover {
background-color: #cff2f2;
}
这是我们弹出菜单的部分样式。
接着,在 "popup" 文件夹下,创建名为 "choose_page.js" 的文件,内容如下:
document.addEventListener("click", function (e) {
if (!e.target.classList.contains("page-choice")) {
return;
}
var chosenPage = "https://" + e.target.textContent;
browser.tabs.create({
url: chosenPage,
});
});
在我们的脚本中,我们会监听单击的弹出项。首先检查单击的对象是否在给出的页面选择项中,如果不在,则不做任何处理;如果在,则从单击的页面选择项中获取 URL 地址,然后打开一个对应页面的新标签页。注意:我们在弹出脚本中使用 WebExtension 接口,和在后台脚本中使用接口一样。
附加组件的结构最后看上去应该像下面这样:
button/ icons/ page-16.png page-32.png popup/ choose_page.css choose_page.html choose_page.js manifest.json
重新加载附加组件,再次单击按钮,并尝试在弹出菜单中单击某个选择项:
页面行为
页面行为(Page actions) 类似浏览器行为,只是页面行为仅针对特定页面,而浏览器行为则全局有效。
由于浏览器行为总是发生,而页面行为只在特定页面显示。所以页面行为按钮在 URL 地址栏中显示,而浏览器行为按钮则在浏览器工具栏中显示。
了解更多
-
browser_action
manifest key -
browserAction
API -
Browser action examples:
-
page_action
manifest key -
pageAction
API -
Page action examples: