javascript - 更改 Firefox WebExtension 中 SVG 工具栏图标的颜色

Question

我正在使用 WebExtensions 为 Firefox 57+ 开发扩展。我想更改工具栏图标的颜色以指示扩展状态。

我明白如何，如本answer中所述。我可以简单地使用 browserAction.setIcon() 来更改图标并用不同的颜色替换图标。

我想知道我是否真的需要在我的扩展中包含 icon-black.svg、icon-red.svg 等文件，或者是否有某种方法可以简单地加载单个 icon.svg 文件并使用 javascript更改图像的颜色。我希望我能以某种方式以编程方式加载它并修改 svg 的颜色(即所有路径)，然后再将其传递给 browserAction.setIcon() 。我是否需要以某种方式将其加载到某种 Canvas 类型元素中才能执行此操作？我什至可以在扩展中执行此操作吗？

Answer 1

是的，您可以在扩展程序中执行此操作

browserAction.setIcon() documentation指出对象是 passed to the method将包含 path到扩展中的图标文件(或包含多个不同大小的此类路径的对象)，或 imageData ，这是 browserAction.ImageDataType ，这是一个 ImageData (或指定多个具有不同大小的此类项目的对象):

The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().

这样CanvasRenderingContext2D可以使用 SVGImageElement 作为使用 CanvasRenderingContext2D.drawImage() 绘制图像的源.

所以，是的，您可以在扩展中执行此操作。是的，您需要将其加载到“ Canvas 类型元素”中才能执行此操作。

更改图标徽章文本和颜色更容易

使用图标徽章并更改 background color 会简单得多和 text徽章的。这样做可能会带来更好的用户体验，因为图标徽章是专门用于向用户传输此类状态更改信息的 UI 元素。您还应该更改 badge title指示下次单击该图标将执行的操作。

仅更改颜色是糟糕的 UI 设计

仅更改图标的颜色来指示状态并不是一个好的用户界面设计。这样做会使视力不佳的人(例如色盲、使用屏幕阅读器等)难以使用该界面。至少，您应该更改明显可见的内容(例如形状、徽章文本等)，而不仅仅是图标颜色。这应该还包括屏幕阅读器也可以检测到的一些更改。

作为这会导致什么类型的问题的示例，以下是 Stack Exchange 仅更改某些通知的成就图标颜色的讨论:Change the color of the "achievements" icon when it's highlighted (for users with Deuteranopia)