Complete browser extension gRPC flow
This commit is contained in:
Joe Julian
+615
-26
@@ -1,3 +1,23 @@
|
||||
const ext = globalThis.browser ?? globalThis.chrome;
|
||||
const isNodeTestEnv = typeof module !== "undefined" && module.exports;
|
||||
const usePromiseAPI = typeof globalThis.browser !== "undefined";
|
||||
|
||||
function runtimeSend(message) {
|
||||
if (usePromiseAPI) {
|
||||
return ext.runtime.sendMessage(message);
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
ext.runtime.sendMessage(message, (response) => {
|
||||
const error = ext.runtime.lastError;
|
||||
if (error) {
|
||||
reject(new Error(error.message));
|
||||
return;
|
||||
}
|
||||
resolve(response);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isVisibleInput(input) {
|
||||
if (!(input instanceof HTMLInputElement)) {
|
||||
return false;
|
||||
@@ -12,6 +32,38 @@ function isVisibleInput(input) {
|
||||
return input.offsetParent !== null || style.position === "fixed";
|
||||
}
|
||||
|
||||
function normalizeRole(rawRole) {
|
||||
switch (String(rawRole || "").trim().toLowerCase()) {
|
||||
case "password":
|
||||
return "password";
|
||||
default:
|
||||
return "username";
|
||||
}
|
||||
}
|
||||
|
||||
function describeFieldRole(input) {
|
||||
const type = String(input?.getAttribute?.("type") || "").toLowerCase();
|
||||
if (type === "password") {
|
||||
return "password";
|
||||
}
|
||||
const autocomplete = String(input?.autocomplete || "").toLowerCase();
|
||||
if (autocomplete.includes("username") || autocomplete.includes("email")) {
|
||||
return "username";
|
||||
}
|
||||
return "username";
|
||||
}
|
||||
|
||||
function isUsernameCandidate(input) {
|
||||
if (!isVisibleInput(input)) {
|
||||
return false;
|
||||
}
|
||||
return describeFieldRole(input) === "username";
|
||||
}
|
||||
|
||||
function isPasswordCandidate(input) {
|
||||
return isVisibleInput(input) && describeFieldRole(input) === "password";
|
||||
}
|
||||
|
||||
function dispatchFillEvents(input) {
|
||||
if (typeof InputEvent === "function") {
|
||||
input.dispatchEvent(new InputEvent("input", { bubbles: true, data: input.value, inputType: "insertText" }));
|
||||
@@ -31,31 +83,145 @@ function setInputValue(input, value) {
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
function findPasswordInput() {
|
||||
return Array.from(document.querySelectorAll('input[type="password"]')).find(isVisibleInput) || null;
|
||||
function visibleInputs(scope) {
|
||||
return Array.from(scope.querySelectorAll("input")).filter(isVisibleInput);
|
||||
}
|
||||
|
||||
function findUsernameInput(passwordInput) {
|
||||
const form = passwordInput?.form || null;
|
||||
function resolveFormInputs(anchorInput) {
|
||||
if (anchorInput?.form instanceof HTMLFormElement) {
|
||||
return visibleInputs(anchorInput.form);
|
||||
}
|
||||
return visibleInputs(document);
|
||||
}
|
||||
|
||||
function firstVisiblePassword(scope) {
|
||||
return visibleInputs(scope).find(isPasswordCandidate) || null;
|
||||
}
|
||||
|
||||
function firstVisibleUsername(scope) {
|
||||
return visibleInputs(scope).find(isUsernameCandidate) || null;
|
||||
}
|
||||
|
||||
function associatedFieldsForAnchor(anchorInput) {
|
||||
const scopeInputs = resolveFormInputs(anchorInput);
|
||||
const passwordInput = scopeInputs.find(isPasswordCandidate) || firstVisiblePassword(document);
|
||||
const usernameInScope = scopeInputs.filter(isUsernameCandidate);
|
||||
let usernameInput = usernameInScope[0] || null;
|
||||
if (passwordInput && usernameInScope.length !== 0) {
|
||||
const priorSibling = usernameInScope.find((input) =>
|
||||
typeof input.compareDocumentPosition === "function" &&
|
||||
Boolean(input.compareDocumentPosition(passwordInput) & Node.DOCUMENT_POSITION_FOLLOWING)
|
||||
);
|
||||
usernameInput = priorSibling || usernameInScope[0] || null;
|
||||
}
|
||||
if (!usernameInput) {
|
||||
usernameInput = firstVisibleUsername(document);
|
||||
}
|
||||
return { usernameInput, passwordInput };
|
||||
}
|
||||
|
||||
function buildFieldDescriptor(input, role) {
|
||||
if (!(input instanceof HTMLInputElement)) {
|
||||
return null;
|
||||
}
|
||||
const normalizedRole = normalizeRole(role || describeFieldRole(input));
|
||||
const form = input.form instanceof HTMLFormElement ? input.form : null;
|
||||
const scope = form || document;
|
||||
const candidates = Array.from(scope.querySelectorAll('input[type="text"], input[type="email"], input:not([type]), input[autocomplete="username"], input[autocomplete="email"]'))
|
||||
.filter(isVisibleInput);
|
||||
if (passwordInput) {
|
||||
const sameForm = candidates.filter((input) => input.form === passwordInput.form);
|
||||
if (sameForm.length !== 0) {
|
||||
const priorSibling = sameForm.find((input) =>
|
||||
typeof input.compareDocumentPosition === "function" &&
|
||||
Boolean(input.compareDocumentPosition(passwordInput) & Node.DOCUMENT_POSITION_FOLLOWING)
|
||||
);
|
||||
return priorSibling || sameForm[0];
|
||||
const inputs = visibleInputs(scope);
|
||||
const fieldIndex = inputs.indexOf(input);
|
||||
const forms = Array.from(document.forms || []);
|
||||
return {
|
||||
role: normalizedRole,
|
||||
formIndex: form ? forms.indexOf(form) : -1,
|
||||
fieldIndex,
|
||||
id: String(input.id || ""),
|
||||
name: String(input.name || ""),
|
||||
autocomplete: String(input.autocomplete || "").toLowerCase()
|
||||
};
|
||||
}
|
||||
|
||||
function resolveFieldDescriptor(descriptor) {
|
||||
if (!descriptor || typeof descriptor !== "object") {
|
||||
return null;
|
||||
}
|
||||
const normalizedRole = normalizeRole(descriptor.role);
|
||||
const forms = Array.from(document.forms || []);
|
||||
const form = Number.isInteger(descriptor.formIndex) && descriptor.formIndex >= 0 ? forms[descriptor.formIndex] || null : null;
|
||||
const scope = form || document;
|
||||
const inputs = visibleInputs(scope);
|
||||
if (Number.isInteger(descriptor.fieldIndex) && descriptor.fieldIndex >= 0 && descriptor.fieldIndex < inputs.length) {
|
||||
const candidate = inputs[descriptor.fieldIndex];
|
||||
if (describeFieldRole(candidate) === normalizedRole) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
return candidates[0] || null;
|
||||
if (descriptor.id) {
|
||||
const byID = scope.querySelector(`#${CSS.escape(descriptor.id)}`);
|
||||
if (byID instanceof HTMLInputElement && isVisibleInput(byID) && describeFieldRole(byID) === normalizedRole) {
|
||||
return byID;
|
||||
}
|
||||
}
|
||||
if (descriptor.name) {
|
||||
const byName = visibleInputs(scope).find((input) => input.name === descriptor.name && describeFieldRole(input) === normalizedRole);
|
||||
if (byName) {
|
||||
return byName;
|
||||
}
|
||||
}
|
||||
if (normalizedRole === "password") {
|
||||
return firstVisiblePassword(scope) || firstVisiblePassword(document);
|
||||
}
|
||||
return firstVisibleUsername(scope) || firstVisibleUsername(document);
|
||||
}
|
||||
|
||||
function fillCredential(credential) {
|
||||
const passwordInput = findPasswordInput();
|
||||
const usernameInput = findUsernameInput(passwordInput);
|
||||
function chooseFillTargets(targetDescriptor) {
|
||||
const anchorInput = resolveFieldDescriptor(targetDescriptor) || (document.activeElement instanceof HTMLInputElement ? document.activeElement : null);
|
||||
const associated = associatedFieldsForAnchor(anchorInput);
|
||||
if (normalizeRole(targetDescriptor?.role) === "password" && anchorInput instanceof HTMLInputElement) {
|
||||
return {
|
||||
usernameInput: associated.usernameInput,
|
||||
passwordInput: isPasswordCandidate(anchorInput) ? anchorInput : associated.passwordInput,
|
||||
anchorInput
|
||||
};
|
||||
}
|
||||
if (normalizeRole(targetDescriptor?.role) === "username" && anchorInput instanceof HTMLInputElement) {
|
||||
return {
|
||||
usernameInput: isUsernameCandidate(anchorInput) ? anchorInput : associated.usernameInput,
|
||||
passwordInput: associated.passwordInput,
|
||||
anchorInput
|
||||
};
|
||||
}
|
||||
return {
|
||||
usernameInput: associated.usernameInput,
|
||||
passwordInput: associated.passwordInput,
|
||||
anchorInput: anchorInput || associated.passwordInput || associated.usernameInput || null
|
||||
};
|
||||
}
|
||||
|
||||
function scanLoginFields() {
|
||||
const activeElement = document.activeElement instanceof HTMLInputElement ? document.activeElement : null;
|
||||
const activeUsable = activeElement && isVisibleInput(activeElement) ? activeElement : null;
|
||||
const targets = chooseFillTargets(buildFieldDescriptor(activeUsable, describeFieldRole(activeUsable)));
|
||||
const anchorInput = activeUsable || targets.passwordInput || targets.usernameInput;
|
||||
const focusTarget = buildFieldDescriptor(anchorInput, describeFieldRole(anchorInput));
|
||||
const allVisible = visibleInputs(document);
|
||||
const roles = allVisible
|
||||
.filter((input) => isUsernameCandidate(input) || isPasswordCandidate(input))
|
||||
.map((input) => {
|
||||
const descriptor = buildFieldDescriptor(input, describeFieldRole(input));
|
||||
return `${descriptor.formIndex}:${descriptor.fieldIndex}:${descriptor.role}`;
|
||||
});
|
||||
return {
|
||||
pageHasLoginForm: Boolean(targets.usernameInput || targets.passwordInput),
|
||||
usernameInput: targets.usernameInput,
|
||||
passwordInput: targets.passwordInput,
|
||||
anchorInput,
|
||||
focusTarget,
|
||||
signature: roles.join("|")
|
||||
};
|
||||
}
|
||||
|
||||
function fillCredential(credential, targetDescriptor) {
|
||||
const { passwordInput, usernameInput } = chooseFillTargets(targetDescriptor);
|
||||
|
||||
if (usernameInput && credential.username) {
|
||||
usernameInput.focus();
|
||||
@@ -74,14 +240,437 @@ function fillCredential(credential) {
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
(globalThis.browser ?? globalThis.chrome).runtime.onMessage.addListener((message, _sender, sendResponse) => {
|
||||
if (message?.type !== "keepassgo-fill-credential") {
|
||||
function domainLabel(rawURL) {
|
||||
try {
|
||||
return new URL(rawURL).host || "";
|
||||
} catch (_error) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function inlineMatchSummary(match) {
|
||||
const parts = [];
|
||||
if (match.username) {
|
||||
parts.push(match.username);
|
||||
}
|
||||
if (match.url) {
|
||||
const host = domainLabel(match.url);
|
||||
if (host) {
|
||||
parts.push(host);
|
||||
}
|
||||
}
|
||||
if (Array.isArray(match.path) && match.path.length !== 0) {
|
||||
parts.push(match.path.join(" / "));
|
||||
}
|
||||
return parts.join(" · ") || "No username";
|
||||
}
|
||||
|
||||
function shouldShowInlineOverlay(state, hasTarget, suppressed) {
|
||||
if (suppressed || !hasTarget) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
sendResponse(fillCredential(message.credential || {}));
|
||||
} catch (error) {
|
||||
sendResponse({ ok: false, error: error instanceof Error ? error.message : String(error) });
|
||||
return Boolean(
|
||||
state?.pageHasLoginForm &&
|
||||
(
|
||||
state?.pendingFill ||
|
||||
(state?.configured && state?.success && !state?.status?.locked && Array.isArray(state?.matches) && state.matches.length > 0)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const contentTestExports = {
|
||||
normalizeRole,
|
||||
describeFieldRole,
|
||||
buildFieldDescriptor,
|
||||
resolveFieldDescriptor,
|
||||
chooseFillTargets,
|
||||
inlineMatchSummary,
|
||||
domainLabel,
|
||||
shouldShowInlineOverlay
|
||||
};
|
||||
|
||||
if (isNodeTestEnv) {
|
||||
module.exports = contentTestExports;
|
||||
} else {
|
||||
let pageState = {
|
||||
configured: true,
|
||||
success: true,
|
||||
matches: [],
|
||||
pageHasLoginForm: false,
|
||||
pendingFill: false,
|
||||
error: "",
|
||||
focusTarget: null
|
||||
};
|
||||
let chooserOpen = false;
|
||||
let inlineSuppressed = false;
|
||||
let refreshTimer = null;
|
||||
let lastReportedSignature = "";
|
||||
let lastReportedTarget = "";
|
||||
|
||||
const root = document.createElement("div");
|
||||
root.id = "keepassgo-inline-root";
|
||||
root.setAttribute("aria-live", "polite");
|
||||
const shadow = root.attachShadow({ mode: "open" });
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
all: initial;
|
||||
}
|
||||
.dock {
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
display: none;
|
||||
min-width: 220px;
|
||||
max-width: min(340px, calc(100vw - 24px));
|
||||
font: 13px/1.35 "Noto Sans", "Liberation Sans", sans-serif;
|
||||
color: #214f44;
|
||||
}
|
||||
.dock[data-open="true"] .panel {
|
||||
display: block;
|
||||
}
|
||||
.trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #c6d8cf;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #ffffff, #edf5f0);
|
||||
color: #214f44;
|
||||
box-shadow: 0 12px 26px rgba(33, 79, 68, 0.16);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trigger[data-tone="warning"] {
|
||||
border-color: #e4d0ae;
|
||||
background: linear-gradient(180deg, #fff8ed, #f9edd6);
|
||||
color: #7f4b09;
|
||||
}
|
||||
.trigger[data-tone="error"] {
|
||||
border-color: #e4bcbc;
|
||||
background: linear-gradient(180deg, #fff5f5, #f9e7e7);
|
||||
color: #8c2f2f;
|
||||
}
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.meta {
|
||||
color: #4d6d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.panel {
|
||||
display: none;
|
||||
margin-top: 8px;
|
||||
border: 1px solid #d7e3dc;
|
||||
border-radius: 16px;
|
||||
background: #fffdfa;
|
||||
box-shadow: 0 18px 42px rgba(33, 79, 68, 0.22);
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-header {
|
||||
padding: 12px 14px 10px;
|
||||
border-bottom: 1px solid #e6efea;
|
||||
background: linear-gradient(180deg, #f8fbf8, #f1f6f3);
|
||||
}
|
||||
.panel-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
.panel-copy {
|
||||
margin-top: 4px;
|
||||
color: #4d6d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.match-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
.match {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 0;
|
||||
border-top: 1px solid #eef4f0;
|
||||
background: #fffdfa;
|
||||
color: #214f44;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.match:hover,
|
||||
.match:focus-visible {
|
||||
background: #edf5f0;
|
||||
outline: none;
|
||||
}
|
||||
.match strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: #e7f1eb;
|
||||
color: #255f4a;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.subtle {
|
||||
color: #4d6d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.empty {
|
||||
padding: 12px 14px;
|
||||
color: #4d6d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<div class="dock" data-open="false">
|
||||
<button type="button" class="trigger" data-tone="ready">
|
||||
<span class="brand">KeePassGO</span>
|
||||
<span class="meta">Checking this form</span>
|
||||
</button>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">KeePassGO suggestions</div>
|
||||
<div class="panel-copy">Select a matching login for this field.</div>
|
||||
</div>
|
||||
<div class="match-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const dock = shadow.querySelector(".dock");
|
||||
const trigger = shadow.querySelector(".trigger");
|
||||
const meta = shadow.querySelector(".meta");
|
||||
const matchList = shadow.querySelector(".match-list");
|
||||
const panelCopy = shadow.querySelector(".panel-copy");
|
||||
|
||||
function ensureRootMounted() {
|
||||
if (!root.isConnected) {
|
||||
document.documentElement.appendChild(root);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
function currentTarget() {
|
||||
return chooseFillTargets(pageState.focusTarget).anchorInput;
|
||||
}
|
||||
|
||||
function hideDock() {
|
||||
chooserOpen = false;
|
||||
dock.style.display = "none";
|
||||
dock.dataset.open = "false";
|
||||
}
|
||||
|
||||
function positionDock() {
|
||||
const anchor = currentTarget();
|
||||
if (!anchor || dock.style.display === "none") {
|
||||
return;
|
||||
}
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
const width = Math.min(340, Math.max(220, rect.width));
|
||||
const left = Math.min(window.innerWidth - width - 12, Math.max(12, rect.left));
|
||||
const top = Math.min(window.innerHeight - 16, rect.bottom + 8);
|
||||
dock.style.left = `${left}px`;
|
||||
dock.style.top = `${top}px`;
|
||||
dock.style.width = `${width}px`;
|
||||
}
|
||||
|
||||
function renderMatches() {
|
||||
matchList.textContent = "";
|
||||
if (pageState.pendingFill) {
|
||||
const pending = document.createElement("div");
|
||||
pending.className = "empty";
|
||||
pending.textContent = pageState.pendingMessage || "Approve or deny the fill request in KeePassGO.";
|
||||
matchList.appendChild(pending);
|
||||
return;
|
||||
}
|
||||
if (!Array.isArray(pageState.matches) || pageState.matches.length === 0) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "empty";
|
||||
empty.textContent = pageState.error || "No matching entries were found for this page.";
|
||||
matchList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const match of pageState.matches) {
|
||||
const row = document.createElement("button");
|
||||
row.type = "button";
|
||||
row.className = "match";
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = match.title;
|
||||
const summary = document.createElement("span");
|
||||
summary.className = "subtle";
|
||||
summary.textContent = inlineMatchSummary(match);
|
||||
const quality = document.createElement("span");
|
||||
quality.className = "pill";
|
||||
quality.textContent = match.quality || "Candidate";
|
||||
row.appendChild(title);
|
||||
row.appendChild(summary);
|
||||
row.appendChild(quality);
|
||||
row.addEventListener("click", async () => {
|
||||
row.disabled = true;
|
||||
inlineSuppressed = true;
|
||||
hideDock();
|
||||
try {
|
||||
await runtimeSend({
|
||||
type: "keepassgo-fill-entry",
|
||||
entryId: match.id,
|
||||
target: pageState.focusTarget
|
||||
});
|
||||
} catch (_error) {
|
||||
pageState = {
|
||||
...pageState,
|
||||
pendingFill: false,
|
||||
error: "KeePassGO could not fill this page."
|
||||
};
|
||||
renderInlineState();
|
||||
} finally {
|
||||
row.disabled = false;
|
||||
}
|
||||
});
|
||||
matchList.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function renderInlineState() {
|
||||
const target = currentTarget();
|
||||
const shouldShow = shouldShowInlineOverlay(pageState, Boolean(target), inlineSuppressed);
|
||||
|
||||
if (!shouldShow) {
|
||||
hideDock();
|
||||
return;
|
||||
}
|
||||
|
||||
ensureRootMounted();
|
||||
dock.style.display = "block";
|
||||
trigger.dataset.tone = pageState.pendingFill ? "warning" : (pageState.error ? "error" : "ready");
|
||||
if (pageState.pendingFill) {
|
||||
meta.textContent = "Approval needed in KeePassGO";
|
||||
panelCopy.textContent = pageState.pendingMessage || "Approve or deny the fill request in KeePassGO.";
|
||||
} else {
|
||||
const count = Array.isArray(pageState.matches) ? pageState.matches.length : 0;
|
||||
meta.textContent = count === 1 ? "1 login ready" : `${count} logins ready`;
|
||||
panelCopy.textContent = "Select a matching login for this field.";
|
||||
}
|
||||
dock.dataset.open = chooserOpen ? "true" : "false";
|
||||
renderMatches();
|
||||
positionDock();
|
||||
}
|
||||
|
||||
function reportFieldState(force) {
|
||||
const scan = scanLoginFields();
|
||||
pageState = {
|
||||
...pageState,
|
||||
pageHasLoginForm: scan.pageHasLoginForm,
|
||||
focusTarget: scan.focusTarget
|
||||
};
|
||||
renderInlineState();
|
||||
const nextTarget = JSON.stringify(scan.focusTarget || null);
|
||||
if (!force && scan.signature === lastReportedSignature && nextTarget === lastReportedTarget) {
|
||||
return;
|
||||
}
|
||||
lastReportedSignature = scan.signature;
|
||||
lastReportedTarget = nextTarget;
|
||||
void runtimeSend({
|
||||
type: "keepassgo-page-ready",
|
||||
force: Boolean(force),
|
||||
pageHasLoginForm: scan.pageHasLoginForm,
|
||||
focusTarget: scan.focusTarget,
|
||||
signature: scan.signature
|
||||
}).then((response) => {
|
||||
if (response && typeof response === "object" && !("success" in response && response.success === false)) {
|
||||
pageState = {
|
||||
...pageState,
|
||||
...response,
|
||||
pageHasLoginForm: Boolean(response.pageHasLoginForm),
|
||||
focusTarget: response.focusTarget || pageState.focusTarget
|
||||
};
|
||||
renderInlineState();
|
||||
}
|
||||
}).catch(() => null);
|
||||
}
|
||||
|
||||
function scheduleRefresh(force) {
|
||||
if (refreshTimer !== null) {
|
||||
clearTimeout(refreshTimer);
|
||||
}
|
||||
refreshTimer = window.setTimeout(() => {
|
||||
refreshTimer = null;
|
||||
reportFieldState(force);
|
||||
}, force ? 0 : 120);
|
||||
}
|
||||
|
||||
trigger.addEventListener("click", () => {
|
||||
chooserOpen = !chooserOpen;
|
||||
renderInlineState();
|
||||
});
|
||||
|
||||
document.addEventListener("focusin", () => {
|
||||
scheduleRefresh(false);
|
||||
});
|
||||
|
||||
document.addEventListener("input", () => {
|
||||
scheduleRefresh(false);
|
||||
}, true);
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!root.contains(event.target)) {
|
||||
chooserOpen = false;
|
||||
renderInlineState();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
positionDock();
|
||||
}, true);
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
positionDock();
|
||||
});
|
||||
|
||||
const observer = new MutationObserver((records) => {
|
||||
if (records.some((record) => record.type === "childList")) {
|
||||
scheduleRefresh(false);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
ext.runtime.onMessage.addListener((message, _sender, sendResponse) => {
|
||||
if (message?.type === "keepassgo-fill-credential") {
|
||||
try {
|
||||
sendResponse(fillCredential(message.credential || {}, message.target || pageState.focusTarget));
|
||||
} catch (error) {
|
||||
sendResponse({ ok: false, error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if (message?.type === "keepassgo-page-state") {
|
||||
pageState = {
|
||||
...pageState,
|
||||
...(message.state || {})
|
||||
};
|
||||
renderInlineState();
|
||||
sendResponse({ ok: true });
|
||||
return false;
|
||||
}
|
||||
if (message?.type === "keepassgo-page-scan") {
|
||||
const scan = scanLoginFields();
|
||||
sendResponse({
|
||||
pageHasLoginForm: scan.pageHasLoginForm,
|
||||
focusTarget: scan.focusTarget,
|
||||
signature: scan.signature
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
reportFieldState(true);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user