Select all checkbox and load selection feature broken

Build a Chrome extension (manifest v3) that injects a generated userscript into the target page. The UI is a React 18 single‑page popup (styled with TailwindCSS) where the user enters three CSS selectors: master checkbox, child checkboxes, and load‑selection button. Persist settings in chrome.storage.sync keyed by hostname. On page load, the content script reads the stored selectors, attaches a delegated click listener to the master selector using event delegation (document.addEventListener('click', e => { if (e.target.matches(masterSel)) { const checked = e.target.checked; document.querySelectorAll(childSel).forEach(cb => { if (cb.checked !== checked) { cb.checked = checked; cb.dispatchEvent(new Event('change', { bubbles: true })); } }); } })). For the load‑selection button, attach a click handler that reads a JSON blob from localStorage (or chrome.storage.local) keyed by page URL, parses an array of IDs, then iterates over child checkboxes, setting checked true where the checkbox’s value/id matches the stored list and dispatching change events. Use the open‑source library `css-what` to validate selector syntax before saving. The extension’s background service worker watches for tab URL changes to inject the content script only on matching hostnames. Provide an export button that bundles the current selector config into a downloadable userscript (plain JS with the same delegated listeners) for use with Greasemonkey/Tampermonkey.

The extension eliminates repetitive UI interaction, cutting manual click time to seconds and ensuring consistent state propagation across all checkboxes. By programmatically firing change events, downstream listeners (e.g., form validation, analytics) fire exactly as if a user acted, preventing hidden bugs. Persisted selector configs enable rapid onboarding of new pages, reducing onboarding friction for QA and front‑end developers while keeping compute overhead minimal—only a few DOM queries per interaction.