我尝试搜索此内容,找到的最相关的问题是 三年前的一个问题,当时与隐身窗口为暗色,而普通Chrome窗口为亮色有关。
现在我们可以拥有浅色或深色模式的浏览器,很难找到适合浅色和深色模式的图标设计和颜色。以下是一个例子:
在上面的图片中,您可以看到第一和第三个图标是黑色的,因此在使用深色模式时很难看到。中间的图标(我正在使用它作为我的扩展名)在深色模式下看起来很棒,但在浅色模式下看起来很糟糕。请参见下面的说明:
那么,有人知道是否有一种方法来检测浏览器模式(浅色或深色)并更换图标吗?
我尝试搜索此内容,找到的最相关的问题是 三年前的一个问题,当时与隐身窗口为暗色,而普通Chrome窗口为亮色有关。
现在我们可以拥有浅色或深色模式的浏览器,很难找到适合浅色和深色模式的图标设计和颜色。以下是一个例子:
在上面的图片中,您可以看到第一和第三个图标是黑色的,因此在使用深色模式时很难看到。中间的图标(我正在使用它作为我的扩展名)在深色模式下看起来很棒,但在浅色模式下看起来很糟糕。请参见下面的说明:
那么,有人知道是否有一种方法来检测浏览器模式(浅色或深色)并更换图标吗?
多亏了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的原因。希望这能帮助其他人!
matchMedia()
在后台脚本中可以正常工作并返回正确的值。不能在后台添加媒体匹配的侦听器,这是无法工作的。你需要在你的内容脚本中添加一个侦听器,类似于 matchMedia('(prefers-color-scheme: dark)').addListener(({matches}) => chrome.runtime.sendMessage({ scheme: matches ? "dark" : "light" })
。 - jdunningwindow
。 - undefined
prefers-color-scheme
媒体查询变化事件。由于此功能无法在后台脚本中运行,因此您需要在内容脚本中执行。但用户可能希望显式切换图标以适应他们的自定义浏览器主题,因此最好公开图标切换选项。 - wOxxOmchrome.browserAction.setIcon({ path : { "16": "icon16green.png", } });
那么你是说背景页面没有可用的逻辑(类似于window.matchMedia('(prefers-color-scheme: light)');
)吗? - Tyler Youngblood