browserAction.setIcon()

設定瀏覽器操作的圖示。

您可以將單個圖示指定為影像檔案的路徑或 browserAction.ImageDataType 物件。

透過提供包含多個路徑或 ImageData 物件的字典，您可以指定不同尺寸的多個圖示。這意味著圖示不必為具有不同畫素密度的裝置進行縮放。

沒有特定圖示的標籤頁將繼承全域性圖示，全域性圖示預設為清單中指定的 default_icon。

這是一個非同步函式，返回一個 Promise。

語法

let settingIcon = browser.browserAction.setIcon(
  details         // object
)

引數

details

object。一個包含 imageData 或 path 屬性的物件，並且可選地包含 tabId 和 windowId 屬性中的一個或兩個。

imageData 可選

browserAction.ImageDataType 或 object。這是一個 ImageData 物件或一個字典物件。

使用字典物件指定不同尺寸的多個 ImageData 物件，這樣圖示就不必為具有不同畫素密度的裝置進行縮放。如果 imageData 是字典，則每個屬性的值是一個 ImageData 物件，其名稱是其尺寸，如下所示：

let settingIcon = browser.browserAction.setIcon({
  imageData: {
    16: image16,
    32: image32,
  },
});

瀏覽器將根據螢幕的畫素密度選擇要使用的影像。有關詳細資訊，請參閱選擇圖示尺寸。

path 可選

string 或 object。這可以是圖示檔案的相對路徑，也可以是字典物件。

使用字典物件指定不同尺寸的多個圖示檔案，這樣圖示就不必為具有不同畫素密度的裝置進行縮放。如果 path 是字典，則每個屬性的值是一個相對路徑，其名稱是其尺寸，如下所示：

let settingIcon = browser.browserAction.setIcon({
  path: {
    16: "path/to/image16.jpg",
    32: "path/to/image32.jpg",
  },
});

瀏覽器將根據螢幕的畫素密度選擇要使用的影像。有關詳細資訊，請參閱選擇圖示尺寸。

tabId 可選

integer。僅為給定的標籤頁設定圖示。當用戶將此標籤頁導航到新頁面時，圖示將被重置。

windowId 可選

integer。為給定的視窗設定圖示。

如果同時提供了 windowId 和 tabId，則函式將失敗，圖示不會被設定。
如果同時省略了 windowId 和 tabId，則會設定全域性圖示。

如果 imageData 和 path 中的每一個都是 undefined、null 或空物件

如果指定了 tabId，並且該標籤頁設定了標籤頁特定的圖示，那麼該標籤頁將繼承其所屬視窗的圖示。
如果指定了 windowId，並且該視窗設定了視窗特定的圖示，那麼該視窗將繼承全域性圖示。
否則，全域性圖示將被重置為清單圖示。

返回值

一個 Promise，一旦設定了圖示，它將以無引數的形式履行。

示例

下面的程式碼使用瀏覽器操作來切換 webRequest.onHeadersReceived 的監聽器，並使用 setIcon() 來指示監聽器是開啟還是關閉。

function logResponseHeaders(requestDetails) {
  console.log(requestDetails);
}

function startListening() {
  browser.webRequest.onHeadersReceived.addListener(
    logResponseHeaders,
    { urls: ["<all_urls>"] },
    ["responseHeaders"],
  );
  browser.browserAction.setIcon({ path: "icons/listening-on.svg" });
}

function stopListening() {
  browser.webRequest.onHeadersReceived.removeListener(logResponseHeaders);
  browser.browserAction.setIcon({ path: "icons/listening-off.svg" });
}

function toggleListener() {
  if (browser.webRequest.onHeadersReceived.hasListener(logResponseHeaders)) {
    stopListening();
  } else {
    startListening();
  }
}

browser.browserAction.onClicked.addListener(toggleListener);

下面的程式碼使用 ImageData 物件來設定圖示。

function getImageData() {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 100, 100);

  return ctx.getImageData(50, 50, 100, 100);
}

browser.browserAction.onClicked.addListener(() => {
  browser.browserAction.setIcon({ imageData: getImageData() });
});

以下程式碼片段在使用者單擊它時更新圖示，但僅針對活動標籤頁。

browser.browserAction.onClicked.addListener((tab) => {
  browser.browserAction.setIcon({
    tabId: tab.id,
    path: "icons/updated-48.png",
  });
});

擴充套件程式示例

bookmark-it

瀏覽器相容性

注意： 此 API 基於 Chromium 的 chrome.browserAction API。此文件源自 Chromium 程式碼中的 browser_action.json。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年7月17日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題