如何解决如何在 Google Chrome 扩展程序中存储数据？
我正在尝试制作一个 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>
非常感谢任何帮助！
解决方法
嗨，这是我调用的一个小脚本，用于在扩展中保存数据，希望您可以使用它。您可能需要在清单中添加权限，这是 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 确定自时间戳起的时间可能会更好
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
