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,則會刪除標籤頁特定的徽章背景顏色,以便該標籤頁繼承全域性徽章背景顏色。否則,它會將全域性徽章背景顏色恢復到預設值。

Firefox 中的預設顏色是:[217, 0, 0, 255]

tabId 可選

integer。僅為給定標籤頁設定徽章背景顏色。當用戶將此標籤頁導航到新頁面時,顏色會被重置。

windowId 可選

integer。僅為給定視窗設定徽章背景顏色。

  • 如果同時提供了 windowIdtabId,則函式將失敗,顏色不會被設定。
  • 如果同時省略了 windowIdtabId,則會設定全域性徽章背景顏色。

示例

背景顏色最初為紅色,在瀏覽器操作被點選時變為綠色

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