在 Firefox 扩展中,我想实现一个简单的切换开关来启用/禁用扩展。基本思想是状态的变化将作为布尔值保存到浏览器(同步)存储中。每次都应该读取状态,这样扩展就会知道是否应该工作。但是 - 我的 Javascript 知识太差了,以至于我遇到了麻烦。
这是简单的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form id="form" class="ps-3 mt-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitch">
<label class="form-check-label" for="flexSwitch">Plugin ON/OFF</label>
</div>
</form>
<label id="test"></label>
<br>
<script src="options.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这是一个简单的 JS 文件:
function CheckAndSave()
{
var state = document.getElementById("flexSwitch");
if(state.checked)
{
document.getElementById('test').innerHTML = 'ON';
browser.storage.sync.set({ delovanje: 1 });
}
else
{
document.getElementById('test').innerHTML = 'OFF';
browser.storage.sync.set({ delovanje: 0 });
}
restoreState();
}
function restoreState()
{
//browser.storage.sync.get("delovanje", function(items) { console.log(items)});
let getting4 = browser.storage.sync.get("delovanje");
getting4.then(setCurrentChoice, onError);
function onError(error) {
console.log(`Error: ${error}`);
}
function setCurrentChoice()
{
var toggle = document.getElementsByName("flexSwitch");
if (result.delovanje === 1)
toggle.checked = true;
else
toggle.checked = false;
}
}
document.addEventListener("DOMContentLoaded", restoreState);
document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);
Run Code Online (Sandbox Code Playgroud)
我的代码有什么问题吗?我保存布尔值的方法可以吗?我尝试写入控制台进行“调试”,但我不知道该怎么做 - 这是用户按下图标后的弹出窗口,控制台中没有显示任何内容。
代码看起来不错,虽然我会改变一些东西(为了重构目的以符合我的风格),但我认为它应该可以正常工作,没有太多问题。
无论如何,请验证以下内容。
browser.storage.syncAPI 只能通过扩展使用,因此请检查您发布的 HTML 和 JS 实际上是您正在使用的扩展的一部分。manifest.json告诉浏览器您的扩展程序可以访问哪些资源,验证您是否确实"storage"在此处添加了权限,您可以在 chrome 中阅读有关它的更多信息,尽管其他浏览器也是如此debugger在您觉得有些东西未按预期工作的地方发表声明。然后使用控制台开始查找您未找到的属性。console.log('XXX'),它应该显示您想要的内容