joejulian/keepassgo
1
1
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 12 Wiki Activity

Add browser save and update workflow

Browse Source
This commit is contained in:
Joe Julian
2026-04-23 21:00:29 -07:00
parent 14c9bc72f6
commit f82ddf7435
11 changed files with 683 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/extension/background.js
+177
View File
@@ -191,6 +191,96 @@ function cloneTarget(target) {
return target && typeof target === "object" ? { ...target } : null;
}
function cloneSavePlan(plan) {
if (!plan || typeof plan !== "object") {
return null;
}
return {
mode: plan.mode === "update" ? "update" : "save",
entryId: typeof plan.entryId === "string" ? plan.entryId : "",
title: typeof plan.title === "string" ? plan.title : "",
path: Array.isArray(plan.path) ? [...plan.path] : [],
username: typeof plan.username === "string" ? plan.username : "",
password: typeof plan.password === "string" ? plan.password : "",
url: typeof plan.url === "string" ? plan.url : ""
};
}
function normalizeObservedCredential(observed) {
if (!observed || typeof observed !== "object") {
return null;
}
const password = typeof observed.password === "string" ? observed.password.trim() : "";
const url = typeof observed.url === "string" ? observed.url.trim() : "";
if (!password || !url) {
return null;
}
return {
title: typeof observed.title === "string" ? observed.title.trim() : "",
username: typeof observed.username === "string" ? observed.username.trim() : "",
password,
url
};
}
function matchHost(rawURL) {
if (typeof rawURL !== "string") {
return "";
}
const trimmed = rawURL.trim();
if (!trimmed) {
return "";
}
try {
return new URL(trimmed).hostname.toLowerCase();
} catch (_error) {
return trimmed.replace(/^https?:\/\//i, "").replace(/\/.*$/, "").toLowerCase();
}
}
function defaultObservedTitle(observed) {
if (observed?.title) {
return observed.title;
}
return matchHost(observed?.url) || "Browser Login";
}
function savePlanForObservedLogin(observed, matches) {
const normalized = normalizeObservedCredential(observed);
if (!normalized) {
return null;
}
const targetHost = matchHost(normalized.url);
const exact = Array.isArray(matches) ? matches.find((match) =>
typeof match?.id === "string" &&
String(match?.username || "").trim().toLowerCase() === normalized.username.toLowerCase() &&
matchHost(match?.url || "") === targetHost
) : null;
if (exact) {
return {
mode: "update",
entryId: exact.id,
title: exact.title || defaultObservedTitle(normalized),
path: Array.isArray(exact.path) ? [...exact.path] : [],
username: normalized.username,
password: normalized.password,
url: normalized.url
};
}
const fallbackPath = Array.isArray(matches) && matches.length > 0 && Array.isArray(matches[0]?.path)
? [...matches[0].path]
: [];
return {
mode: "save",
entryId: "",
title: defaultObservedTitle(normalized),
path: fallbackPath,
username: normalized.username,
password: normalized.password,
url: normalized.url
};
}
function normalizePageState(state) {
return {
tabId: Number.isInteger(state?.tabId) ? state.tabId : null,
@@ -207,6 +297,7 @@ function normalizePageState(state) {
pendingEntryId: typeof state?.pendingEntryId === "string" ? state.pendingEntryId : "",
pendingTarget: cloneTarget(state?.pendingTarget),
pendingMessage: typeof state?.pendingMessage === "string" ? state.pendingMessage : "",
pendingSave: cloneSavePlan(state?.pendingSave),
lastFilledEntryId: typeof state?.lastFilledEntryId === "string" ? state.lastFilledEntryId : "",
updatedAt: Number.isFinite(state?.updatedAt) ? state.updatedAt : 0
};
@@ -228,6 +319,7 @@ function defaultPageState(tabId, pageUrl) {
pendingEntryId: "",
pendingTarget: null,
pendingMessage: "",
pendingSave: null,
lastFilledEntryId: "",
updatedAt: 0
});
@@ -347,6 +439,12 @@ function actionPresentationForState(state) {
badgeText = "!";
color = "#9f5f0e";
title = approvalHintForState(state) || "KeePassGO approval needed for this page";
} else if (state.pendingSave) {
badgeText = "S";
color = "#255f4a";
title = state.pendingSave.mode === "update"
? `KeePassGO can update ${state.pendingSave.title || "this login"}`
: "KeePassGO can save the submitted login";
} else if (!state.configured) {
title = "Configure KeePassGO Browser in extension settings";
} else if (!state.success) {
@@ -663,12 +761,64 @@ async function refreshActivePage(options = {}) {
return refreshPageState(page.tabId, page.url, options);
}
async function saveObservedLogin(tabId, selectedMatch = null) {
if (!Number.isInteger(tabId)) {
throw new Error("No active tab is available.");
}
const tab = await tabsGet(tabId);
const pageUrl = typeof tab?.url === "string" ? tab.url : "";
let state = await getPageState(tabId, pageUrl);
const pendingSave = cloneSavePlan(state.pendingSave);
if (!pendingSave) {
throw new Error("There is no pending login to save.");
}
const request = {
action: "save-login",
title: pendingSave.title,
username: pendingSave.username,
password: pendingSave.password,
url: pendingSave.url
};
if (selectedMatch && typeof selectedMatch === "object") {
if (pendingSave.mode === "update" && typeof selectedMatch.id === "string" && selectedMatch.id.trim()) {
request.entryId = selectedMatch.id.trim();
request.title = String(selectedMatch.title || pendingSave.title || "").trim();
} else if (Array.isArray(selectedMatch.path) && selectedMatch.path.length > 0) {
request.path = [...selectedMatch.path];
}
} else if (pendingSave.mode === "update" && pendingSave.entryId) {
request.entryId = pendingSave.entryId;
} else if (pendingSave.path.length > 0) {
request.path = [...pendingSave.path];
}
const settings = await loadSettings();
if (!settings.bearerToken) {
throw new Error("API token is not configured.");
}
const response = await connectNative({
...request,
bearerToken: settings.bearerToken
});
if (!response?.success) {
throw new Error(response?.error || "KeePassGO did not save the submitted login.");
}
state = await setPageState(tabId, {
...state,
pendingSave: null,
error: "",
updatedAt: Date.now()
});
await refreshPageState(tabId, pageUrl, { force: true });
return { state };
}
const backgroundTestExports = {
normalizePageState,
actionPresentationForState,
shouldReuseMatches,
shouldContinueWatchingState,
tokenPendingApprovalCount,
savePlanForObservedLogin,
defaultSettings
};
@@ -723,6 +873,33 @@ if (isNodeTestEnv) {
});
return;
}
case "keepassgo-observed-login":
if (Number.isInteger(sender?.tab?.id)) {
const targetState = await getPageState(sender.tab.id, sender.tab.url || "");
const nextSave = savePlanForObservedLogin(message.observed, targetState.matches);
sendResponse(await setPageState(sender.tab.id, {
...targetState,
pendingSave: nextSave,
updatedAt: Date.now()
}));
return;
}
sendResponse({ success: false, error: "No active tab is available." });
return;
case "keepassgo-save-login": {
const targetTabID = Number.isInteger(message?.tabId)
? message.tabId
: (Number.isInteger(sender?.tab?.id) ? sender.tab.id : (await activePageContext()).tabId);
const selectedMatch = message?.selectedMatch && typeof message.selectedMatch === "object"
? {
id: String(message.selectedMatch.id || "").trim(),
title: String(message.selectedMatch.title || "").trim(),
path: Array.isArray(message.selectedMatch.path) ? message.selectedMatch.path : []
}
: null;
sendResponse({ success: true, ...(await saveObservedLogin(targetTabID, selectedMatch)) });
return;
}
case "keepassgo-page-ready":
if (Number.isInteger(sender?.tab?.id)) {
sendResponse(await refreshPageState(sender.tab.id, sender.tab.url, {
browser/extension/background.test.cjs
+59
View File
@@ -70,3 +70,62 @@ test("shouldContinueWatchingState keeps polling locked login pages", () => {
test("default settings include a blank bearer token that can be overridden by harness patching", () => {
assert.equal(background.defaultSettings.bearerToken, "");
});
test("savePlanForObservedLogin prefers updating an exact username match", () => {
const plan = background.savePlanForObservedLogin({
username: "dannyocean",
password: "bellagio-safe",
url: "https://vault.example.invalid/login"
}, [
{
id: "vault-console",
title: "Vault Console",
username: "dannyocean",
url: "vault.example.invalid",
path: ["Crew", "Internet"]
},
{
id: "bellagio-backup",
title: "Bellagio Backup",
username: "rustyryan",
url: "vault.example.invalid",
path: ["Crew", "Internet"]
}
]);
assert.deepEqual(plan, {
mode: "update",
entryId: "vault-console",
title: "Vault Console",
path: ["Crew", "Internet"],
username: "dannyocean",
password: "bellagio-safe",
url: "https://vault.example.invalid/login"
});
});
test("savePlanForObservedLogin falls back to saving into the current page group", () => {
const plan = background.savePlanForObservedLogin({
username: "linuscaldwell",
password: "yellow-chip",
url: "https://vault.example.invalid/login"
}, [
{
id: "vault-console",
title: "Vault Console",
username: "dannyocean",
url: "vault.example.invalid",
path: ["Crew", "Internet"]
}
]);
assert.deepEqual(plan, {
mode: "save",
entryId: "",
title: "vault.example.invalid",
path: ["Crew", "Internet"],
username: "linuscaldwell",
password: "yellow-chip",
url: "https://vault.example.invalid/login"
});
});
browser/extension/content.js
+35 -1
View File
@@ -396,6 +396,22 @@ function fillCredential(credential, targetDescriptor) {
return { ok: true };
}
function submittedCredential(candidate, rawURL) {
if (!candidate?.passwordInput) {
return null;
}
const password = String(candidate.passwordInput.value || "").trim();
if (!password) {
return null;
}
return {
title: domainLabel(rawURL),
username: String(candidate.usernameInput?.value || "").trim(),
password,
url: String(rawURL || "").trim()
};
}
function domainLabel(rawURL) {
try {
return new URL(rawURL).host || "";
@@ -447,7 +463,8 @@ const contentTestExports = {
fieldHintText,
scopeHintText,
hasAuthFlowSignals,
authFlowCandidate
authFlowCandidate,
submittedCredential
};
if (isNodeTestEnv) {
@@ -805,6 +822,23 @@ if (isNodeTestEnv) {
scheduleRefresh(false);
}, true);
document.addEventListener("submit", (event) => {
const form = event.target instanceof HTMLFormElement ? event.target : null;
if (!form) {
return;
}
const passwordInput = visibleInputs(form).find(isPasswordCandidate) || null;
const candidate = passwordInput ? authFlowCandidate(passwordInput) : null;
const observed = submittedCredential(candidate, window.location.href);
if (!observed) {
return;
}
void runtimeSend({
type: "keepassgo-observed-login",
observed
}).catch(() => null);
}, true);
document.addEventListener("click", (event) => {
if (!root.contains(event.target)) {
chooserOpen = false;
browser/extension/content.test.cjs
+14
View File
@@ -120,3 +120,17 @@ test("shouldShowInlineOverlay hides the page overlay after idle expiry", () => {
assert.equal(content.shouldShowInlineOverlay(state, true, false, false), true);
assert.equal(content.shouldShowInlineOverlay(state, true, false, true), false);
});
test("submittedCredential captures the pending browser save payload from a login candidate", () => {
const candidate = {
usernameInput: { value: "linuscaldwell" },
passwordInput: { value: "yellow-chip" }
};
assert.deepEqual(content.submittedCredential(candidate, "https://bellagio.example.invalid/login"), {
title: "bellagio.example.invalid",
username: "linuscaldwell",
password: "yellow-chip",
url: "https://bellagio.example.invalid/login"
});
});
browser/extension/popup.html
+7
View File
@@ -20,6 +20,13 @@
<p id="status-message" class="subtle">Checking KeePassGO.</p>
</section>
<p id="page-hint" class="inline-hint subtle">Loading page state.</p>
<section id="save-card" class="save-card" hidden>
<div>
<h2>Save Submitted Login</h2>
<p id="save-message" class="subtle">KeePassGO can save this login.</p>
</div>
<button id="save-action" type="button">Save Login</button>
</section>
<section>
<h2>Matches</h2>
<div id="matches" class="match-list"></div>
browser/extension/popup.js
+87 -11
View File
@@ -43,6 +43,12 @@ function matchSubtitle(match) {
return parts.join(" · ") || "No username";
}
function saveCardLabel(pendingSave) {
return pendingSave?.mode === "update"
? `Update ${pendingSave.title || "Login"}`
: "Save Login";
}
function renderMatchList(root, matches, options = {}) {
const targetTabID = popupTabID();
const emptyMessage = options.emptyMessage || "No matching entries.";
@@ -75,19 +81,23 @@ function renderMatchList(root, matches, options = {}) {
row.appendChild(quality);
row.addEventListener("click", async () => {
row.disabled = true;
setStatus("Approval may be required", "KeePassGO will prompt if this token needs approval before fill.", "warning");
try {
const result = await runtimeSend({
type: "keepassgo-fill-entry",
entryId: match.id,
tabId: targetTabID
});
if (!result?.success) {
throw new Error(result?.error || "Fill failed.");
if (typeof options.onSelect === "function") {
await options.onSelect(match, targetTabID);
} else {
setStatus("Approval may be required", "KeePassGO will prompt if this token needs approval before fill.", "warning");
const result = await runtimeSend({
type: "keepassgo-fill-entry",
entryId: match.id,
tabId: targetTabID
});
if (!result?.success) {
throw new Error(result?.error || "Fill failed.");
}
setStatus("Filled", `${match.title} was sent to the current page.`, "ready");
}
setStatus("Filled", `${match.title} was sent to the current page.`, "ready");
} catch (error) {
setStatus("Fill failed", error instanceof Error ? error.message : String(error), "error");
setStatus(options.onSelect ? "Save failed" : "Fill failed", error instanceof Error ? error.message : String(error), "error");
} finally {
row.disabled = false;
}
@@ -100,7 +110,30 @@ function renderMatches(state) {
const emptyMessage = state.pageHasLoginForm
? "No matching entries for this page."
: "No login fields detected on this page.";
renderMatchList(document.getElementById("matches"), state.matches, { emptyMessage });
const root = document.getElementById("matches");
if (state.pendingSave) {
renderMatchList(root, state.matches, {
emptyMessage,
onSelect: async (match, targetTabID) => {
const result = await runtimeSend({
type: "keepassgo-save-login",
tabId: targetTabID,
selectedMatch: {
id: match.id,
title: match.title,
path: Array.isArray(match.path) ? match.path : []
}
});
if (!result?.success) {
throw new Error(result?.error || "Save failed.");
}
setStatus("Saved", `${state.pendingSave.title || "Login"} is now in KeePassGO.`, "ready");
document.getElementById("save-card").hidden = true;
}
});
return;
}
renderMatchList(root, state.matches, { emptyMessage });
}
function renderSearchResults(results, query) {
@@ -135,6 +168,46 @@ function renderPageHint(state) {
hint.textContent = "Open a sign-in page to see KeePassGO suggestions here.";
}
function renderPendingSave(state) {
const card = document.getElementById("save-card");
const message = document.getElementById("save-message");
const action = document.getElementById("save-action");
const pendingSave = state.pendingSave;
if (!pendingSave) {
card.hidden = true;
action.onclick = null;
return;
}
card.hidden = false;
action.textContent = saveCardLabel(pendingSave);
if (pendingSave.mode === "update") {
message.textContent = `KeePassGO can update ${pendingSave.title || "this login"} with the submitted password.`;
} else if (Array.isArray(pendingSave.path) && pendingSave.path.length > 0) {
message.textContent = `KeePassGO can save this login in ${pendingSave.path.join(" / ")}. Search the vault to choose a different group if needed.`;
} else {
message.textContent = "Search the vault below to choose a group for this submitted login.";
}
action.disabled = pendingSave.mode !== "update" && (!Array.isArray(pendingSave.path) || pendingSave.path.length === 0);
action.onclick = async () => {
action.disabled = true;
try {
const result = await runtimeSend({
type: "keepassgo-save-login",
tabId: popupTabID()
});
if (!result?.success) {
throw new Error(result?.error || "Save failed.");
}
setStatus("Saved", `${pendingSave.title || "Login"} is now in KeePassGO.`, "ready");
card.hidden = true;
} catch (error) {
setStatus("Save failed", error instanceof Error ? error.message : String(error), "error");
} finally {
action.disabled = false;
}
};
}
function popupTabID() {
const rawValue = new URLSearchParams(window.location.search).get("tabId");
if (rawValue === null) {
@@ -183,6 +256,7 @@ async function main() {
});
document.getElementById("page-host").textContent = hostFromURL(state.pageUrl || "");
renderPageHint(state);
renderPendingSave(state);
if (!state.configured) {
setStatus("Configure access", state.error || "Set the API token in extension settings.", "warning");
@@ -208,6 +282,8 @@ async function main() {
const count = Array.isArray(state.matches) ? state.matches.length : 0;
if (!state.pageHasLoginForm) {
setStatus("Ready", "KeePassGO is connected. Open a login form to check for matches.", "ready");
} else if (state.pendingSave) {
setStatus("Save submitted login", state.pendingSave.mode === "update" ? `Update ${state.pendingSave.title || "this login"} or pick a different target below.` : "Save this submitted login or search below to choose a target entry.", "ready");
} else if (count === 0) {
setStatus("Checked this page", "KeePassGO did not find a matching login for this form.", "ready");
} else {
browser/extension/style.css
+12
View File
@@ -100,6 +100,18 @@ h2 {
margin-top: 16px;
}
.save-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin: 0 0 16px;
border: 1px solid #c5dccf;
border-radius: 12px;
background: var(--accent-soft);
}
.search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;