电子：防止<style> tags in DOM from loading

Question

Is there a way to remove all styling from an Electron webview before the page is shown?

So far, I can inject JS to remove all styling after the document is loaded:

document.addEventListener("DOMContentLoaded", function(){
  document.querySelectorAll('link[rel="stylesheet"], style').forEach(elem => elem.disabled = true);
});

The problem here is that the styles will show for a brief moment (~1 second) before styling is removed.

I can also use the following in my Main class to remove all .css files prior to page load:

session.webRequest.onBeforeRequest({urls: ['https://*/*.css', 'http://*/*.css']}, function(details, callback) {
  callback({cancel: true});
});

This, however, does not remove tags embedded in the DOM. For a better idea of what I'm trying to do, you can check out Firefox's "No Style" feature (View -> Page Style -> No Style).

Thanks in advance.

Answer 1

There are two ways I can think of to prevent this:

1. Give the webview a visibility:hidden style, and make it visible later.
2. Point to a forwarding proxy who will strip out inline as well as linked CSS

Number 1 sounds to me a quicker and more reliable solution, but I haven't tried it out.

Let me know how it goes.