browserAction.setBadgeBackgroundColor()
设置徽章的背景颜色。没有指定徽章背景颜色的标签页将继承全局徽章背景颜色,该颜色在 Firefox 中默认为 [217, 0, 0, 255]
。
从 Firefox 63 开始,除非使用 browserAction.setBadgeTextColor()
显式设置徽章文本颜色,否则徽章文本颜色将自动设置为黑色或白色,以最大限度地提高与指定徽章背景颜色的对比度。例如,如果将徽章背景颜色设置为白色,默认的徽章文本颜色将设置为黑色,反之亦然。
其他浏览器始终使用白色文本颜色,因此设置深色背景可能更好,以确保文本可读。
语法
js
browser.browserAction.setBadgeBackgroundColor(
details // 对象
)
参数
details
-
一个包含以下属性的对象:
color
-
颜色,可以是以下几种之一:
- 字符串:任何 CSS <color> 值,例如
"red"
、"#FF0000"
或"rgb(255 0 0)"
。如果字符串不是有效颜色,返回的 Promise 将被拒绝,背景颜色不会改变。 - 一个
browserAction.ColorArray
对象。 null
。如果指定了tabId
,则移除特定标签页的徽章背景颜色,使标签页继承全局徽章背景颜色。否则,将全局徽章背景颜色恢复为默认值。
- 字符串:任何 CSS <color> 值,例如
tabId
可选-
integer
。仅为指定的标签页设置徽章背景颜色。当用户将该标签页导航到新页面时,颜色会重置。 windowId
可选-
integer
。仅为指定的窗口设置徽章背景颜色。
- 如果同时提供
windowId
和tabId
,函数将失败且颜色不会被设置。 - 如果
windowId
和tabId
都省略,则会设置全局徽章背景颜色。
浏览器兼容性
BCD tables only load in the browser
Firefox 中的默认颜色为:[217, 0, 0, 255]
。
示例
当浏览器操作被点击时,徽章背景颜色从红色变为绿色:
js
browser.browserAction.setBadgeText({ text: "1234" });
browser.browserAction.setBadgeBackgroundColor({ color: "red" });
browser.browserAction.onClicked.addListener(() => {
browser.browserAction.setBadgeBackgroundColor({ color: "green" });
});
仅为活动标签页设置徽章背景颜色:
js
browser.browserAction.setBadgeText({ text: "1234" });
browser.browserAction.setBadgeBackgroundColor({ color: "red" });
browser.browserAction.onClicked.addListener((tab) => {
browser.browserAction.setBadgeBackgroundColor({
color: "green",
tabId: tab.id,
});
});
示例扩展
备注:
此 API 基于 Chromium 的 chrome.browserAction
API。该文档衍生自 Chromium 代码中的 browser_action.json
。