I am looking to develop a custom chrome extension with a countdown timer functionality that automatically runs in the background. However, I am facing an issue where my background.js file is unable to access the popup.html file. How can I execute scripts in the background and dynamically update the DOM?
popup.html:
<span class="time">20:00</span>
<script src="background.js"></script>
background.js:
startTimer = (duration, display) => {
let time = duration, minutes, seconds;
setInterval(() => {
minutes = parseInt(time / 60, 10);
seconds = parseInt(time % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.innerHTML = `${minutes}:${seconds}`;
if (--time < 0) {
time = duration;
}
}, 1000);
}
window.onload = () => {
let duration = 60 * .1, display = document.querySelector('.time');
startTimer(duration, display);
}