action.setBadgeBackgroundColor()

设置徽章的背景颜色。没有特定徽章背景颜色的标签页将继承全局徽章背景颜色,在 Firefox 中默认为 [217, 0, 0, 255]

注意:此 API 在 Manifest V3 或更高版本中可用。

在 Firefox 中,除非使用 action.setBadgeTextColor() 显式设置徽章文本颜色,否则徽章文本颜色将自动设置为黑色或白色,以最大限度地提高与指定徽章背景颜色的对比度。例如,如果您将徽章背景颜色设置为白色,则默认徽章文本颜色将设置为黑色,反之亦然。

其他浏览器始终使用白色文本颜色,因此选择深色背景可能更佳,以确保文本可读。

语法

js
browser.action.setBadgeBackgroundColor(
  details // object
)

参数

details

具有以下属性的对象:

color

颜色,指定为以下之一:

  • 一个字符串:任何 CSS <color> 值,例如 "red""#FF0000""rgb(255 0 0)"。如果字符串不是有效的颜色,返回的 Promise 将被拒绝,并且背景颜色不会被更改。
  • 一个 action.ColorArray 对象。
  • null。如果指定了 tabId,则会移除特定于标签页的徽章背景颜色,以便该标签页继承全局徽章背景颜色。否则,它会将全局徽章背景颜色恢复到默认值。

Firefox 中的默认颜色是:[217, 0, 0, 255]

tabId 可选

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

windowId 可选

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

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

示例

一个背景颜色,最初是红色,当浏览器操作被点击时变为绿色。

js
browser.action.setBadgeText({ text: "1234" });
browser.action.setBadgeBackgroundColor({ color: "red" });

browser.action.onClicked.addListener(() => {
  browser.action.setBadgeBackgroundColor({ color: "green" });
});

仅为活动标签页设置徽章背景颜色。

js
browser.action.setBadgeText({ text: "1234" });
browser.action.setBadgeBackgroundColor({ color: "red" });

browser.action.onClicked.addListener((tab) => {
  browser.action.setBadgeBackgroundColor({
    color: "green",
    tabId: tab.id,
  });
});

浏览器兼容性

注意: 此 API 基于 Chromium 的 chrome.action API。此文档源自 Chromium 代码中的 browser_action.json