I am currently working on a stopwatch chrome extension and facing an issue where clicking anywhere outside the extension popup resets the stopwatch to zero. I would like the stopwatch to keep running until I manually stop it or close the browser. Can someone assist me in resolving this issue?
Below is the code from my Manifest.json file:
{
"name": "ClockSet",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_icon": "logo.png"
},
"icons": {
"128": "logo.png"
}}
Below is the JavaScript code I am using:
//JavaScript code for Stopwatchconst
// Timer Field
let hourElement = document.querySelector(".hour");
let minuteElement = document.querySelector(".minute");
let secondElement = document.querySelector(".second");
let millisecondElement = document.querySelector(".milliSecond");
// Button Field
let startButton = document.querySelector(".start");
let pauseButton = document.querySelector(".pause");
let stopButton = document.querySelector(".stop");
// Counter Variable
let hour = 00;
let minute = 00;
let second = 00;
let millisecond = 00;
let interval;
window.onload = () => clearFields();
startButton.onclick = function() {
clearInterval(interval); // Clears any existing interval
interval = setInterval(startTimer, 10); //
};
pauseButton.onclick = function() {
clearInterval(interval); // Clears interval when pause button is clicked
};
stopButton.onclick = function() {
clearInterval(interval); // Clears interval
clearFields(); // Clears timer fields
};
function startTimer() {
millisecond++;
if (millisecond < 9) {
millisecondElement.innerText = "0" + millisecond;
}
if (millisecond > 99) {
second++;
secondElement.innerText = "0" + second;
millisecond = 0;
millisecondElement.innerText = "0" + millisecond;
}
if (second > 60) {
minute++;
minuteElement.innerText = "0" + minute;
second = 0;
secondElement.innerText = "0" + second;
}
if (millisecond > 9) {
millisecondElement.innerText = millisecond;
}
if (second > 9) {
secondElement.innerText = second;
}
if (minute > 9) {
minuteElement.innerText = minute;
}
if (hour > 9) {
hourElement.innerText = hour;
}
}
function clearFields() {
hourElement.innerText = "00";
minuteElement.innerText = "00";
secondElement.innerText = "00";
millisecondElement.innerText = "00";
}.watch {
margin: 20px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecc9b98939196909faec3c1c5c4dbc7c5c3dbc4d2d9c6d9cdd2d6">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="db7a4a4a2c1b2bbc8adbecdc2c4c6f9b7b9bcb1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="stopwatch">
<div class="row watch">
<div class=" col-3 hourDiv">
<h3 class="hour">01</h3>
<p class="hourTitle">Hour</p>
</div>
<div class="col-3 minuteDiv">
<h3 class="minute">30</h3>
<p class="minuteTitle">Min</p>
</div>
<div class="col-3 secondDiv">
<h3 class="second">01</h3>
<p class="secondTitle">Sec</p>
</div>
<div class="col-3 milliSecondDiv">
<h3 class="milliSecond">99</h3>
<p class="milliSecondTitle">Millis</p>
</div>
</div>
<div class="buttons">
<button class="btn btn-primary start button" title="Start"><i class="bi bi-play"></i></button>
<button class="btn btn-primary pause button" title="Pause"><i class="bi bi-pause-fill"></i></button>
<button class="btn btn-primary stop button" title="Reset"><i class="bi bi-arrow-clockwise"></i></button>
</div>
</section>