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 上查看此页面 • 报告此内容的问题