如何将 react 导入我的 background.js chrome 扩展答案

【问题标题】：How can I import react into my background.js chrome extension如何将 react 导入我的 background.js chrome 扩展
【发布时间】：2021-06-12 12:26:05
【问题描述】：

我有想要包含在我的 background.js 中的反应代码，但我收到以下错误：SyntaxError: Cannot use import statement outside a module

导致错误的导入：

import React, { useState } from 'react'

我做了一些研究并尝试添加 type: module，但这不起作用。

我能做些什么来解决这个问题

【问题讨论】：

后台脚本没有视图层，为什么要先导入react？
我有一个计数器计时器，我在其中使用了一个反应库，我想在用户弹出扩展时继续倒计时。
当弹出窗口打开时计时器工作正常，但我需要它继续倒计时，即使用户选项卡没有弹出。我正在使用react-countdown
React 只是一个视图库。您需要单独跟踪计数逻辑。在无头环境中导入反应不会改变这一点。
在您看来，最好的做法是在后台创建代码以保持反应计时器的计数，或者只是在 background.js 中的 vanilla js 中重新创建一个计时器。

标签： javascript reactjs google-chrome-extension import

【解决方案1】：

基于 cmets

问：您认为最好的做法是在后台创建代码以记录反应计时器的计数，或者只是在 background.js 中的 vanilla js 中重新创建一个计时器。

答：在我看来，最好的办法是存储倒计时开始的时间戳，然后每秒钟重新渲染视图并计算自原始时间戳。

if (!localStorage.getItem('startTime')) {
   localStorage.setItem('startTime', Date.now());
}
const startTime = parseInt(localStorage.getItem('startTime'), 10);

const writeTime = () => {
  const currentTime = Date.now();
  const secondsDiff = Math.floor((currentTime - startTime) / 1000);
  document.body.innerText = secondsDiff;
};

setInterval(writeTime, 1000);
writeTime();

本地存储在 SO sn-ps 中不可用，但它们在 jsfiddle 上：https://jsfiddle.net/5ym9w2hr/20/

【讨论】：

非常感谢，我会尽快尝试。因此，如果用户设置时间，例如 5 分钟，然后用户选项卡远离弹出窗口，然后一分钟后返回，这个 coe 将计算已经过去的时间，现在在计时器上显示还剩 4 分钟？后台能否获取用户输入的时间并计算出来？