I'm a creating a chrome extension to give a different look to a website I visit.
I'm only making small changes, like changing the background image, background colors, etc.
I managed to successfully change the background-image and also gave it an opacity property, but the opacity doesn't always work.
It's working when I reload the page, but it goes away if I visit pages within the website. Then shows up again if I refresh that page. The rest of the properties (background color) don't seem to have this problem.
Here's the original code on the website:
<div class="class1">
<img src="someotherimg.jpg" />
</div>
Here's the javascript I'm using:
bg = document.getElementsByClassName("class1")[0];
bg.id = "bg-img";
bgImg = document.getElementById("bg-img").getElementsByTagName("img")[0];
bgImg.src = "imgiwant.jpg";
bgImg.style.opacity = '0.35';
Also, another problem I'm facing is that whenever a page loads, for a fraction of a second it looks like how it would without the extension and then quickly turns to how I've designed it. Is there any way around this?
EDIT: Now it's more or less random when the opacity works or doesn't work, regardless of clicking a link or refreshing. What's surprising is that the other properties (height, top, etc) work all the time.
Using "run_at": "document_start" failed to even show any change. With "run_at": "document_end", and "run_at": "document_idle" give the same result as not using anything at all.
For a fraction of a second, the old styles are applied and then my custom styles.