Firefox扩展实现开关状态存入sync storage的代码问题排查

• setCurrentChoice 函数未接收存储接口返回的结果对象：browser.storage.sync.get 执行成功后返回的存储数据会作为参数传入then的回调函数，你原有代码的回调没有定义result参数，直接访问result.delovanje会抛出未定义报错。
• 开关元素获取方法错误：document.getElementsByName 返回的是符合条件的元素集合（NodeList类型），不是单个元素，且你的开关控件没有设置name="flexSwitch"属性，永远拿不到目标元素，应该用document.getElementById("flexSwitch")获取元素。
• （可选遗漏项）未在manifest.json中声明storage权限：使用browser.storage系列API必须在扩展清单的permissions字段中添加"storage"，否则存储调用会直接报错。

你当前存储数字0/1的写法可以跑通，但更推荐直接存储布尔值true/false：

• 语义更贴合开关的二元状态，不需要额外做类型等值判断
• 代码可读性更高，后续维护不容易出现类型匹配错误
• 存储占用空间和数字类型没有差异，无性能损失

function CheckAndSave() {
    const state = document.getElementById("flexSwitch");
    const statusText = document.getElementById('test');
    // 直接存布尔值
    const saveState = state.checked;
    statusText.innerHTML = saveState ? 'ON' : 'OFF';
    browser.storage.sync.set({ delovanje: saveState });
    // 此处不需要重复调用restoreState，已经知道当前状态，可省略该行
}

function restoreState() {
    const getting4 = browser.storage.sync.get("delovanje");
    getting4.then(setCurrentChoice, onError);

    function onError(error) {
        console.log(`Error: ${error}`);
    }
    // 接收返回的存储结果参数
    function setCurrentChoice(result) {
        const toggle = document.getElementById("flexSwitch");
        const statusText = document.getElementById('test');
        // 兼容首次运行未存储的场景，默认给false值
        const currentState = result.delovanje ?? false;
        toggle.checked = currentState;
        statusText.innerHTML = currentState ? 'ON' : 'OFF';
    }
}

document.addEventListener("DOMContentLoaded", restoreState);
document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);

• 右键点击弹出的扩展弹窗空白区域，直接选择「检查」，即可调出弹窗对应的独立开发者工具，所有console日志、网络请求、元素审查都可以在这个工具里查看，和普通网页的开发者工具用法完全一致
• 也可以通过火狐扩展调试页面统一查看：地址栏输入about:debugging#/runtime/this-firefox，找到你开发的扩展，点击「检查」按钮即可进入扩展的全局调试控制台，包含弹窗、后台脚本等所有上下文的日志

内容的提问来源于stack exchange，提问作者JanezKranjski