要保存和恢复Chrome扩展中多个复选框的选中状态,可以使用Chrome的存储API来实现。以下是一个示例代码:
manifest.json
文件中添加"storage"
权限:{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"options_page": "options.html",
"browser_action": {
"default_popup": "popup.html"
}
}
options.html
文件中添加复选框:
Options
Options
options.js
文件中保存和恢复复选框的选中状态:document.addEventListener('DOMContentLoaded', function() {
// 从存储中获取选中状态
chrome.storage.sync.get(['checkbox1', 'checkbox2', 'checkbox3'], function(result) {
// 更新复选框的选中状态
document.getElementById('checkbox1').checked = result.checkbox1;
document.getElementById('checkbox2').checked = result.checkbox2;
document.getElementById('checkbox3').checked = result.checkbox3;
});
// 监听复选框的更改事件
document.getElementById('checkbox1').addEventListener('change', function() {
// 保存复选框的选中状态
chrome.storage.sync.set({checkbox1: this.checked});
});
document.getElementById('checkbox2').addEventListener('change', function() {
chrome.storage.sync.set({checkbox2: this.checked});
});
document.getElementById('checkbox3').addEventListener('change', function() {
chrome.storage.sync.set({checkbox3: this.checked});
});
});
background.js
文件中可选地清除存储:chrome.runtime.onInstalled.addListener(function() {
// 清除存储,以便每次安装或更新扩展时重置选中状态
chrome.storage.sync.clear();
});
这样,每当用户更改复选框的选中状态时,状态将保存在浏览器的存储中。当用户重新打开扩展或浏览器时,选中状态将从存储中恢复。
下一篇:保存和恢复E4工作台