action.setIcon()

details

object. 包含 imageData 或 path 属性的对象，以及可选的 tabId 和 windowId 属性。

imageData 可选

action.ImageDataType 或 object. 这是一个单独的 ImageData 对象或字典对象。

使用字典对象在不同尺寸下指定多个 ImageData 对象，因此图标不必为具有不同像素密度的设备缩放。如果 imageData 是一个字典，则每个属性的值都是一个 ImageData 对象，其名称是其尺寸，例如

js

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

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

path 可选

string 或 object. 这是一个指向图标文件的相对路径，或者是一个字典对象。

使用字典对象在不同尺寸下指定多个图标文件，因此图标不必为具有不同像素密度的设备缩放。如果 path 是一个字典，则每个属性的值都是一个相对路径，其名称是其尺寸，例如

js

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，它将在图标设置完毕后以无参数的形式完成。

以下代码使用浏览器操作来切换对 webRequest.onHeadersReceived 的侦听器，并使用 setIcon() 来指示侦听是否处于开启或关闭状态

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

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

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

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

browser.action.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.action.onClicked.addListener(() => {
  browser.action.setIcon({ imageData: getImageData() });
});

以下代码段在用户单击图标时更新图标，但仅适用于活动标签

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