如何保持 Firefox 附加组件弹出窗口的复选框状态？

Question

我正在尝试制作一个基于复选框的切换开关。复选框应仅在用户切换开关时更改。

这是我的 JavaScript 代码：

var toggle = false;
document.getElementById("toggle").onclick = function () {
  if (this.checked == true) {
    toggle = true;
    document.getElementById("toggleText").textContent = "ENABLED";
    browser.browserAction.setIcon({ path: "/icons/icon.png" });
  } else {
    document.getElementById("toggleText").textContent = "DISABLED";
    browser.browserAction.setIcon({ path: "/icons/icon-inactive.png" });
  }
};

但是，当我重新打开弹出窗口时，复选框状态始终设置为未选中。关于我如何实现这一点有什么想法吗？

Answer 1

将状态保存到本地存储。这是一个简化的例子：

manifest.json:

{
    "manifest_version": 2,
    "name": "Save states",
    "version": "1.0.0",
    
    "browser_action": {        
        "default_title": "States",
        "default_popup": "index.html"
    }
}

index.html:

<html>
    <head>
    </head>
    <input type="checkbox" id="checkbox"> checkbox
    <script src="index.js"></script>
</html>

index.js:

const checkboxStorageState = JSON.parse(localStorage.getItem("checkboxStorageState"));
const check = document.getElementById("checkbox");
let currentState = false;

if(checkboxStorageState) {
    currentState = checkboxStorageState;
    check.checked = currentState;
}

check.onclick = function() {
    if(this.checked) {
        currentState = true;
    }
    else {
        currentState = false;
    }
    localStorage.setItem("checkboxStorageState", JSON.stringify(currentState));
}

如何保持 Firefox 附加组件弹出窗口的复选框状态？

How do I keep the checkbox state for Firefox add-on popup?

javascript

firefox-addon