如何在 Google Chrome 扩展中存储数据？

Question

我正在尝试做一个 google chrome 扩展，其中有一个秒表，用户可以在其中单击开始、停止或重置按钮。单击此秒表后，我希望将时间保存在扩展程序本身中，以便用户始终可以单击扩展程序，但秒表上的时间将始终持续（直到他们按下停止）。我还想在用户屏幕上不断显示运行时间，就像这里的这个扩展： [1]: https://i.stack.imgur.com/k0HMg.png

这是我的代码：

//defining variables.
let seconds = 0;
let minutes = 0;
let hours = 0;

//these variables work to add a second "0" when there is only 1 digit in each respective value.
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//this variable is used to work the setInterval() method.
let interval = null;

//this variable holds the stopwatch's status.
let status = "stopped";

//stopwatch function, determining when to increment next value, and when to bring current values to zero.
function stopWatch() {

  seconds++;

  if (seconds / 60 === 1) {
    seconds = 0;
    minutes++;

    if (minutes / 60 === 1) {
      minutes = 0;
      hours++;
    }
  }

  //if any of the values within the timer are only 1 digit in length, we will add ANOTHER zero to it. 
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }

  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }

  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }

  //this part of the function will update the display every 1 second.
  document.getElementById("stopwatch-face").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}

function startStop() {
  if (status === "stopped") {
    interval = window.setInterval(stopWatch, 1000); //this plays out a certain function every set amount of time
    document.getElementById("startStop").innerHTML = "Stop";
    status = "start";
  } else {
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }
}

//this function will reset the stopwatch.
function reset() {

  window.clearInterval(interval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("stopwatch-face").innerHTML = "00:00:00";
  document.getElementById("startStop").innerHTML = "Start";

}
//This is what you do instead of "onclick", to make extensions....:
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("startStop").addEventListener("click", startStop);
});

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("reset").addEventListener("click", reset);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Snap Focus</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">

  <script type="text/javascript" src="popup.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="body">

  <body>
    <div class="content">
      <div class="modal-header">
        <div class="header">
          <h1 className="Title"><strong>Snap Focus</strong></h1>
        </div>
        <div class="modal-subheader">
          <p><i>Just press start to block unnecessary websites, and be more productive!</i></p>
        </div>
        <hr>
      </div>
      <div id="stopwatch-face">
        00:00:00
      </div>
      <div class="buttons">
        <button id="startStop">Start</button>
        <button id="reset">Reset</button>
      </div>
      <br>
    </div>
  </body>
</div>

</html>

非常感谢任何帮助！

Answer 1

您好，这是我调用的一个小脚本，用于在扩展程序中保存数据，希望您能使用它。您可能需要在清单中添加权限，这里是 chrome documentation

// Manage access_token storage

const TOKEN_NAME = 'faunaToken';

export function setAuth(token) {
  chrome.storage.sync.set({ [TOKEN_NAME]: token });
}

export function removeAuth() {
  chrome.storage.sync.remove([TOKEN_NAME]);
}

export function getAuth() {
  return new Promise((resolve) => {
    chrome.storage.sync.get([TOKEN_NAME], async (token) => {
      resolve(token[TOKEN_NAME]);
    });
  });
}

然后像

一样使用它

import { setAuth } from '../scripts/AuthToken';

somePromise.then(data => setAuth(data.token));

顺便说一下，您可能不想每秒调用一次来更新计数器。单击将时间戳保存到存储并让 popup.js 确定自时间戳

以来的时间可能会更好

如何在 Google Chrome 扩展中存储数据？

How to store data within a Google Chrome Extension?

javascript

database

backend

google-chrome-extension

google-chrome-devtools