为什么这个 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 期望从 <canvas> 获得像素数据的二进制 blob。如果要提供路径，则需要使用 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 设计，现在分别需要 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"
});

图像没有这些尺寸，必要时会缩放；但当然最好是准确的。

Answer 2

对于 清单版本 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'
});

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

why is this chrome.browserAction.setIcon method not working?

javascript

google-chrome

google-chrome-extension