https://github.com/tophf/xraystyler

Applies custom CSS to some sites built with ShadowDOM
https://github.com/tophf/xraystyler

chrome-extension shadowdom stylesheets

Last synced: 2 days ago
JSON representation

Applies custom CSS to some sites built with ShadowDOM

• Host: GitHub
• URL: https://github.com/tophf/xraystyler
• Owner: tophf
• License: mit
• Created: 2019-09-20T10:09:50.000Z (about 5 years ago)
• Default Branch: shadow-targeting
• Last Pushed: 2024-07-18T10:52:22.000Z (3 months ago)
• Last Synced: 2024-07-18T13:28:57.486Z (3 months ago)
• Topics: chrome-extension, shadowdom, stylesheets
• Language: CSS
• Homepage:
• Size: 43.9 KB
• Stars: 14
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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](https://www.chromestatus.com/features#deep).

### Styled sites:

**[bugs.chromium.org](https://bugs.chromium.org)** | **[www.chromestatus.com](https://www.chromestatus.com)**

---|---

[![crbug screenshot](https://i.imgur.com/B9XoAImm.png)](https://i.imgur.com/B9XoAIm.png) | [![crstatus screenshot](https://i.imgur.com/FH3iG1Um.png)](https://i.imgur.com/FH3iG1U.png)

And **[chromium-review.googlesource.com](https://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](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)), 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:

```css

@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;

  }

}

```