☰

Inject Stylus into shadowRoots

inject styles of stylus-addon in shadowRoot

当前为 2025-10-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name                Inject Stylus into shadowRoots
// @namespace           https://greasyfork.org/users/821661
// @version             2.1
// @description         inject styles of stylus-addon in shadowRoot
// @author              hdyzen
// @run-at              document-start
// @match               https://*/*
// @grant               none
// @license             GPL-3.0-only
// ==/UserScript==

const sheet = new CSSStyleSheet();
const sheetInDoc = new CSSStyleSheet();
const originalShadowRootDescriptor = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, "adoptedStyleSheets");
const originalDocumentDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, "adoptedStyleSheets");
const originalAttachShadow = Element.prototype.attachShadow;
let lastAdoptedStylusLength = 0;

function syncStyles() {
    const nodes = document.querySelectorAll(
        "html > style:is(.stylus, .stylish-style, .xstyle, [data-source='User JavaScript and CSS'], .amino, [id^='stylebot']), body > style[data-style-created-by='magicss'], head > style[data-custom-css-by-denis]",
    );

    let cssText = "";

    for (const node of nodes) {
        cssText += `${node.textContent}\n`;
    }

    if (sheet.cssRules.length === 0 || sheet.cssRules[0]?.cssText !== cssText) {
        sheet.replaceSync(cssText);
    }
}

Element.prototype.attachShadow = function (init) {
    const shadowRoot = originalAttachShadow.call(this, init);

    shadowRoot.adoptedStyleSheets.push(sheet);
    shadowRoot.adoptedStyleSheets.push(sheetInDoc);

    return shadowRoot;
};

Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
    get() {
        return originalShadowRootDescriptor.get.call(this);
    },
    set(newSheets) {
        if (!newSheets.includes(sheet)) {
            newSheets.push(sheet);
        }
        if (!newSheets.includes(sheetInDoc)) {
            newSheets.push(sheetInDoc);
        }

        originalShadowRootDescriptor.set.call(this, newSheets);
    },
    configurable: true,
    enumerable: true,
});

function syncAdoptedStyles() {
    if (lastAdoptedStylusLength === document.adoptedStyleSheets.length) {
        return;
    }

    lastAdoptedStylusLength = document.adoptedStyleSheets.length;

    let stylusRules = "";

    for (const s of document.adoptedStyleSheets) {
        if (!s.media.mediaText.includes("stylus-")) continue;

        for (const cssRule of s.cssRules) {
            stylusRules += `${cssRule.cssText}\n`;
        }
    }

    if (sheetInDoc.cssRules.length === 0 || sheetInDoc.cssRules[0]?.cssText !== stylusRules) {
        sheetInDoc.replaceSync(stylusRules);
    }
}

setInterval(syncAdoptedStyles, 250);

Object.defineProperty(Document.prototype, "adoptedStyleSheets", {
    configurable: true,
    enumerable: originalDocumentDescriptor.enumerable,
    get: originalDocumentDescriptor.get,
    set(newSheets) {
        console.log("AA", newSheets);
        const result = originalDocumentDescriptor.set.call(this, newSheets);

        syncAdoptedStyles();

        return result;
    },
});

new MutationObserver(syncStyles).observe(document.documentElement, {
    childList: true,
    subtree: true,
    characterData: true,
});