Page Shadow - Filter syntax guide

This documentation is only applicable to version 2.8 of Page Shadow

The filter rules are used to fix the display of websites when the Increase page contrast and/or Invert the colors features are enabled. The fixes can relate to the disabling of the modification of the style of an element (background color, color of texts or links, inversion of the color) or the fact of forcing a style on an element. These rules make it possible, for example, to correct the display of certain elements that don't appear. You can write your own filter rules. If you have some knowledge of HTML/CSS, it's pretty straightforward. In a filter file, only one rule per line is possible.

Syntax

The syntax of a filter is of the following form: websiteOrWebpage[1]|rule[2]|cssSelector[3]

Each part of the filter is divided by a character | (vertical bar).

[1] websiteOrWebpage

The first part of the rule (websiteOrPage) indicates the website/web page on which the filter should be applied. This part can be of the following form:

  • A domain: for example eliastiksofts.com or www.eliastiksofts.com (these two domains are treated separately)
  • A webpage: for example https://www.eliastiksofts.com/fr/page-shadow/filters/guide/index.php
  • A rule with wildcards (can match a domain or a webpage): for example *eliastiksofts.com/en/* matches all the pages of the Eliastik's Softs website in English version
  • A regular expression (can match a domain or a webpage): for example /(.*)google.(.*)recaptcha(.*)/ match Google ReCaptcha

[2] rule

This part of the filter corresponds to the rule itself. There are several different rules that are recognized by the extension:

  • disableContrastFor : completely disables the Increase page contrast feature for one or more elements
  • forceTransparentBackground : forces a transparent background for one or more elements
  • disableBackgroundStylingFor : disables the background coloring by the Increase page contrast feature for one or more elements
  • disableTextColorStylingFor : disables the coloring of texts by the Increase page contrast feature for one or more elements
  • disableInputBorderStylingFor : disables the coloring of the borders of form fields by the Increase page contrast feature for one or more elements
  • disableLinkStylingFor : disables the coloring of links by the Increase page contrast feature for one or more elements
  • disableFontFamilyStylingFor : disables the modification of the font (custom themes) by the Increase page contrast features for one or more elements
  • disableElementInvertFor : disables the inversion of colors by the function Invert the colors for one or more elements
  • hasBackgroundImg : tells Page Shadow that one or more elements have a background image
  • forceCustomLinkColorFor : forces the modification of the color of the links by the feature Increase page contrast for one or more elements
  • forceCustomBackgroundColorFor : forces the modification of the background color by the feature Increase page contrast for one or more elements
  • forceCustomTextColorFor : forces the modification of the color of the texts by the feature Increase page contrast for one or more elements
  • disableShadowRootsCustomStyle : forces the disabling of the Shadow Roots styles by the Increase page contrast function for one or more elements
  • enablePerformanceMode : activates performance mode for the website or webpage. This rule doesn't require a CSS selector.
  • disablePerformanceMode : disables performance mode for the website or webpage. Rule intended to be combined with the rule enablePerformanceMode for example to enable performance mode for the whole website and to disable it for some pages.

It's possible to indicate several rules by separating them with a comma. The name of the rules is case sensitive.

[3] cssSelector

This part of the filter contains the CSS selector corresponding to the elements on which to apply the filter. You can specify multiple selectors by separating them with a comma. If the selector is not valid, the rule will be ignored. The CSS selector is processed by the function document.querySelectorAll within the extension code. For the full list of available CSS selectors, visit the MDN documentation.

Example rule

This filter is used to correct the display of Google ReCaptchas when the Increase page contrast feature is enabled. It disables the function for some elements that were hidden.

/(.*)google.(.*)recaptcha(.*)/|disableContrastFor|.rc-imageselect-checkbox,.rc-imageselect-checkbox *,.rc-button-default,.rc-button-default *,.rc-imageselect-candidates,.rc-imageselect-candidates *,.rc-imageselect-desc,.rc-imageselect-desc *

Create a complete filter rules file

It's possible to create a complete filter file. For this, it's necessary that the file begins with the following code which contains the metadata of the filter file:

#! Page Shadow Filter 1.0
#! Name: Filter title
#! Homepage: https://www.filterhomepage.com
#! Sourcename: Website source name (website name or other)
#! Version: Filter version
#! License: License
#! Expires: Number of days for the user-side filter cache to expire, followed by an automatic update
#! Description: Filter description

You must then write a filter rule per line.

Known issues

  • A bug has been identified with regular expressions: if a character / is used in the regular expression, the filter rule is ignored. This bug has been fixed in the development branch of the extension, and the fix will be available in the next version of the extension. It's possible to work around the bug by using wildcards without using regular expressions.