刷新chrome扩展的图标更改

Refreshing an icon change for chrome extension

本文关键字：图标 chrome 扩展 刷新      更新时间：2023-09-26

我正在开发一个Google Chrome扩展，它会根据您的IP本地化更改其图标。在扩展的图标更改后，我面临刷新问题。

由于我的background.js文件中的这个命令，图标实际上正在发生变化。

chrome.browserAction.setIcon ( { path: 'france.png' } );

不幸的是，setIcon命令似乎是异步的。图标更改实际上是在代码更改后几秒钟出现的。有没有办法强制chrome刷新图标？

许多chrome扩展似乎能够控制这一点，但我不知道他们是如何管理的。

以下是更多详细信息：

为了更清楚地理解，我从不同的文件中删除了所有的javascript代码，除了setIcon行。这是Manifest行，它声明了我的javascript文件。

"background": { "scripts": [ "jquery.min.js", "popup.js", "background.js"] },

popup.js：现在为空background.js：只有以下两行：

console.log ("I'm background script");
chrome.browserAction.setIcon({path: 'france.png'});

使用扩展管理器重新加载扩展后，我单击它的图标。Chrome会弹出静态html并加载background.js文件。作为证明，文本立即出现在控制台窗口上。

但我不得不在图标扩展上再clic几次，才能看到它被chrome更改了。

我应该在某个地方做错什么，但事实上，当我删除所有内容时，我不知道这种延迟可能是从哪里来的。

问题：Chrome在导航选项卡时临时重置您指定的浏览器操作图标，这是一个错误。

解决方法：您必须使用后台脚本中的webNavigation事件显式更新每个选项卡中的图标：

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

警告Chrome不会缓存图标的imageData，每次调用setIcon时都会重新计算它，大约需要10毫秒，所以让我们自己缓存它。请注意，这也会启动事件页面（或ManifestV3中的服务工作者），这是非常浪费的（至少50ms），因此您可能希望人为地延长其寿命。

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);
}
相关文章：