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

Question

我正在查看文档页面,我无法弄清楚我的代码中有什么问题:

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

文件说:

请注意,'details.imageData = foo'相当于'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"
  }
});

请注意,您只能提供预期的尺寸.如果包含任何其他内容,则会失败.引用文档:

如果适合一个屏幕空间单位的图像像素的数量等于比例,则将选择具有尺寸标度*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"
});

该图像不具备有这些方面,他们将在必要时进行缩放; 但它确实更好.

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'
});