Skip to content

Fill fields inside shadow roots #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raxod502 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fill fields inside shadow roots #397

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2839d96
Fill fields inside shadow roots
raxod502 Jan 17, 2026
4293ce2
Fix logic error
raxod502 Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 70 additions & 52 deletions src/inject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,20 @@
return result;
}

/**
* Get list of shadow DOM roots, recursively.
*
* @since 3.12.0
*
* @param DOMElement parent Parent element to query
* @return array List of shadow root elements
*/
function queryShadowRoots(parent) {
return [...parent.querySelectorAll("*")]
.filter((e) => e.shadowRoot)
Copy link
Copy Markdown
Member

@max-baz max-baz Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When parent is document (in the very first call), won't this .filter() line remove it from the result array, resulting in a change of behavior?

Copy link
Copy Markdown
Contributor Author

@raxod502 raxod502 Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, sorry. Revised, and now tested with both a shadow-root and non-shadow-root login page.

.flatMap((e) => [e.shadowRoot, ...queryShadowRoots(e.shadowRoot)]);
}

/**
* Query all visible elements
*
Expand All @@ -282,60 +296,64 @@
*/
function queryAllVisible(parent, field, form) {
const result = [];
for (let i = 0; i < field.selectors.length; i++) {
let elems = parent.querySelectorAll(field.selectors[i]);
for (let j = 0; j < elems.length; j++) {
let elem = elems[j];
// Select only elements from specified form
if (form && form != elem.form) {
continue;
}
// Ignore disabled fields
if (elem.disabled) {
continue;
}
// Elem or its parent has a style 'display: none',
// or it is just too narrow to be a real field (a trap for spammers?).
if (elem.offsetWidth < 30 || elem.offsetHeight < 10) {
continue;
}
// We may have a whitelist of acceptable field types. If so, skip elements of a different type.
if (field.types && field.types.indexOf(elem.type.toLowerCase()) < 0) {
continue;
}
// Elem takes space on the screen, but it or its parent is hidden with a visibility style.
let style = window.getComputedStyle(elem);
if (style.visibility == "hidden") {
continue;
}
// Elem is outside of the boundaries of the visible viewport.
let rect = elem.getBoundingClientRect();
if (
rect.x + rect.width < 0 ||
rect.y + rect.height < 0 ||
rect.x > window.innerWidth ||
rect.y > window.innerHeight
) {
continue;
}
// Elem is hidden by its or or its parent's opacity rules
const OPACITY_LIMIT = 0.1;
let opacity = 1;
for (
let testElem = elem;
opacity >= OPACITY_LIMIT && testElem && testElem.nodeType === Node.ELEMENT_NODE;
testElem = testElem.parentNode
) {
let style = window.getComputedStyle(testElem);
if (style.opacity) {
opacity *= parseFloat(style.opacity);
for (let root of [parent, ...queryShadowRoots(parent)]) {
for (let i = 0; i < field.selectors.length; i++) {
let elems = root.querySelectorAll(field.selectors[i]);
for (let j = 0; j < elems.length; j++) {
let elem = elems[j];
// Select only elements from specified form
if (form && form != elem.form) {
continue;
}
// Ignore disabled fields
if (elem.disabled) {
continue;
}
// Elem or its parent has a style 'display: none',
// or it is just too narrow to be a real field (a trap for spammers?).
if (elem.offsetWidth < 30 || elem.offsetHeight < 10) {
continue;
}
// We may have a whitelist of acceptable field types. If so, skip elements of a different type.
if (field.types && field.types.indexOf(elem.type.toLowerCase()) < 0) {
continue;
}
// Elem takes space on the screen, but it or its parent is hidden with a visibility style.
let style = window.getComputedStyle(elem);
if (style.visibility == "hidden") {
continue;
}
// Elem is outside of the boundaries of the visible viewport.
let rect = elem.getBoundingClientRect();
if (
rect.x + rect.width < 0 ||
rect.y + rect.height < 0 ||
rect.x > window.innerWidth ||
rect.y > window.innerHeight
) {
continue;
}
// Elem is hidden by its or or its parent's opacity rules
const OPACITY_LIMIT = 0.1;
let opacity = 1;
for (
let testElem = elem;
opacity >= OPACITY_LIMIT &&
testElem &&
testElem.nodeType === Node.ELEMENT_NODE;
testElem = testElem.parentNode
) {
let style = window.getComputedStyle(testElem);
if (style.opacity) {
opacity *= parseFloat(style.opacity);
}
}
if (opacity < OPACITY_LIMIT) {
continue;
}
// This element is visible, will use it.
result.push(elem);
}
if (opacity < OPACITY_LIMIT) {
continue;
}
// This element is visible, will use it.
result.push(elem);
}
}
return result;
Expand Down