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:
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);
}