关键词：
【中文标题】在 Chrome 浏览器中检测高对比度扩展程序的使用【英文标题】：Detect High Contrast extension use in Chrome browser 【发布时间】：2016-11-24 08:05:30 【问题描述】：我正在尝试以高对比度模式访问我的网站。为了检测何时启用高对比度模式，我创建了一个 JavaScript 方法来检测背景图像是否被禁用，因为高对比度模式会禁用背景图像。然后，如果浏览器处于高对比度模式，我会附加一个 CSS 文件来修复高对比度显示。这在 Firefox、Edge 和 IE 中运行良好，但 Chrome 使用自己的扩展程序来创建高对比度，并且它不会禁用背景图像，因此在 Chrome 中没有附加用于高对比度的 CSS。
通过搜索，我发现 Chrome 在网站上添加了一个过滤器，而不是启用/禁用/更改网站颜色或图像本身。我已经搜索和搜索，但我找不到任何可以测试的东西来检查 Chrome 是否使用高对比度模式。如果有一种方法可以检测正在使用的扩展程序也可以解决问题，但我也没有找到方法。
我的代码实际上运行良好，我只需要能够检测 Chrome 中的高对比度模式。这是我用来检查高对比度模式的方法。
let highContrast = (options) =>
let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
hcDetect.appendTo(document.body);
if (hcDetect.css('background-image') === 'none')
$('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');
【问题讨论】：
见：***.com/questions/1921047/… @DiceXQ 我已经发现，它与我正在做的类似，但它也不适用于 Chrome。 值得一提的是，最好尽可能避免这种需求。如果设计符合 WCAG AA 对比度要求，那么您的大部分项目在各种高对比度模式下看起来都很好。背景图像将在大多数高对比度模式下隐藏，但无论如何它们都不应该传达重要信息。如果您需要在高对比度模式下显示背景颜色，请考虑使用相同颜色的大边框并将您的 box-sizing 设置为border-box，将溢出设置为隐藏。 【参考方案1】：Chrome 扩展程序将注入一些代码以生成高对比度的 LAF。
由于注入，可能需要 setTimeout。在我的情况下，它是必需的。
这对我有用：
setTimeout(function()
var htmlTag = document.getElementsByTagName('html');
console.log(htmlTag[0].getAttribute('hc') != null);
, 150);
【讨论】：
感谢@DiceXQ，这正是我所需要的，它完美运行！ 如何使用事件侦听器采用这种方法？我想保留一些元素的原始颜色和背景颜色，当它们在点击时发生更改或它们处于活动状态时。 就我而言，不需要setTimeout()。
@SuperJade 我更改了上面的注释以反映它是可选的。【参考方案2】：
如果您询问的是 Windows 高对比度模式，Chrome 不知道该模式何时处于活动状态。
一般来说，如果 Windows 用户选择启用高对比度模式，则该用户正在 Microsoft Internet Explorer 或 Microsoft Edge 中冲浪（因为这些浏览器支持它）。它们都支持专有的-ms-high-contrast@media 规则。
检查丢失的背景图像是一种适用于 IE/Edge 的策略，但使用媒体查询是一种更好的方法。特别是自从Windows High Contrast Mode will soon allow background images in Edge.
如果您希望检测特定扩展程序何时在 Chrome 中设置了自己的高对比度模式，那么了解哪个扩展程序会很有帮助。
例如，使用High Contrast 扩展，您可以在<html> 标记上查找以下属性：hc="a3" 和hcx="3"（您的值可能不同，但属性应该匹配）。如果您打开浏览器开发工具，您可以看到它所做的其他一些事情。但这些属性处于 DOM 的***别，使用起来可能最安全。
如果您询问的是 Android 版 Chrome，那也是一个不同的过程。
【讨论】：
谢谢@aardrian，我也在使用-ms-high-contrast，但我需要检查一下Chrome。我现在正在使用“高对比度”进行测试，但我需要测试尽可能多地使用高对比度扩展，因为谁知道实际用户在实践中会使用什么。
如果我们能看到每个扩展的市场份额来优先考虑我们的支持就好了。话虽如此，开发工具是我在启动扩展程序时查看到底发生了什么变化的首选方法。祝你好运。
关于“Chrome 不知道它何时处于活动状态”实际上它现在确实如此，至少在 Windows 10 中是如此。当 Chrome 检测到它提供了自己的高对比度扩展程序或黑暗主题时。 【参考方案3】：
...我只需要能够检测 Chrome 中的高对比度模式
解决方案 #1：
在我的 React/TypeScript 项目中，我使用了类似于 @Wesley Abbenhuis's answer 的代码，但我发现我不需要花费几秒钟才能加载的组件的超时。事实上，我创建了一个演示 React 项目，在第一个加载组件中测试了扩展，没有必要延迟。
const htmlTag: HTMLElement = document.getElementsByTagName(
'html'
)[0];
const isUsingChromeHighContrastExtension: boolean =
htmlTag.getAttribute('hc') !== null;
解决方案 #2：
让您的非高对比度代码可访问，并且您不必首先检测 Chrome 的高对比度扩展程序。
来自WCAG Criterion 1.4.11: Non-text Contrast：
成功标准 1.4.11 非文本对比度（AA 级）：以下视觉呈现与相邻颜色的对比度至少为 3:1：
用户界面组件
用于指示用户界面组件的状态和边界的视觉信息，不活动的组件或组件的外观由用户代理确定且未经作者修改的组件除外；
图形对象
理解内容所需的图形部分，除非图形的特定表示对于所传达的信息至关重要。
【讨论】：
12款不能少的使网页浏览获得的最佳体验chrome扩展
...本文标签：Chrome扩展网页浏览体验引擎划词翻译工具Chrome浏览器相信不少朋友和我一样，每安装新的操作系统之后，都会使用Safari/IE下载Chrome浏览器，然后将后者作为主力上网浏览器，而将前者束之高阁。毕竟从体验上说，Chrome... 查看详情
12款不能少的使网页浏览获得的最佳体验chrome扩展
...本文标签：Chrome扩展网页浏览体验引擎划词翻译工具Chrome浏览器相信不少朋友和我一样，每安装新的操作系统之后，都会使用Safari/IE下载Chrome浏览器，然后将后者作为主力上网浏览器，而将前者束之高阁。毕竟从体验上说，Chrome... 查看详情
删除文件时无法检测 chrome 扩展中的删除事件
...展中，我在页面中注入了div元素，当我放置图像文件时，浏览器会在整个页面上显示图像。扩展中未检测到drop事件，但如果我有 查看详情
使用 Chrome 扩展程序在 Google Chrome 浏览器中访问搜索查询文本
】使用Chrome扩展程序在GoogleChrome浏览器中访问搜索查询文本【英文标题】：AccessingSearchQueryTextinGoogleChromeBrowserwithChromeExtension【发布时间】：2015-07-1709:07:20【问题描述】：我正在为自己构建一个Chrome扩展程序。我想访问我的搜索... 查看详情
在 Chrome 中安装扩展程序
...15:05:01【问题描述】：我正在使用SelenuimWebdriver在C#的chrome浏览器中加载.CRX扩展文件。有没有办法在chrome浏览器中永久安装.CRX扩展名？我已经完成了开发者模式检查，更新了manifest.json中的url，但没有成功。他们是在chrome中永久安... 查看详情
如何在 Chrome 扩展程序中禁用同源策略？
...个扩展，所以我应该有责任不去实现自己的目标。在开发浏览器扩展时摆弄这个完全不合情理的安全问题是非常令人沮丧的。我不想通过全局禁用它来使整个浏览器不安全。仅适用于manif 查看详情
在 Chrome 扩展中使用 AJAX 请求检测 URL 是不是支持 HTTP2？
】在Chrome扩展中使用AJAX请求检测URL是不是支持HTTP2？【英文标题】：DetectifURLsupportsHTTP2usingAJAXrequestinChromeExtension?在Chrome扩展中使用AJAX请求检测URL是否支持HTTP2？【发布时间】：2017-05-0604:46:06【问题描述】：我希望用户能够将他... 查看详情
在 Google Chrome 扩展程序中使用 SSH
...布时间】：2014-03-1110:20:02【问题描述】：我想为googlechrome浏览器编写一个扩展程序，它从网站读取一些链接并将这些链接复制到一个文件中。我想通过ssh将此文件发送到我本地网络中的另一台计算机。如何在我的chrome扩展程序中... 查看详情
Chrome 扩展程序中的 SameSite 警告
...域我们在manifest.json中添加了对两个域的权限我们在Chrome浏览器中启用了以下标志，SameSite默认co 查看详情
了解chrome扩展程序开发--摘抄
...简单几句话描述一下Chrome扩展程序：Chrome扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标，它可以更改用户当前浏览的网页中的内容，也可以更改浏览器代理... 查看详情
如何在chrome浏览器安装第三方扩展
简单教你·Chrome浏览器如何安装第三方扩展程序谷歌在2012年ChromeV21+开始禁止第三方扩展静默安装，2014年ChromeV30+开始任何非Chrome网上应用店(ChromeWebStore)下载的扩展将自动停用。自己瞎折腾一个Chrome插件crx打包之后拖进chrome://exten... 查看详情
如何使用 chrome.tabs.getCurrent 在 Chrome 扩展程序中获取页面对象？
...选项卡对象输出到控制台，但它只是输出未定义的。它在浏览器操作页面中运行。chrome.tabs 查看详情
chrome浏览器怎么导出已安装的扩展程序为crx文件
我们都知道，如今Chrome浏览器的应用商店都打不开，进不去了，需要翻出去才能上。所以对于一些已经安装过的扩展程序（插件）想导出保存一下。因为Chrome默认安装在C盘，怕重装系统后又要重新安装这些插件了。那么，怎么... 查看详情
如何在chrome中方便快捷地切换分辨率(chrome浏览器分辨率测试)
...使用Chrome插件ResolutionTest!!!1.下载Chrome插件ResolutionTest.crx2.浏览器--更多工具--扩展程序页面--开发者模式3.将ResolutionTest.crx用鼠标拖放到扩展程序页面4.Chrome会弹出安装插件的提示.点击继续即可完成!在浏览器的网址栏后会显示该插... 查看详情
HTML unicode ☰ 在 android chrome 浏览器的移动 Web 应用程序菜单中未检测到
】HTMLunicode☰在androidchrome浏览器的移动Web应用程序菜单中未检测到【英文标题】：HTMLunicode☰notdetectedinmobilewebapplicationmenuinandroidchromebrowser【发布时间】：2014-11-1319:35:21【问题描述】：我在android移动chrome浏览器中的网站菜... 查看详情
chrome怎么显示菜单栏
...么显示菜单栏chrome没有菜单栏，只有书签栏，书签栏实在浏览器界面上角显示，可以在设置里开启。具体操作请参照以下步骤，演示软件版本为chrome浏览器75.0.3770.80。1、首先在电脑上打开chrome浏览器，在浏览器界面为发现书签... 查看详情
Chrome 扩展程序可在不同的浏览器中打开特定的 URL [关闭]
】Chrome扩展程序可在不同的浏览器中打开特定的URL[关闭]【英文标题】：ChromeextensiontoopenupaspecificURLinadifferentbrowser[closed]【发布时间】：2015-04-2112:23:07【问题描述】：提前感谢您的任何帮助！我想知道是否有一个Chrome扩展程序可... 查看详情
Chrome 扩展：在浏览器中存储文件的最佳方式（非磁盘）
】Chrome扩展：在浏览器中存储文件的最佳方式（非磁盘）【英文标题】：Chromeextension:Bestwaytostorefilesinthebrowser(non-disk)【发布时间】：2022-01-0619:04:51【问题描述】：在我的chrome扩展程序中，我想将文件存储在浏览器中（来自后台脚... 查看详情