In the process of developing a Chrome extension, I am tackling the task of removing or hiding specific elements based on their id/class. While accomplishing this after the DOM is loaded poses no issue, it does result in a noticeable "blink" on the page during the element removal process. To address this, my objective is to handle the removal while the elements are being added to the DOM.
My aim is to delete designated elements as they are introduced into the DOM structure.
I have been referencing this resource, but my current implementation only allows me to access the HTML node without being able to target the other elements.
The contentScript.js script I am working with looks like this:
const mo = new MutationObserver(onMutation);
onMutation([{ addedNodes: [document.documentElement] }]);
observe();
function onMutation(mutations) {
let stopped;
for (const { addedNodes } of mutations) {
for (const n of addedNodes) {
if (n.tagName) {
if (n.tagName == 'DIV'){
n.remove();
}
}
}
if (stopped) observe();
}
}
function observe() {
mo.observe(document, {
subtree: true,
childList: true,
});
}
Within my manifest file, I have included:
"content_scripts": [
{
"matches": ["https://*.somewebsite.com/*"],
"run_at": "document_start",
"all_frames": true,
"js": ["/static/thirdParty/jquery-3.6.3.min.js", "/static/contentScript.js"]
}
],
Despite these efforts, my console output only displays the html node and not the additional elements being added. Am I taking the wrong approach here?