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

Question

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

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

文档说:

Note that 'details.imageData = foo' is equivalent to 'details.imageData = {'19': foo}'

所以我很困惑

Answer 1

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

因此，修复仅语法错误，它将是:

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

这会失败。 imageData期望获得像素数据的二进制 blob，例如，来自 <canvas> .如果你想提供路径，你需要使用 path属性:

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

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

If the number of image pixels that fit into one screen space unit equals scale, then image with size scale * 19 will be selected. Initially only scales 1 and 2 will be supported.

正常大小的图标是 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"
});

图像不必具有这些尺寸，如有必要，它们将被缩放；但当然最好是准确的。