Chrome扩展复选框CSS注入移除功能异常排查

两个异常都是逻辑漏洞和写法错误共同导致的，不需要替换成单选按钮组，现有全选toggle按钮的交互形式完全符合使用习惯：

• 取消全选无法移除样式的核心原因：
  1. 路径匹配错误：Option2注入路径带多余空格css/option 2.css、Option3注入路径首字母大写css/Option03.css，和移除时写的路径css/option2.css、css/option03.css不一致，Chrome的insertCSS/removeCSSAPI是严格精确匹配路径字符串的，路径对不上就无法移除对应样式。
  2. 重复注入问题：全选分支把注入三个CSS的代码写在了遍历复选框的for循环内部，3次循环会重复注入3次全套样式，而移除逻辑只执行1次removeCSS，仅能删掉最后1次注入的样式实例，剩余2次注入的样式会残留在页面上。
  3. 异步时序问题：全选分支的insertCSS调用前没加await，样式还没注入完成就可能触发后续逻辑，存在执行顺序错乱的可能。
  4. 初始状态错位：全选按钮HTML里初始加了pressed类，但aria-pressed属性值是false，加载完成时状态就不统一。
• 全选后单个复选框失效的核心原因：
  1. 重复注入的样式没有被对应移除：和上述重复注入问题对应，单个复选框点击时只会执行1次移除操作，没法删掉全选时重复注入的多份样式，视觉上就像操作完全失效。
  2. 状态管理混乱：单个复选框的状态判断完全依赖手动维护的aria-checked属性，没有和原生checkbox的checked属性绑定，全选时只批量设置了属性值，没有和实际注入状态做同步，很容易出现属性状态和页面实际效果不匹配的问题。

重构后冗余度降低90%，从根源解决上述问题，同时内置了chrome.storage.local状态持久化能力，popup关闭后再打开会自动恢复上次的选中状态：
首先修正popup.html的初始问题，给每个复选框加配置项绑定对应CSS路径，后续新增选项只需要加HTML节点即可，不需要改JS逻辑：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/popup.css">
</head>
<body>
    <div class="ws-bm-aria-matrices-button" id="ws-bm-aria-matrices-parent">
        <fieldset>
            <legend>Options</legend>
            <button type="button" id="chkAllOptions" aria-pressed="false">All options</button>
            <ul>
                <li>
                    <label for="option01" class="switch--label">
                        <span class="label">Option 1</span>
                    </label>
                    <input id="option01" type="checkbox" name="chkAll" data-css="css/option01.css">
                </li>
                <li>
                    <label for="option02" class="switch--label">
                        <span class="label">Option 2</span>
                    </label>
                    <input id="option02" type="checkbox" name="chkAll" data-css="css/option02.css">
                </li>
                <li>
                    <label for="option03" class="switch--label">
                        <span class="label">Option 3</span>
                    </label>
                    <input id="option03" type="checkbox" name="chkAll" data-css="css/option03.css">
                </li>
            </ul>
        </fieldset>
    </div>
    <script src="popup.js"></script>
</body>
</html>

重构后的popup.js，抽离所有公共逻辑，统一状态入口：

// DOM元素统一获取
const selectAllBtn = document.getElementById("chkAllOptions");
const optionCheckboxes = Array.from(document.getElementsByName('chkAll'));

// 抽离公共方法：获取当前活动标签页
async function getActiveTab() {
    const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    return tab;
}

// 抽离公共方法：切换单个样式的注入/移除状态
async function toggleStyle(tabId, cssPath, isChecked) {
    try {
        if (isChecked) {
            await chrome.scripting.insertCSS({
                target: { tabId },
                files: [cssPath]
            });
        } else {
            await chrome.scripting.removeCSS({
                target: { tabId },
                files: [cssPath]
            });
        }
    } catch (err) {
        console.error(`操作样式${cssPath}失败: ${err}`);
    }
}

// 抽离公共方法：同步全选按钮显示状态
function syncSelectAllBtn() {
    const allChecked = optionCheckboxes.every(cb => cb.checked);
    selectAllBtn.classList.toggle("pressed", allChecked);
    selectAllBtn.setAttribute("aria-pressed", String(allChecked));
}

// 抽离公共方法：保存选中状态到本地存储
async function saveSettings() {
    const settings = {};
    optionCheckboxes.forEach(cb => {
        settings[cb.id] = cb.checked;
    });
    await chrome.storage.local.set({ styleSettings: settings });
    syncSelectAllBtn();
}

// 初始化：读取本地存储状态，恢复选中效果和对应样式
async function init() {
    const tab = await getActiveTab();
    const { styleSettings = {} } = await chrome.storage.local.get("styleSettings");
    
    optionCheckboxes.forEach(cb => {
        const savedState = styleSettings[cb.id] ?? false;
        cb.checked = savedState;
        cb.setAttribute("aria-checked", String(savedState));
        toggleStyle(tab.id, cb.dataset.css, savedState);
    });
    syncSelectAllBtn();
}

// 全选按钮事件
selectAllBtn.addEventListener("click", async () => {
    const tab = await getActiveTab();
    const targetState = selectAllBtn.getAttribute("aria-pressed") !== "true";
    
    for (const cb of optionCheckboxes) {
        if (cb.checked !== targetState) {
            cb.checked = targetState;
            cb.setAttribute("aria-checked", String(targetState));
            await toggleStyle(tab.id, cb.dataset.css, targetState);
        }
    }
    await saveSettings();
});

// 单个复选框统一绑定事件，无需为每个选项单独写监听
optionCheckboxes.forEach(cb => {
    cb.addEventListener("change", async () => {
        const tab = await getActiveTab();
        const isChecked = cb.checked;
        cb.setAttribute("aria-checked", String(isChecked));
        await toggleStyle(tab.id, cb.dataset.css, isChecked);
        await saveSettings();
    });
});

// 页面加载完成执行初始化
init();

注意：需要在manifest.json中声明对应权限才能正常运行：

"permissions": ["scripting", "storage", "activeTab"],
"host_permissions": ["<all_urls>"]

• 所有样式路径统一通过DOM的data-css属性配置，新增选项只需要在HTML中添加对应节点即可，不需要重复编写JS逻辑。
• 全选逻辑不再批量注入/移除全套样式，而是遍历每个复选框对比当前状态，仅对状态发生变化的选项执行样式操作，从根源上避免重复注入问题。
• 状态统一以原生checkbox的checked属性为唯一可信源，aria-checked属性、全选按钮状态、本地存储状态全部从这个核心状态同步，不会再出现状态错位。
• 所有异步API都添加了await，不存在时序问题；注入和移除逻辑复用同一份路径配置，不会再出现路径不匹配无法移除的问题。

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