Problem
Modern web apps (Prolific, Salesforce, React) use Shadow DOM and Web Components. Our accessibility tree snapshot only scans the light DOM, missing elements hidden behind shadowRoot boundaries. This causes "hit-and-miss" failures.
Evidence
- Shadow DOM hides component internals from
document.querySelectorAll()
closed shadow roots require CDP or MAIN world injection
- Content scripts in ISOLATED world cannot pierce shadow boundaries natively
- Chrome MV3 requires
chrome.scripting.executeScript with world: 'MAIN' for full access
Solution (Implemented)
- injector.js: Added recursive
shadowRoot traversal in the tree walker:
if (child.shadowRoot) {
let shadowNodes = Array.from(child.shadowRoot.querySelectorAll('*'));
shadowNodes.forEach(child => walk(child, depth + 1));
}
- injector.js: Added
window._sinDeepQuery(selector) utility that pierces all shadow boundaries recursively
Files Changed
extension/content/injector.js — tree walker + _sinDeepQuery utility
Acceptance Criteria
Problem
Modern web apps (Prolific, Salesforce, React) use Shadow DOM and Web Components. Our accessibility tree snapshot only scans the light DOM, missing elements hidden behind
shadowRootboundaries. This causes "hit-and-miss" failures.Evidence
document.querySelectorAll()closedshadow roots require CDP or MAIN world injectionchrome.scripting.executeScriptwithworld: 'MAIN'for full accessSolution (Implemented)
shadowRoottraversal in the tree walker:window._sinDeepQuery(selector)utility that pierces all shadow boundaries recursivelyFiles Changed
extension/content/injector.js— tree walker +_sinDeepQueryutilityAcceptance Criteria
_sinDeepQueryfinds elements across shadow boundaries