我正在构建 StopWatch 的 Chrome 扩展，但是当我点击其他任何地方时它会自动重置

Question

我正在尝试构建秒表 chrome 扩展程序并遇到一个问题，即每当我单击窗口中的其他任何位置（外部扩展程序弹出窗口）时，我的秒表都会重置为 0，但我希望它应该一直运行，直到我手动将其关闭或关闭浏览器。 帮我解决一下

这是我的 Manifest.json 代码

{
"name": "ClockSet",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
    "default_popup": "index.html",
    "default_icon": "logo.png"
},
"icons": {
    "128": "logo.png"
}}

这是我的 JavaScript

//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); // If Some Error Happen and Interval is Setup, It Will Clear That Interval
    interval = setInterval(startTimer, 10); //
};
pauseButton.onclick = function() {
    clearInterval(interval); // On Clicking Pause Buttom We Will Clear Interval
};
stopButton.onclick = function() {
    clearInterval(interval); // Clear Interval
    clearFields(); // Clear 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/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

Answer 1

您必须在后台脚本（而不是弹出脚本）中运行您的代码。 当弹出窗口像在其中声明的所有变量一样关闭时，弹出窗口脚本实例就会消失。 因此，弹出脚本应该向后台脚本发送一条命令消息，以通知用户何时按下任何按钮。所以秒表也会在没有打开的弹出窗口的情况下继续运行。 当用户再次打开弹出窗口时，会要求后台脚本返回一些变量（ms、s、m、h）以更新秒表。 但是，此系统仅适用于 manifest V2