Chrome 扩展程序：以编程方式设置浏览器操作图标会导致图标像素化

【问题标题】：Chrome Extension: Programmatically setting browser action icon causes the icon to pixelateChrome 扩展程序：以编程方式设置浏览器操作图标会导致图标像素化
【发布时间】：2014-12-09 20:28:15
【问题描述】：

我尝试使用以下代码更改 background.js 中的浏览器操作图标

chrome.browserAction.setIcon({path: "img/logo-off.png", tabId:tab.id});

但是，这会导致图标像素化非常糟糕（飞扬的小鸟风格）。

有人遇到过同样的问题吗？我该怎么解决呢。

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

我终于在高 DPI Windows 屏幕上使用了 Chrome 38，它显示了相同的行为。

对于高DPI屏幕，需要提供更高分辨率的图标，并更新图标providing alternatives：

chrome.browserAction.setIcon({
  path: {
    19: "img/logo-off.png",
    38: "img/logo-off-hidpi.png"
  },
  tabId: tab.id
});

Chrome 会根据屏幕 DPI 选择合适的图像。它目前仅支持 19x19 和 38x38 比例。

编辑（2016 年 6 月）：

Chrome 的工具栏和 changes browser icon requirements to 16x16（HiDPI 为 32x32）似乎正在向 Material Design 发展。建议同时提供这些以准备好进行切换（already happened in Linux，有意或无意）。

【讨论】：

如果你使用manifest 3，你需要chrome.action.setIcon