google-chrome-extension - 基于浅色或深色模式浏览器切换 Chrome 扩展图标？

Question

我试过搜索这个，还有 closest related question我能找到的是 3 多年前的，并且与隐身窗口很暗有关，而当时普通的 Chrome 窗口很亮。

现在我们有能力拥有亮或暗模式浏览器，很难找到适合亮和暗模式的图标设计和颜色。下面是一个例子:



在上图中，您可以看到第一个和第三个图标是黑色的，因此在使用暗模式时很难看到它们。中间的图标(我用于扩展的那个)在暗模式下看起来很棒，但在亮模式下很糟糕。见下文:



那么有谁知道是否有办法检测浏览器模式(亮或暗)并换出图标？

Answer 1

感谢 wOxxOm我能够弄清楚这一点。

首先，我需要创建一个内容脚本(我称之为 toggleIcon.js)并将其添加到 manifist.json file .



然后我将以下内容添加到 toggleIcon.js - 发送 scheme: "dark"到我的 background.js 文件，如果 window.matchMedia匹配 prefers-color-scheme: dark .



然后在我的 background.js文件我听那个消息，如果request.scheme == "dark"我用 chrome.broserAction.setIcon将我的每个图标的路径更改为深色版本。



这有效地覆盖了我在 manifest.json 中声明的原始图标路径文件(如下图)。



我看到的唯一缺点是这需要 content_script ，如果你想让你的扩展在任何页面上工作，你还需要添加 "matches": ["<all_urls>"]到您的扩展程序，这会减慢批准过程。这就是为什么我在上面的评论中提到我一直在避免使用 content_script。

另外，我认为使用在浅色模式下效果最好的图标版本作为默认设置是有意义的，因为我认为 chrome 扩展页面将从这些图标中提取他们使用的一些图标(并且该页面有一个白色背景)。例如，这是我的旧图标的外观(对比度不够)。



希望这对其他人有帮助!!