'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 |
|---|
