**问题：**Chrome浏览器在标签页导航时会临时重置您指定的browserAction图标，这是一个bug。
**解决方法：**您必须在后台脚本中使用webNavigation事件在每个选项卡中显式更新图标：

当然，你的manifest.json应该有webNavigation权限。

**警告！**Chrome不会缓存图标的imageData，并且每次调用setIcon时都会重新计算它，这需要大约10毫秒，所以让我们自己缓存它。请注意，这也将启动事件页面（或ManifestV 3中的service worker），这是非常浪费的（至少50 ms），因此您可能需要prolong its lifetime artificially。

const iconPath = 'france.png';
let iconData;

chrome.webNavigation.onCommitted.addListener(updateIcon);
chrome.webNavigation.onHistoryStateUpdated.addListener(updateIcon);
chrome.webNavigation.onBeforeNavigate.addListener(updateIcon);

(async () => {
  chrome.browserAction.setIcon({
    imageData: iconData = await loadImage(iconPath),
  });
})();

function updateIcon(details) {
  // only update the icon for main page, not iframe/frame
  if (details.frameId != 0) return;
  chrome.browserAction.setIcon({
    imageData: iconData,
    tabId: details.tabId,
  });
}

async function loadImage(url) {
  const img = await createImageBitmap(await (await fetch(url)).blob());
  const {width: w, height: h} = img;
  const canvas = new OffscreenCanvas(w, h);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, w, h);
  return ctx.getImageData(0, 0, w, h);
}