browserAction.setBadgeBackgroundColor()

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

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

其他浏览器始终使用白色文本颜色，因此设置深色背景可能更可取，以确保文本可读。

语法

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

参数

details

具有以下属性的对象

color

颜色，指定为以下之一

  • 字符串：任何 CSS <color> 值，例如 "red"、"#FF0000" 或 "rgb(255 0 0)"。如果字符串不是有效的颜色，则返回的 Promise 将被拒绝，并且背景颜色不会更改。
  • 一个 browserAction.ColorArray 对象。
  • null。如果指定了 tabId，则会删除特定于选项卡的徽章背景颜色，以便选项卡继承全局徽章背景颜色。否则，它会将全局徽章背景颜色恢复为默认值。
tabId 可选

integer。仅为给定选项卡设置徽章背景颜色。当用户将此选项卡导航到新页面时，颜色将重置。

windowId 可选

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

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

浏览器兼容性

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

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。