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,则移除特定标签页的徽章背景颜色,使标签页继承全局徽章背景颜色。否则,将全局徽章背景颜色恢复为默认值。
tabId 可选

integer。仅为指定的标签页设置徽章背景颜色。当用户将该标签页导航到新页面时,颜色会重置。

windowId 可选

integer。仅为指定的窗口设置徽章背景颜色。

  • 如果同时提供 windowIdtabId,函数将失败且颜色不会被设置。
  • 如果 windowIdtabId 都省略,则会设置全局徽章背景颜色。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
setBadgeBackgroundColor
details.windowId parameter
The color property of the details parameter can be set to null.
The color property of the details parameter can be set to a string.

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

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