Firefox 扩展 - 将布尔值保存到存储

Jan*_*ski 6 javascript

在 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)

我的代码有什么问题吗?我保存布尔值的方法可以吗?我尝试写入控制台进行“调试”,但我不知道该怎么做 - 这是用户按下图标后的弹出窗口,控制台中没有显示任何内容。

Ale*_*les 1

代码看起来不错,虽然我会改变一些东西(为了重构目的以符合我的风格),但我认为它应该可以正常工作,没有太多问题。

无论如何,请验证以下内容。

  1. browser.storage.syncAPI 只能通过扩展使用,因此请检查您发布的 HTML 和 JS 实际上是您正在使用的扩展的一部分。
  2. manifest.json告诉浏览器您的扩展程序可以访问哪些资源,验证您是否确实"storage"在此处添加了权限,您可以在 chrome 中阅读有关它的更多信息,尽管其他浏览器也是如此
  3. 出于调试目的,请始终记住浏览器可以为您提供出色的工具。阅读有关开发人员工具的更多信息,但作为初学者,我会告诉您打开它们并debugger在您觉得有些东西未按预期工作的地方发表声明。然后使用控制台开始查找您未找到的属性。
  4. 要将项目记录到控制台console.log('XXX'),它应该显示您想要的内容