'Changing DOM in Chrome Extension gets removed at the end of website loading

I am new to chrome extension.

I have built something that changes the display of the page (I am inserting a small "div").

It works fine at first, I can see my div being added, but then more javascript of the target website loads and my addition disappears!

Any idea what could be the reason?

These are the tests I have done so far:

  • No difference of error messages in javascript with or without the extension
  • The extension works fine on another website

EDIT: I am trying to add something on https://www.sainsburys.co.uk/shop/gb/groceries/*

using the following script:

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

let itemClassName = "productInfo";
let itemList = document.getElementsByClassName(itemClassName);

for (let i = 0; i < itemList.length; i++) {

    let divList = itemList[i].getElementsByTagName('div')
    
    const indicDiv = document.createElement('div')
    indicDiv.style.color = '#018A76'
    indicDiv.style.fontSize = '18px'
    indicDiv.style.fontWeight = 'bold'
    indicDiv.style.textAlign = 'center'
    indicDiv.innerText = 'BUY'

    insertAfter(divList[0], indicDiv);
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source