AG-39295 Fix 'inject-css-in-shadow-dom' — scriptlet does not work if adoptedStyleSheets is overridden. #477

Squashed commit of the following:

commit bcd2159
Author: Adam Wróblewski <[email protected]>
Date:   Thu Apr 10 09:17:55 2025 +0200

    Check cssInjectionMethod eariler

commit 0ee035b
Merge: 39cc223 938bbe3
Author: Adam Wróblewski <[email protected]>
Date:   Wed Apr 9 10:08:06 2025 +0200

    Merge branch 'master' into fix/AG-39295

commit 39cc223
Author: Adam Wróblewski <[email protected]>
Date:   Tue Apr 8 20:53:16 2025 +0200

    Add try...catch to injectStyleTag
    Add JSDoc for injectAdoptedStyleSheets
    Check cssInjectionMethod earlier

commit d66a9a6
Author: Slava Leleka <[email protected]>
Date:   Tue Apr 8 21:23:16 2025 +0300

    Update documentation

commit e7416d7
Author: Adam Wróblewski <[email protected]>
Date:   Tue Apr 8 13:30:26 2025 +0200

    Add ability to choose CSS injection method in `inject-css-in-shadow-dom` scriptlet

Author: AdamWr

CHANGELOG.md

@@ -14,13 +14,15 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 ### Added
 
+- Ability to choose CSS injection method in `inject-css-in-shadow-dom` scriptlet [#477]
 - TypeScript types for CoreLibs provided [`ContentScriptApi`](./README.md#scriptlets-api--content-script-api).
 - Trusted Types API utility - [`PolicyApi`](./README.md#scriptlets-api--content-script-api--policy-api).
 
 ### Changed
 
 - Improved docs for `json-prune`, `xml-prune` and `trusted-prune-inbound-object` scriptlets [#392]
 
+[#477]: https://github.com/AdguardTeam/Scriptlets/issues/477
 [#392]: https://github.com/AdguardTeam/Scriptlets/issues/392
 [Unreleased]: https://github.com/AdguardTeam/Scriptlets/compare/v2.1.7...HEAD
 

src/scriptlets/inject-css-in-shadow-dom.js

@@ -17,6 +17,10 @@ import { hit, logMessage, hijackAttachShadow } from '../helpers';
  * - `hostSelector` — optional, string, selector to match shadow host elements.
  *   CSS rule will be only applied to shadow roots inside these elements.
  *   Defaults to injecting css rule into all available roots.
+ * - `cssInjectionMethod` — optional, string, method to inject css rule into shadow dom.
+ *   Available methods are:
+ *     - `adoptedStyleSheets` — injects the CSS rule using adopted style sheets (default option).
+ *     - `styleTag` — injects the CSS rule using a `style` tag.
  *
  * ### Examples
  *
@@ -32,26 +36,64 @@ import { hit, logMessage, hijackAttachShadow } from '../helpers';
  *     example.org#%#//scriptlet('inject-css-in-shadow-dom', '#content { margin-top: 0 !important; }', '#banner')
  *     ```
  *
+ * 1. Apply style to all shadow dom subtrees using style tag
+ *
+ *    ```adblock
+ *    example.org#%#//scriptlet('inject-css-in-shadow-dom', '.ads { display: none !important; }', '', 'styleTag')
+ *    ```
+ *
  * @added v1.8.2.
  */
 /* eslint-enable max-len */
 
-export function injectCssInShadowDom(source, cssRule, hostSelector = '') {
+export function injectCssInShadowDom(
+    source,
+    cssRule,
+    hostSelector = '',
+    cssInjectionMethod = 'adoptedStyleSheets',
+) {
     // do nothing if browser does not support ShadowRoot, Proxy or Reflect
     // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
     if (!Element.prototype.attachShadow || typeof Proxy === 'undefined' || typeof Reflect === 'undefined') {
         return;
     }
 
+    if (cssInjectionMethod !== 'adoptedStyleSheets' && cssInjectionMethod !== 'styleTag') {
+        logMessage(source, `Unknown cssInjectionMethod: ${cssInjectionMethod}`);
+        return;
+    }
+
     // Prevent url() and image-set() styles from being applied
     if (cssRule.match(/(url|image-set)\(.*\)/i)) {
         logMessage(source, '"url()" function is not allowed for css rules');
         return;
     }
 
-    const callback = (shadowRoot) => {
+    const injectStyleTag = (shadowRoot) => {
         try {
-            // adoptedStyleSheets and CSSStyleSheet constructor are not yet supported by Safari
+            const styleTag = document.createElement('style');
+            styleTag.innerText = cssRule;
+            shadowRoot.appendChild(styleTag);
+            hit(source);
+        } catch (error) {
+            logMessage(source, `Unable to inject style tag due to: \n'${error.message}'`);
+        }
+    };
+
+    /**
+     * Injects CSS rules into a shadow root using the adoptedStyleSheets API
+     *
+     * @param {ShadowRoot} shadowRoot - The shadow root to inject styles into
+     * @private
+     *
+     * @description
+     * This function attempts to inject CSS using adoptedStyleSheets API.
+     * If successful, it adds the stylesheet to the shadow root's adoptedStyleSheets array.
+     * On failure, it falls back to using the injectStyleTag method.
+     */
+    const injectAdoptedStyleSheets = (shadowRoot) => {
+        try {
+            // adoptedStyleSheets and CSSStyleSheet constructor are not supported by old browsers
             // https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
             // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
             const stylesheet = new CSSStyleSheet();
@@ -62,13 +104,19 @@ export function injectCssInShadowDom(source, cssRule, hostSelector = '') {
                 return;
             }
             shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, stylesheet];
-        } catch {
-            const styleTag = document.createElement('style');
-            styleTag.innerText = cssRule;
-            shadowRoot.appendChild(styleTag);
+            hit(source);
+        } catch (error) {
+            logMessage(source, `Unable to inject adopted style sheet due to: \n'${error.message}'`);
+            injectStyleTag(shadowRoot);
         }
+    };
 
-        hit(source);
+    const callback = (shadowRoot) => {
+        if (cssInjectionMethod === 'adoptedStyleSheets') {
+            injectAdoptedStyleSheets(shadowRoot);
+        } else if (cssInjectionMethod === 'styleTag') {
+            injectStyleTag(shadowRoot);
+        }
     };
 
     hijackAttachShadow(window, hostSelector, callback);

tests/scriptlets/inject-css-in-shadow-dom.test.js

@@ -208,4 +208,20 @@ if (!isSupported) {
         assert.strictEqual(getComputedStyle(target1).color, 'rgb(255, 0, 0)', 'style was applied to shadowRoot #1');
         assert.strictEqual(window.hit, 'FIRED', 'hit function was executed');
     });
+
+    test('test "styleTag" injection method', (assert) => {
+        runScriptlet(name, [CSS_TEXT1, '', 'styleTag']);
+
+        const host1 = appendHost(HOST_ID1);
+        const shadowRoot1 = host1.attachShadow({ mode: 'closed' });
+        appendTarget(shadowRoot1, TARGET_ID1);
+
+        const target1 = shadowRoot1.getElementById(TARGET_ID1);
+        const styleTag = shadowRoot1.querySelector('style');
+
+        assert.ok(styleTag, 'style tag was created');
+        assert.strictEqual(styleTag.innerText, CSS_TEXT1, 'style tag contains the correct css rule');
+        assert.strictEqual(getComputedStyle(target1).color, 'rgb(255, 0, 0)', 'style was applied to shadowRoot #1');
+        assert.strictEqual(window.hit, 'FIRED', 'hit function was executed');
+    });
 }