action
| 类型 | Object |
|---|---|
| 必填 | 否 |
| Manifest 版本 | 3 或更高版本 |
| 示例 |
json |
操作(action)是您的扩展程序添加到浏览器工具栏的按钮。该按钮有一个图标,并且可以选择性地包含一个弹出窗口,其内容使用 HTML、CSS 和 JavaScript 指定。
此键在 Manifest V3 扩展程序中取代了 browser_action。
要包含浏览器工具栏按钮,您必须指定此键。指定后,您可以使用 action API 以编程方式控制该按钮。
如果您提供了弹出窗口,则当用户单击该按钮时会打开弹出窗口,并且您在弹出窗口中运行的 JavaScript 可以处理用户与该弹出窗口的交互。如果您没有提供弹出窗口,则当用户单击该按钮时,将向您扩展程序的 背景脚本 分派一个点击事件。
语法
action 键是一个对象,可以包含以下任意属性,所有属性都是可选的。
| 名称 | 类型 | 描述 |
|---|---|---|
browser_style
可选 已弃用 |
Boolean |
可选,默认为 请勿将 |
default_area
可选 |
String |
定义了按钮最初放置在浏览器中的哪个部分。这是一个字符串,可以取以下四个值之一:
此属性仅在 Firefox 中受支持。 此属性是可选的,默认为 "menupanel"。 Firefox 会记住扩展程序的 扩展程序安装后无法更改按钮的位置,但用户可能可以使用浏览器内置的 UI 自定义机制移动按钮。 |
default_icon
可选 |
Object 或 String |
使用此项指定一个或多个操作图标。默认情况下,图标显示在浏览器工具栏中。 图标指定为相对于 manifest.json 文件本身的 URL。 您可以通过在此处提供一个字符串来指定单个图标文件。 json 要指定不同尺寸的多个图标,请在此处指定一个对象。每个属性的名称是图标的像素高度,并且必须可转换为整数。值是 URL。例如: json 您不能指定相同大小的多个图标。 |
default_popup
可选 |
String |
包含弹出窗口规格的 HTML 文件的路径。 HTML 文件可以使用 与普通网页不同,在弹出窗口中运行的 JavaScript 可以访问所有 WebExtension API(当然,前提是扩展程序具有相应的 权限)。 这是一个 可本地化属性。 |
default_title
可选 |
String |
鼠标悬停在按钮上时显示的按钮工具提示。如果按钮被添加到浏览器的菜单面板,则该工具提示也会显示在应用程序图标下方。 这是一个 可本地化属性。 |
theme_icons
可选 |
Array |
此属性使您能够为主题指定不同的图标,具体取决于 Firefox 检测到主题使用的是深色还是浅色文本。 如果存在此属性,它将是一个包含至少一个
图标以相对于 manifest.json 文件的 URL 来指定。 您应该提供 16x16 和 32x32(用于视网膜显示屏)的 |
选择图标大小
操作的图标可能需要在不同上下文中以不同大小显示。
- 图标显示在浏览器工具栏中。较早版本的 Firefox 支持将图标放置在浏览器菜单面板(用户单击“汉堡包”图标时打开的面板)的选项。在这些版本的 Firefox 中,菜单面板中的图标比工具栏中的图标大。
- 在 Retina 屏幕等高密度显示屏上,图标需要大一倍。
如果浏览器在给定情况下找不到合适大小的图标,它会选择最佳匹配并进行缩放。缩放可能会使图标显得模糊,因此仔细选择图标大小很重要。
有两种主要方法可以做到这一点。您可以提供一个 SVG 文件作为单个图标,它会被正确缩放。
"default_icon": "path/to/geo.svg"
或者,您可以提供几种不同大小的图标,浏览器将选择最佳匹配。
在 Firefox 中
- 工具栏中图标的默认高度和宽度为 16 *
window.devicePixelRatio。 - 菜单面板中图标的默认高度和宽度为 32 *
window.devicePixelRatio。
因此,您可以提供三个图标文件,并像这样指定它们,以精确匹配正常显示屏和 Retina 显示屏的大小:
"default_icon": {
"16": "path/to/geo-16.png",
"32": "path/to/geo-32.png",
"64": "path/to/geo-64.png"
}
如果 Firefox 找不到与所需大小完全匹配的图标,它将选择指定尺寸中大于理想尺寸的最小图标。如果所有图标都小于理想尺寸,它将选择指定尺寸中最大的图标。
示例
"action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
}
}
一个只包含图标的操作,指定了 2 种大小。当用户单击该图标时,扩展程序的背景脚本可以使用类似如下的代码接收点击事件:
browser.action.onClicked.addListener(handleClick);
"action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
}
一个包含图标、标题和弹出窗口的操作。单击按钮时会显示弹出窗口。
浏览器兼容性
加载中…