基于浅色或深色模式浏览器切换 Chrome 扩展图标？
Tyl*_*ood 11 google-chrome-extension
我试过搜索这个，我能找到的最接近的相关问题来自 3 年前，并且与隐身窗口变暗有关，而当时普通的镀铬窗口很亮。
现在我们有能力拥有亮或暗模式浏览器，很难找到适合亮和暗模式的图标设计和颜色。下面是一个例子：
在上图中，您可以看到第一个和第三个图标是黑色的，因此在使用暗模式时很难看到它们。中间的图标（我用于扩展的那个）在暗模式下看起来很棒，但在亮模式下很糟糕。见下文：
那么有谁知道是否有办法检测浏览器模式（亮或暗）并换出图标？
Tyl*_*ood 14
多亏了 wOxxOm，我才能弄清楚这一点。
首先，我需要创建一个内容脚本（我称之为toggleIcon.js）并将其添加到manifist.json file.
然后我将以下内容添加到toggleIcon.js-scheme: "dark"如果window.matchMedia匹配，它将发送到我的 background.js 文件prefers-color-scheme: dark。
然后在我的background.js文件中，我会听取该消息，如果request.scheme == "dark"我chrome.broserAction.setIcon习惯将每个图标的路径更改为深色版本。
这有效地覆盖了我在manifest.json文件中声明的原始图标路径（如下所示）。
我看到的唯一缺点是这需要一个content_script，如果您希望您的扩展程序在任何页面上工作，则需要您还添加"matches": ["<all_urls>"]到您的扩展程序，这会减慢批准过程。这就是为什么我在上面的评论中提到我一直在避免使用 content_script。
另外，我认为使用在浅色模式下效果最好的图标版本作为默认设置是有意义的，因为我认为 chrome 扩展页面将从这些图标中提取他们使用的一些图标（并且该页面有一个白色背景）。例如，这是我的旧图标的外观（对比度不够）。
希望这对其他人有帮助！！
- 您在内容脚本中运行的代码实际上不需要内容脚本。`matchMedia()` 在后台脚本中工作正常并返回正确的值。在后台不起作用的事情是向媒体匹配添加侦听器。您需要在内容脚本中添加一个，例如 `matchMedia('(prefers-color-scheme: dark)').addListener(({matches}) => chrome.runtime.sendMessage({ schema: matches ? “暗”：“亮”})`。 (2认同)
| 归档时间： |
|
| 查看次数： |
2406 次 |
| 最近记录： |