为什么这个 chrome.browserAction.setIcon 方法不起作用？答案

【问题标题】：why is this chrome.browserAction.setIcon method not working?为什么这个 chrome.browserAction.setIcon 方法不起作用？
【发布时间】：2015-07-08 21:30:53
【问题描述】：

I'm looking at the documentation page 我不知道我的代码有什么问题：

chrome.browserAction.setIcon({
  details.imageData = {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

文档说：

请注意，'details.imageData = foo' 等价于 'details.imageData = {'19': foo}'

所以我很困惑

【问题讨论】：

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

【解决方案1】：

您的代码基本上是一个很大的语法错误。 JavaScript 对象字面量应该是一对key: value 的列表。您不能（也不需要）在 key 部分中进行任何分配。

所以，修复仅语法错误，它将是：

// Still wrong:
chrome.browserAction.setIcon({
  imageData : {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

这将失败。 imageData 期望从例如 <canvas> 获得的像素数据的二进制 blob。如果要提供路径，需要使用path属性：

// Still wrong:
chrome.browserAction.setIcon({
  path : {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

请注意，您只能提供它期望的尺寸。如果您包含任何其他内容，它将失败。引用文档：

如果适合一个屏幕空间单位的图像像素数等于比例，则将选择大小比例 * 19 的图像。最初仅支持比例 1 和 2。

正常大小的图标是 19x19 像素；在高 DPI 屏幕上，Chrome 可能会显示 38x38 图标。

更新：由于 Chrome 已在 53 中切换到 Material Design，现在预计分别为 16x16 和 32x32。您可以提供新旧尺寸而不会出错。

所以你可以这样做：

// Correct
chrome.browserAction.setIcon({
  path : {
    "19": "Icons/iconfavorite19x.png",
    "38": "Icons/iconfavorite38x.png"
  }
});

// Also correct
chrome.browserAction.setIcon({
  path : {
    "19": "Icons/iconfavorite19x.png"
  }
});

// Also correct
chrome.browserAction.setIcon({
  path : "Icons/iconfavorite19x.png"
});

图像没有这些尺寸，如果需要，它们会被缩放；但当然最好准确一点。

【讨论】：

是的，这行得通，我以前从未使用或见过 javascript 对象，这令人惊讶
很高兴为您提供帮助。认为逐步解开这个问题会很有用。
官方文档令人困惑。去年，当文档引用一个不存在的“详细信息”时，我也被同样的事情弄糊涂了，然后结果证明它引用了传递的对象。
@ZigMandel 我什至提交了关于这部分文档的错误：code.google.com/p/chromium/issues/detail?id=423556

【解决方案2】：

对于 manifest version 3，您必须使用 chrome.action.setIcon 而不是 chrome.browserAction.setIcon。

例如，单独文件夹中的灰色图像：

   chrome.action.setIcon({
        path: {
            "16": "/icons/gray/icon16.png",
            "19": "/icons/gray/icon19.png",
            "32": "/icons/gray/icon32.png",
            "48": "/icons/gray/icon48.png",
            "128": "/icons/gray/icon128.png"
        }
    });

或者，如果不是问题的一部分，也可以通过 setBadgeText 解决：

state是我自己的变量。

chrome.action.setBadgeText({
  text: (state ? 'off' : '')
});

chrome.action.setBadgeBackgroundColor({
  color: '#2f2f2f'
});

【讨论】：