78ffeb4b8d
Login form detector using password field + username heuristics, native value setter fill for React/Vue compatibility, inline "id" icon injection with autofill candidate picker, and MutationObserver for SPA support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
/// Fill listener — receives credentials from the service worker and fills form fields.
|
|
///
|
|
/// Uses the native value setter trick to work with React/Vue controlled inputs
|
|
/// that override the value property.
|
|
|
|
/// Set up a listener for fill_credentials messages from the service worker.
|
|
export function setupFillListener(): void {
|
|
chrome.runtime.onMessage.addListener(
|
|
(message: { type: string; username: string; password: string }, _sender: chrome.runtime.MessageSender, sendResponse: (response: { ok: boolean }) => void) => {
|
|
if (message.type !== 'fill_credentials') return false;
|
|
fillFields(message.username, message.password);
|
|
sendResponse({ ok: true });
|
|
return false;
|
|
},
|
|
);
|
|
}
|
|
|
|
/// Fill username and password fields on the page.
|
|
///
|
|
/// Finds the first visible password field and its associated username field,
|
|
/// then sets their values using the native setter trick for React/Vue compat.
|
|
export function fillFields(username: string, password: string): void {
|
|
const pwField = document.querySelector<HTMLInputElement>('input[type="password"]');
|
|
if (!pwField) return;
|
|
|
|
// Set the password.
|
|
setNativeValue(pwField, password);
|
|
|
|
// Find the username field (same logic as detector).
|
|
if (username) {
|
|
const usernameField = findUsernameForFill(pwField);
|
|
if (usernameField) {
|
|
setNativeValue(usernameField, username);
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Use the native HTMLInputElement.value setter to bypass React/Vue wrappers.
|
|
/// Then dispatch input and change events so the framework picks up the change.
|
|
function setNativeValue(input: HTMLInputElement, value: string): void {
|
|
const nativeSetter = Object.getOwnPropertyDescriptor(
|
|
HTMLInputElement.prototype,
|
|
'value',
|
|
)?.set;
|
|
|
|
if (nativeSetter) {
|
|
nativeSetter.call(input, value);
|
|
} else {
|
|
input.value = value;
|
|
}
|
|
|
|
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
}
|
|
|
|
/// Find the username field associated with a password field (simplified version for fill).
|
|
function findUsernameForFill(pwField: HTMLInputElement): HTMLInputElement | null {
|
|
const form = pwField.closest('form');
|
|
const scope = form ?? document;
|
|
const inputs = scope.querySelectorAll<HTMLInputElement>('input');
|
|
|
|
// Priority: autocomplete > type=email > name pattern > preceding text input.
|
|
for (const input of inputs) {
|
|
if (input === pwField) continue;
|
|
if (input.autocomplete === 'username' || input.autocomplete === 'email') return input;
|
|
}
|
|
|
|
for (const input of inputs) {
|
|
if (input === pwField) continue;
|
|
if (input.type === 'email') return input;
|
|
}
|
|
|
|
const pattern = /user|email|login|account/i;
|
|
for (const input of inputs) {
|
|
if (input === pwField || input.type === 'hidden' || input.type === 'password') continue;
|
|
if (pattern.test(input.name) || pattern.test(input.id)) return input;
|
|
}
|
|
|
|
const allInputs = Array.from(inputs);
|
|
const pwIndex = allInputs.indexOf(pwField);
|
|
for (let i = pwIndex - 1; i >= 0; i--) {
|
|
const input = allInputs[i];
|
|
if (input.type === 'hidden' || input.type === 'password' || input.type === 'submit') continue;
|
|
if (input.offsetWidth > 0 && input.offsetHeight > 0) return input;
|
|
}
|
|
|
|
return null;
|
|
}
|