Is it possible to style the webpack dev server client overlay?

user_823282 0
Viewed 415

I'm using an Angular application, and when I make a mistake in the code the webpack overlay div shows up in my browser. The iframe for this can be styled using the dev tools in the web browser by adding a style on the div like so:

#webpack-dev-server-client-overlay-div {
  font-size: 11px !important;
}

Is there a way to write a style file for this iframe? I've tried adding styles to my Angular application's styles.scss file, but it has no effect (I guess because it's in an iframe subelement inside my application). The goal is to make the text smaller, and maybe have more control of how the text is shown -- for some unfortunate reason, the default text size is "large".

Quoted from another stackoverflow answer on a similar topic:

If you are trying to target the markup which is loaded inside the iframe than that's not possible.

The above is not applicable in this case, because webpack is open source and it should be easy to configure the iframe (either monkey patching, using an existing configuration value, or writing a webpack plugin)

angular webpack iframe css
1 Answers

You can not change webpack error template directly with app style but you can overwrite any style with the stylus extension (as a browser extension). Just install and write your own style.

Edit: I didn't try the above method before and tried now, results: fail. The above method is not working because of webpack using iframe. We can't overwrite the iframe's CSS. So, we need to use the javascript option and at the same time, we should write each refresh. Now, I am offering the TamperMoney extension. This extension allows the running of custom JS scripts on the target webpage. Install and create a new user script.

Here is my scenario; I want to force the light mode when the page reloads.

// ==UserScript==
// @name         Webpack Error Screen Light Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       EgoistDeveloper
// @match        http://localhost:4200/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    // overwrite with custom CSS
    function forceToLightMode() {
        // if browser is not in dark mode, force it to be
        if (
            window.matchMedia &&
            !window.matchMedia("(prefers-color-scheme: dark)").matches
        ) {
            const styleElement = document.createElement("style");
            styleElement.textContent = `#webpack-dev-server-client-overlay-div {
                background-color: rgb(243 243 243 / 85%) !important;
                color: rgb(0 0 0) !important;
            }`;

            const iframeElement = document.getElementById("webpack-dev-server-client-overlay"),
                iframeOverlay = iframeElement.contentWindow.document.getElementsByTagName("head");

            iframeOverlay[0].appendChild(styleElement);
        }
    }

    setTimeout(() => {
        forceToLightMode();
    }, 250);

    setInterval(() => {
        forceToLightMode();
    }, 3000);
})();

Note: you should change user script meta configs with yours and done. Actually, both of these methods are valid in many cases.

user_69401440
Related