保持反应铬扩展状态

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