检测Chrome浏览器中使用的高对比度扩展程序 [英] Detect High Contrast extension use in Chrome browser

问题描述

我正在尝试以高对比度模式访问我的网站。为了检测何时启用高对比度模式，我创建了一个JavaScript方法来检测是否禁用了背景图像，因为高对比度模式会禁用背景图像。然后，如果浏览器处于高对比度模式，我将附加一个CSS文件来修复高对比度显示的问题。这在Firefox，Edge和IE中可以正常工作，但是Chrome使用其自身的扩展名来创建高对比度，并且它不会禁用背景图片，因此在Chrome中不附加用于高对比度的CSS。

I am trying to make my website accessible in high-contrast mode. In order to detect when high-contrast mode is enabled, I created a JavaScript method to detect if background images are disabled, because high-contrast mode disables background images. Then if the browser is in high-contrast mode, I append a CSS file to make fixes for displaying in high contrast. This works fine in Firefox, Edge, and IE, but Chrome uses its own extension to create high-contrast, and it does not disable the background images, so in Chrome the CSS for high contrast is not appended.

通过搜索，我发现Chrome在网站上添加了一个过滤器，而不是启用/禁用/更改网站颜色或图像本身。我进行了搜索，但找不到任何可测试的内容来检查Chrome是否使用高对比度模式。如果有一种方法可以检测到正在使用的扩展名，这也可以解决问题，但是我也找不到一种方法可以做到这一点。

From searching I have found that Chrome adds a filter over the website as opposed to enabling/disabling/changing the website colors or images themselves. I have searched and searched, but I can't find anything to test to check if Chrome is using high-contrast mode. If there were a way to detect which extensions are being used that would also solve the problem, but I haven't been able to find a way to do that either.

我的代码实际上运行良好，我所需要的只是能够检测Chrome中的高对比度模式。这是我用来检查高对比度模式的方法。

My code actually works fine, all I need is to be able to detect the high-contrast mode in Chrome. Here is the method I use to check for high-contrast mode.

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">');

  }
}

推荐答案

Chrome扩展程序将注入一些代码以生成高对比度LAF。

The Chrome Extension will inject some code to generate a highcontrast LAF.

setTimeout可能在注入时是必需的。在我看来，这是必需的。

The setTimeout could be required duo to the injection. In my case it was required.

这对我有用：

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);

这篇关于检测Chrome浏览器中使用的高对比度扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！