I’m writing a chrome extension where I want to remove content from a page before it loads like this. I am just checking to see if a DOM element exists in a a pre-determined list and then removing it.
The script works if I used "run_at": "document_end" in my manifest.json, but will not work when I use "run_at": "document_start." This causes a problem, because there is a delay between the time when page is displayed and when the elements are removed, which I have seen called "DOM Flickering."
I’ve tried before DOM (document.addEventListener('DOMContentLoaded', function()) and window.onload (window.onload = function(event)), and at:start/at:end in the manifest.json recommended here, but none of them actually remove the elements before they are displayed on the screen (i.e. I am able to remove the element, but not without flashing the original content for a split-second first).
Then, I took another a closer look at the app in the tutorial and saw that if you look closely enough, you will see the “died” section of the wikipedia page load before it is deleted. So my question is, is it possible to remove content from html before the page is displayed, and then display the page to users without them ever having seen that the content had been removed? I’ve only seen this, which uses something called a MutationObserver, but I have not been able to get it to work and know there must be an easier way.
Thank you!!
Edit: I got the mutation observer to work using this post, but this still does not remove the DOM flickering (and will still not run with "run_at": "document_end" in manifest.json).
