Question

在Chrome中运行react-app不会保留状态。例如，我有一个计时器应用程序。计时器运行，但是关闭弹出窗口后，它不会保留状态。

使用react-app运行后台脚本的正确做法是什么？如何实现？

示例代码：

import React, {useEffect, useState} from "react"

const Timer = () => {
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);

    useEffect(() => {
        let interval;
        if (isActive) {
             interval = setInterval(() => setSeconds(seconds + 1), 1000)
        } else {
            clearInterval(interval)
        }
        //stops the interval from running
        return () => clearInterval(interval)
    }, [seconds, isActive]);

    const toggleActive = () => {
         setIsActive(!isActive)
    };

    return (
        <div>
            <button onClick={toggleActive}>{seconds}</button>
        </div>
    )
};

export default Timer

Answer 1

如果将redux与redux-persist一起使用，则将计时器存储在Redux中。无需保存到localStorage。

Answer 2

如果我正确理解，即使弹出窗口不再打开，您仍要保持计时器运行。目前，您可以在弹出式页面中启动计时器（关闭后，计时器将停止运行）。

您可以直接在后台脚本中运行计时器。即使您没有打开弹出窗口，它也将继续运行。您需要像这样在扩展程序清单中注册它： https://developer.chrome.com/extensions/background_pages#manifest

要与弹出窗口进行通信，以便可以显示计时器的进度，可以使用扩展的消息传递选项之一： https://developer.chrome.com/extensions/messaging

另一种方法也可以是存储计时器的开始时间，以便您在重新打开弹出窗口时可以再次启动计时器。看起来可能像这样：

在弹出窗口启动时，检查是否已经设置了启动时间，也许还有启动计时器：

chrome.storage.local.get(['start'], function(result) {
  if(result.start) {
    // restart the timer
  }
});

点击开始时，存储开始时间和开始计时器：

const now = Date.now();
chrome.storage.local.set({start: now}, function() {
  // start timer
});

，然后单击“停止”，从存储中删除开始时间：

chrome.storage.local.remove('start', function() {
  // also stop the active timer
});

您可以在此处找到扩展存储的更多文档：https://developer.chrome.com/extensions/storage

保持反应铬扩展状态

2 个答案: