如何使用chrome.storage.local实现弹窗关闭后复选框状态持久化

核心问题排查 #

你现有代码的逻辑错误集中在三点：

• DOM加载完成后未等存储读取完成就立刻写入存储，会直接覆盖历史保存的选中状态
• 复选框事件绑定位置错误，没有在状态变更时同步更新存储值
• 弹窗重新打开还原选中状态时，未同步给当前激活标签页注入对应CSS，导致状态和页面实际效果不一致
• popup.html 无需修改，保持原有代码即可正常使用

修正后完整 popup.js 代码 #

document.addEventListener('DOMContentLoaded', async () => {
  const headingToggle = document.getElementById("headings");
  const [currentTab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  // 读取本地存储还原开关状态
  const savedConfig = await chrome.storage.local.get(['headingToggleEnabled']);
  const isEnabled = savedConfig.headingToggleEnabled ?? false;
  headingToggle.checked = isEnabled;

  // 还原状态时同步给当前标签页应用对应样式
  if (isEnabled) {
    try {
      await chrome.scripting.insertCSS({
        target: { tabId: currentTab.id },
        files: ["css/headings.css"]
      });
    } catch (err) {
      console.error('初始样式注入失败:', err);
    }
  }

  // 监听开关状态变化
  headingToggle.addEventListener("change", async () => {
    const newState = headingToggle.checked;
    // 最新状态写入本地存储
    await chrome.storage.local.set({ headingToggleEnabled: newState });

    try {
      if (newState) {
        await chrome.scripting.insertCSS({
          target: { tabId: currentTab.id },
          files: ["css/headings.css"]
        });
      } else {
        await chrome.scripting.removeCSS({
          target: { tabId: currentTab.id },
          files: ["css/headings.css"]
        });
      }
    } catch (err) {
      console.error(`样式操作失败: ${err}`);
    }
  });
});

必要权限配置检查 #

确保 manifest.json（Manifest V3）中声明了以下权限，否则存储、CSS注入接口会调用失败：

{
  "manifest_version": 3,
  "permissions": ["storage", "scripting", "activeTab"],
  "host_permissions": ["<all_urls>"],
  // 其余popup配置、图标配置保持原有内容即可
}

关键注意事项 #

• 禁止在DOM初始化阶段直接调用chrome.storage.local.set写入默认值，必须等待存储读取完成、给复选框赋值后，再绑定状态变更的写入逻辑，否则会永久覆盖历史保存的配置
• 优先用change事件监听复选框，而非click事件：只有当checked属性实际发生变化时才触发后续逻辑，避免无效调用
• 每次打开popup时，必须根据存储的状态主动给当前标签页注入/移除CSS：popup是临时页面，关闭后上下文会被销毁，不会自动记录之前的样式注入记录
• 存储key建议用语义化命名（比如headingToggleEnabled），后续扩展其他开关功能时不会出现key冲突

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