An experimental Windhawk CSS styling method.

windhawk-css-style.js

/*
Windhawk CSS Style.

Instructions:
* Install the VSCode Tweaker mod.
* Add VSCodium.exe to the "Custom process inclusion list" in the mod advanced
  tab.
  * You might also want to select "Ignore mod inclusion/exclusion lists" to
    prevent the mod from affecting VSCode.
* In the mod settings, under "Code snippets", remove the existing snippets and
  add:
  * Snippet type: "Electron main.js"
  * Snippet source: "Code from a file"
  * The snippet code: Enter the path to this file
* Edit the `css` variable in this file to change the CSS styles.
* Restart Windhawk to apply the changes.

Tip: You can use the "Developer Tools" in Windhawk to inspect the DOM and test
CSS styles before applying them. In Windhawk, press Ctrl+Alt+Shift+P and type
"Toggle Developer Tools" to open the DevTools.
*/

const { webContents } = require('electron');

const css = `
    * { color: red !important }
`;

const injectStyle = `
    (() => {
        const sheet = new CSSStyleSheet();
        sheet.replaceSync(${JSON.stringify(css)});
        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
    })();
`;

const isTargetFrame = (frame) => {
    try {
        return new URL(frame.url).pathname === '/fake.html';
    } catch {
        return false;
    }
};

const setupFrame = (frame) => {
    frame.on('dom-ready', () => {
        if (isTargetFrame(frame)) {
            frame.executeJavaScript(injectStyle).catch(console.error);
        }
    });
};

const setupWebContents = (wc) => {
    wc.mainFrame.framesInSubtree.forEach(frame => {
        setupFrame(frame);
        if (isTargetFrame(frame)) {
            frame.executeJavaScript(injectStyle).catch(console.error);
        }
    });
    wc.on('frame-created', (_, { frame }) => {
        setupFrame(frame);
    });
};

webContents.getAllWebContents().forEach(setupWebContents);

app.on('web-contents-created', (_, wc) => {
    setupWebContents(wc);
});