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.action.setIcon({
  imageData: {
    16: image16,
    32: image32,
  },
});

浏览器将根据屏幕的像素密度选择要使用的图像。有关此方面的更多信息，请参阅选择图标大小。

path 可选

string 或 object。这可以是图标文件的相对路径，也可以是字典对象。

使用字典对象来指定不同大小的多个图标文件，这样图标就不必为具有不同像素密度的设备进行缩放。如果 path 是字典，则每个属性的值都是一个相对路径，其名称为其大小，如下所示

let settingIcon = browser.action.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，它将在图标设置后使用没有任何参数来实现。

浏览器兼容性

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

示例

以下代码使用浏览器操作来切换对 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",
  });
});

示例扩展

书签它

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