action.setBadgeBackgroundColor()

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

注意：此 API 在清单 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，则它将移除特定于标签的徽章背景颜色，以便标签继承全局徽章背景颜色。否则，它会将全局徽章背景颜色恢复为默认值。
tabId 可选

整数。仅为给定标签设置徽章背景颜色。当用户将此标签导航到新页面时，颜色将重置。

windowId 可选

整数。仅为给定窗口设置徽章背景颜色。

  • 如果同时提供了 windowId 和 tabId，则函数将失败，并且颜色不会设置。
  • 如果同时省略了 windowId 和 tabId，则改为设置全局徽章背景颜色。

示例

最初为红色的背景颜色，当浏览器操作被点击时变为绿色

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,
  });
});

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

Firefox 中的默认颜色为：[217, 0, 0, 255]。

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