Search for a given word in a page before loading

I’m sorry if this is super-elementary, I couldn’t even find where to look…

I want to write an extension to hide sections of a webpage containing words from a user-curated list (for instance, words specific to hatespeech, flaming, and triggers). I can see how to write “If URL contains”… but not “If page content contains”. Is there such a function? Do I need to intercept first?

Bonus question: I’d like to prepare some default lists so the user doesn’t haven’t to rack their brains for all the eg. racist terms. Is it going to be very computationally heavy to check for 200 words or so on each page-load?

Most important question: Is there a single place where I can look at all the available functions?

That is possible but created a lot of overheads.

You can read the request before it is processed, convert the text into DOM, look for the words by walking the DOM tree, find and hide the containing DOM then pass the rest to be displayed (like some ad blocking function) but that takes a LOT of processing and I wouldn’t advise it.

The best way, is to start reading the page as soon as DOM is loaded but it is still processing the JS and images etc, so the page is not fully visible ie on DOMContentLoaded. It is fast enough to run (milliseconds) without causing a visual glitch.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

There are a few similar add-ons on AMO. You can check them out for ideas.

Checking for 200 words one at a time (run the DOM tree walker 200 times) is a waste of resources but you can make a RegEx and run it once and that would do the job.

Some would need WebExtension API and some pure JaaScript. MDN is a good source for both.

1 Like