根据浏览器的明暗模式切换Chrome扩展图标？

Question

我尝试搜索此内容，找到的最相关的问题是 三年前的一个问题，当时与隐身窗口为暗色，而普通Chrome窗口为亮色有关。

现在我们可以拥有浅色或深色模式的浏览器，很难找到适合浅色和深色模式的图标设计和颜色。以下是一个例子：

在上面的图片中，您可以看到第一和第三个图标是黑色的，因此在使用深色模式时很难看到。中间的图标（我正在使用它作为我的扩展名）在深色模式下看起来很棒，但在浅色模式下看起来很糟糕。请参见下面的说明：

那么，有人知道是否有一种方法来检测浏览器模式（浅色或深色）并更换图标吗？

- Tyler Youngblood

---

请监听 prefers-color-scheme 媒体查询变化事件。由于此功能无法在后台脚本中运行，因此您需要在内容脚本中执行。但用户可能希望显式切换图标以适应他们的自定义浏览器主题，因此最好公开图标切换选项。 - wOxxOm

嗯，我没有使用内容脚本。只是一个后台脚本。但我可以从background.js脚本调用其他脚本。当我将此代码添加到background.js中时，它可以工作，但没有逻辑来检测明亮或暗模式，因此图标始终更改为绿色。 chrome.browserAction.setIcon({ path : { "16": "icon16green.png", } }); 那么你是说背景页面没有可用的逻辑（类似于window.matchMedia('(prefers-color-scheme: light)');）吗？ - Tyler Youngblood

你怀疑我在说什么吗？ :-) - wOxxOm

哈哈，完全不是。只是不确定我是否完全理解了它。我对扩展程序还很陌生。如果有一种方法可以在页面加载时从后台脚本执行脚本（而不是在点击时），那应该可以解决问题。但我认为这也不可能。 - Tyler Youngblood

有一个错误/限制需要您在可见页面中运行检测代码，而不是在后台脚本中运行。因此，您必须为此使用内容脚本。 - wOxxOm

真遗憾。是的，我看到了你在第一篇帖子中链接的错误。感谢你的帮助！我会尝试看看是否可以使用内容脚本，但我感觉之前不能用可能有原因。 - Tyler Youngblood

Answer 1

多亏了wOxxOm，我才能解决这个问题。

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

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

然后在我的background.js文件中，我监听该消息，如果request.scheme == "dark"，则使用chrome.broserAction.setIcon将每个图标的路径更改为暗色版本。请注意，保留{{和}}占位符。

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

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

另外，我认为最好使用在浅色模式下效果最佳的图标版本作为默认版本，因为我认为Chrome扩展程序页面将从中获取一些它们使用的图标（该页面有白色背景）。例如，这是我的旧图标的样子（对比度不足）。

希望这能帮助其他人！

- Tyler Youngblood

---

你在运行内容脚本中的代码实际上并不需要内容脚本。 matchMedia() 在后台脚本中可以正常工作并返回正确的值。不能在后台添加媒体匹配的侦听器，这是无法工作的。你需要在你的内容脚本中添加一个侦听器，类似于 matchMedia('(prefers-color-scheme: dark)').addListener(({matches}) => chrome.runtime.sendMessage({ scheme: matches ? "dark" : "light" })。 - jdunning

太棒了，谢谢！我目前没有在开发我的扩展程序。但是一旦我重新开始编写代码，我会查看你的建议。 - Tyler Youngblood

Manifest v3没有后台脚本。它们已被服务工作者取代。你也无法从服务工作者中访问window。 - undefined