GM_addStyle does not work with the shadow DOM

[barrer]

Expected Behavior

work with the shadow DOM
https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

Actual Behavior

not work with the shadow DOM

Specifications

I wrote a script that uses element.attachShadow(), but encountered a restriction in Content-Security-Policy, which prevented the CSS style file from loading, and GM_addStyle doesn't work under shadow DOM. Because the style is complex, I don't want to interfere with the page, so I use shadow DOM.

Script address:

https://greasyfork.org/en/scripts/376313-%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91-%E5%A4%9A%E8%AF%8D%E5%85%B8%E6%9F%A5%E8%AF%A2

https://greasyfork.org/en/scripts/34921-translate

Website restricted by CSP: https://www.gimp.org/

• Google Chrome: Version 86.0.4240.111 (Official Build) (64-bit)
• TM: 4.11
• OS: Windows 10

[tophf]

You can override attachShadow prototype in the page by using @grant none or unsafeWindow or unsafeWindow.wrappedJSObject (in Firefox). In your hook function you can add a style element into the shadow root or extend its adoptedStyleSheets setter to always add that style sheet object. Here's an example for an extension which can be adapted to a userscript.

[barrer]

@tophf
The experimental API DocumentOrShadowRoot.adoptedStyleSheets works great in Chrome! Thank you very much!

function adoptedStyleSheets(bindDocumentOrShadowRoot, cssText) {
    try {
        if (bindDocumentOrShadowRoot.adoptedStyleSheets) {
            cssText = cssText.replace(/\/\*.*?\*\//ig, ''); // remove CSS comments
            var cssSheet = new CSSStyleSheet();
            var styleArray = cssText.split('\n');
            for (var i = 0; i < styleArray.length; i++) {
                var line = styleArray[i].trim();
                if (line.length > 0) {
                    cssSheet.insertRule(line);
                }
            }
            bindDocumentOrShadowRoot.adoptedStyleSheets = [cssSheet];
        }
    } catch (error) {
        log(error);
    }
}

[ssbarnea]

Can someone guide me some hints on how to adapt a very simple extension that just used GM_addStyle() to bypass this? I suspect that reason why it fails to inject the styles is due to shadow use.

[derjanb]

@ssbarnea Please see #881 (comment)