如何保留 Firefox 附加弹出窗口的复选框 state？

Question

I'm trying to make a toggle switch based on a checkbox.我正在尝试基于复选框进行切换。 The checkbox should only change when the user toggles the switch.该复选框仅应在用户切换开关时更改。

Here's my JavaScript code:这是我的 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" });
  }
};

However, the checkbox state is always set to unchecked when I reopen the popup.但是，当我重新打开弹出窗口时，复选框 state 始终设置为未选中。 Any ideas about how I can achieve making this?关于如何实现这一目标的任何想法？

Answer 1

Save the state to local storage.将 state 保存到本地存储。 Here's a simplified example:这是一个简化的示例：

manifest.json: manifest.json：

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

index.html:索引.html：

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

index.js: 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 附加弹出窗口的复选框 state？

问题描述

1 个解决方案

解决方案1
0 2022-01-23 17:14:14

如何保留 Firefox 附加弹出窗口的复选框 state？

问题描述

1 个解决方案

解决方案1 0 2022-01-23 17:14:14

解决方案1
0 2022-01-23 17:14:14