我正在使用WebExtensions开发Firefox 57+的扩展程序。我想更改工具栏图标的颜色以指示扩展状态。
我理解，如answer所述，我可以简单地使用browserAction.setIcon()更改图标并替换不同颜色的图标。
我想知道我是否真的需要在我的扩展程序中包含icon-black.svg，icon-red.svg等文件，或者如果有某种方法我只需加载一个icon.svg文件并使用javascript改变图像的颜色。我希望我能以某种方式以编程方式加载它并修改svg（即所有路径）的颜色，然后再将其传递给browserAction.setIcon()。我是否需要以某种方式将其加载到某种类型的画布类型元素中才能执行此操作？我甚至可以在扩展名中这样做吗？
答案 0 :(得分：1)
browserAction.setIcon() documentation表示对象passed to the method将包含扩展程序中图标文件的path（或包含多个不同大小的此类路径的对象），或者imageData，browserAction.ImageDataType，ImageData（或指定多个不同尺寸的此类物品的对象）：
ImageData接口表示<canvas>元素区域的基础像素数据。它是使用与画布相关联的ImageData()对象上的CanvasRenderingContext2D构造函数或创建者方法创建的：createImageData()和getImageData()。它还可以用于使用putImageData()设置画布的一部分。
此类CanvasRenderingContext2D可以使用SVGImageElement作为来源，使用CanvasRenderingContext2D.drawImage()绘制图像。
所以，是的，您可以在扩展程序中执行此操作。并且，是的，您需要将其加载到“画布类型元素”中才能执行此操作。
使用图标徽章并更改徽章的background color和text会更加简单。这样做可能会带来更好的用户体验，因为图标标记是专门用于向用户传输此类状态更改信息的UI元素。您还应该更改badge title以指示图标上的下一次点击将执行的操作。
仅更改图标的颜色以指示状态不是一个好的用户界面设计。这样做使得对于视力不佳的任何人（例如色盲，使用屏幕阅读器等）而言难以使用界面。绝对最低限度，您应该更改明显可见的内容（例如形状，徽章文本等），而不仅仅是图标颜色。此 还应包含一些更改，也可由屏幕阅读器检测到。
作为此类问题的一个示例，以下是Stack Exchange仅使用更改某些通知的成就图标颜色的使用的讨论：Change the color of the "achievements" icon when it's highlighted (for users with Deuteranopia)