根据浅色或深色模式浏览器切换 Chrome 扩展图标？答案

【问题标题】：Toggle Chrome Extension Icon based on light or dark mode browser?根据浅色或深色模式浏览器切换 Chrome 扩展图标？
【发布时间】：2021-10-06 17:08:41
【问题描述】：

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

既然我们有能力拥有浅色或深色模式浏览器，那么很难找到适合浅色和深色模式的图标设计和颜色。这是一个例子：

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

那么有谁知道是否有办法检测浏览器模式（浅色或深色）并换掉图标？

【问题讨论】：

监听prefers-color-scheme媒体查询改变事件。您必须在内容脚本中执行此操作，因为它在后台脚本crbug.com/968651 中不起作用。但是，用户可能希望显式切换图标以适应他们的自定义浏览器主题，因此最好公开图标切换选项。
嗯。我没有使用内容脚本。只是一个背景脚本。但是我可以从 background.js 脚本中调用其他脚本。当我将此代码添加到 background.js 时，它可以工作，但是没有检测亮或暗模式的逻辑，因此图标总是变为绿色。 chrome.browserAction.setIcon({ path : { "16": "icon16green.png", } }); 所以你是说后台页面没有逻辑（类似于window.matchMedia('(prefers-color-scheme: light)');）？
你怀疑我在说什么吗？ :-)
大声笑。一点也不。只是不确定我是否完全理解它。我是扩展新手。如果有一种方法可以在页面加载（而不是 onClicked）时从后台脚本执行脚本，我认为它会起作用。但我也不认为这是可能的。
有一个错误/限制要求您在可见页面中运行检测代码，而不是在后台脚本中。因此，您必须为此使用内容脚本。

【解决方案1】：

感谢wOxxOm 我能够解决这个问题。

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

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

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

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

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

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

希望这对其他人有帮助！

【讨论】：

您在内容脚本中运行的代码实际上并不需要内容脚本。 matchMedia() 在后台脚本中工作正常并返回正确的值。在后台不起作用的事情是在媒体匹配中添加一个侦听器。您需要在内容脚本中添加一个，例如 matchMedia('(prefers-color-scheme: dark)').addListener(({matches}) => chrome.runtime.sendMessage({ scheme: matches ? "dark" : "light" })。
太棒了，谢谢！我目前不在处理我的扩展。但是一旦我回到代码中，我会看看你的建议。