Skip to content

Applies custom CSS to some sites built with ShadowDOM

License

Notifications You must be signed in to change notification settings

tophf/XRayStyler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Applies custom CSS to pages built with ShadowDOM (usually based on Polymer and other Web Components frameworks) that cannot be styled anymore in modern Chrome as it removed Shadow-piercing support from stylesheets.

Styled sites:

bugs.chromium.org www.chromestatus.com
crbug screenshot crstatus screenshot

And chromium-review.googlesource.com where it simply changes :link and :visited colors, and hides some authoring-only stuff to facilitate casual browsing, requires you to choose the dark theme in site's prefs.

Requirements

  1. use Chrome 120 or newer
  2. open chrome://extensions
  3. enable Developer mode switch in the top right corner

How it works

The extension's adds a page script in the MAIN world that intercepts the built-in attachShadow and adoptedStyleSheets (see Constructable Stylesheets: seamless reusable styles), the latter helps propagate the preparsed custom user CSS to every shadow root without re-evaluating it. In browsers without this API we would incur a performance penalty for creating a copy of stylesheet element that needs re-parsing inside each shadow (and there could be hundreds on a page), which is why such an extension didn't exist in the past.

The individual shadow roots are targeted using @shadow AT-rule:

@shadow * {
  a:visited {
    color: #a88cff;
  }
}
@shadow mr-dropdown.project-selector,
        mr-dropdown[icon="settings"],
        mr-dropdown[\.icon="arrow_drop_down"],
        #searchq ~ mr-dropdown,
        mr-search-bar {
  i.material-icons:not(#\0) {
    color: #6eadd4 !important;
  }
}