Google chrome extension 基于明暗模式浏览器切换Chrome扩展图标？

我试着寻找这个，我能找到的是3年多以前的，与隐姓埋名的窗户是黑色的有关，而当时普通的铬合金窗户是浅色的

现在我们有了一个明暗模式浏览器，很难找到一个图标设计和颜色适合明暗模式。下面是一个例子：

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

那么，有人知道是否有办法检测浏览器模式（亮或暗）并调出图标吗？

多亏了我能弄明白这一点

首先，我需要创建一个内容脚本（我称之为

toggleIcon.js

），并将其添加到

manifist.json文件中


然后，我在
toggleIcon.js
中添加了以下内容，如果
窗口
匹配
首选颜色方案：深色，则会将
方案：“深色”
发送到我的background.js文件中


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


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


我看到的唯一缺点是，这需要一个
内容\u脚本
，如果您想让扩展在任何页面上工作，还需要添加
“匹配项”：

希望这对其他人有所帮助！！
收听
首选配色方案
媒体查询更改事件。您必须在内容脚本中执行此操作，因为它在后台脚本中不起作用。但是，用户可能希望显式切换图标以适应其自定义浏览器主题，因此最好公开图标切换选项。Hmm。我没有使用内容脚本。只是一个背景脚本。但我可以从background.js脚本调用其他脚本。当我将此代码添加到background.js时，它可以工作，但没有逻辑来检测明暗模式，因此图标总是变为绿色。
chrome.browserAction.setIcon（{path:{16:“icon16green.png”，}）
那么你是说逻辑（类似于window.matchMedia（‘（首选配色方案：灯光）’）；
）无法从后台页面获得？你怀疑我在说什么吗？：-）Lol。一点也不。只是不确定我是否完全理解它。我对扩展不熟悉。如果有办法在页面加载时从后台脚本执行脚本（而不是一次单击）我认为这样做是可行的。但我也不认为这是可能的。有一个缺陷/限制要求您在可见页面中运行检测代码，而不是在后台脚本中。因此，您必须为此使用内容脚本。您在内容脚本中运行的代码实际上不需要内容脚本。
matchMedia（）
在后台脚本中运行良好，并返回正确的值。在后台不起作用的是向媒体匹配添加侦听器。您需要在内容脚本中添加一个侦听器，类似于
matchMedia（'（首选配色方案：深色）'）。addListener（{matches}）=>chrome.runtime.sendMessage（{scheme:matches？“dark:“light”}）
。太棒了，谢谢！我现在不在做扩展。但我回到代码中后会看看你的建议。