nngo/PassKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/19 Update extension: persistent session, duplication check - again

Browse Source
This commit is contained in:
nngo
2026-04-19 17:25:35 -04:00
parent e3d007b654
commit 66e0129994
5 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/background.js
+7
View File
@@ -65,6 +65,13 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
// No-op ping from popup — keeps the service worker alive while the browser
// is open so chrome.storage.session is not wiped between popup openings.
if (msg.type === 'KEEPALIVE') {
sendResponse({ ok: true });
return false;
}
// Popup signals vault cache was refreshed → re-check all tab badges.
if (msg.type === 'VAULT_UPDATED') {
refreshAllBadges();
extension/content/content.js
+72 -9
View File
@@ -227,9 +227,60 @@
injectAutofillButtons(matching);
}
// ── Duplicate detection ───────────────────────────────────────────────────────
/**
* Checks the cached vault to determine whether the submitted credentials are
* new or have been updated since last saved.
*
* Returns:
* 'new' — no item found for this site; definitely show the banner.
* 'updated' — item exists but username/password differs; show update banner.
* 'same' — credentials are identical to a stored item; suppress the banner.
*/
async function classifyCredentials(username, password) {
let vault_items;
try {
({ vault_items } = await chrome.storage.session.get('vault_items'));
} catch {
// If we can't read storage (e.g. extension context invalidated), show banner.
return 'new';
}
if (!vault_items?.length) return 'new';
const host = location.hostname.replace(/^www\./, '');
const siteItems = vault_items.filter(item => {
if (item.item_type !== 'password' || !item.plain?.url) return false;
try {
const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
} catch { return false; }
});
if (!siteItems.length) return 'new';
// Check for exact match (same username AND same password).
const exactMatch = siteItems.some(
item => item.plain?.username === username && item.plain?.password === password
);
if (exactMatch) return 'same';
// Credentials differ → treat as updated.
return 'updated';
}
// ── Auto-save banner ──────────────────────────────────────────────────────────
function showSaveBanner(username, password) {
/**
* Shows the save/update banner. The banner stays visible until the user
* explicitly clicks "Save" or "Not now" — there is NO auto-dismiss timeout.
*
* @param {string} username
* @param {string} password
* @param {'new'|'updated'} credentialState — controls the title copy.
*/
function showSaveBanner(username, password, credentialState) {
if (_bannerEl) _bannerEl.remove();
const banner = document.createElement('div');
@@ -251,13 +302,16 @@
minWidth: '240px',
});
const site = escHtml(location.hostname);
const user = escHtml(username);
const site = escHtml(location.hostname);
const user = escHtml(username);
const title = credentialState === 'updated'
? 'Update in PassKeeper?'
: 'Save to PassKeeper?';
banner.innerHTML = `
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="1.8"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" stroke-width="1.8" stroke-linecap="round"/></svg>
<strong style="flex:1;font-size:13px;color:#111827;">Save to PassKeeper?</strong>
<strong style="flex:1;font-size:13px;color:#111827;">${escHtml(title)}</strong>
<button id="__pk_close__" style="background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;line-height:1;padding:0;">×</button>
</div>
<p style="color:#6b7280;font-size:12px;margin-bottom:10px;">
@@ -271,24 +325,24 @@
document.body.appendChild(banner);
_bannerEl = banner;
// No setTimeout — banner stays until the user makes an explicit choice.
const dismiss = () => { if (_bannerEl === banner) { banner.remove(); _bannerEl = null; } };
banner.querySelector('#__pk_close__').addEventListener('click', dismiss);
banner.querySelector('#__pk_skip__').addEventListener('click', dismiss);
banner.querySelector('#__pk_save__').addEventListener('click', () => {
console.log('[PassKeeper] User chose to save credentials for', location.hostname);
chrome.runtime.sendMessage({
type: 'SAVE_CREDENTIALS',
data: { url: location.href, siteName: document.title || location.hostname, username, password },
}).catch(() => {});
dismiss();
});
setTimeout(dismiss, 20_000);
}
// ── Form submission watch ─────────────────────────────────────────────────────
function watchSubmissions() {
document.addEventListener('submit', e => {
document.addEventListener('submit', async e => {
const form = e.target;
const pwField = form.querySelector('input[type="password"]:not([disabled])');
if (!pwField?.value) return;
@@ -300,9 +354,18 @@
const username = userField?.value?.trim() || '';
const password = pwField.value;
if (username && password) {
setTimeout(() => showSaveBanner(username, password), 500);
if (!username || !password) return;
// Run duplicate check before showing the banner.
const credentialState = await classifyCredentials(username, password);
console.log('[PassKeeper] Credential state for', location.hostname, '→', credentialState);
if (credentialState === 'same') {
// Credentials unchanged — silently skip.
return;
}
setTimeout(() => showSaveBanner(username, password, credentialState), 500);
}, true);
}
extension/popup/popup.css
+2 -2
View File
@@ -243,10 +243,10 @@ body {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
padding: 8px 6px;
padding: 8px 4px;
background: none; border: none; cursor: pointer;
color: #9ca3af;
font-size: 10px; font-weight: 500;
font-size: 9px; font-weight: 500;
transition: color 0.15s;
}
.nav-btn:hover { color: #374151; }
extension/popup/popup.html
+18 -2
View File
@@ -126,12 +126,28 @@
</svg>
<span>Vault</span>
</button>
<button class="nav-btn" id="nav-account" title="Sign out">
<button class="nav-btn" id="nav-generator" title="Password Generator">
<svg viewBox="0 0 24 24" fill="none" width="20" height="20">
<path d="M12 2a5 5 0 015 5v1h1a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2v-9a2 2 0 012-2h1V7a5 5 0 015-5z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
<circle cx="12" cy="14" r="1.8" fill="currentColor"/>
<path d="M12 14v2.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
</svg>
<span>Generator</span>
</button>
<button class="nav-btn" id="nav-alerts" title="Security Alerts">
<svg viewBox="0 0 24 24" fill="none" width="20" height="20">
<path d="M12 3l8.5 15H3.5L12 3z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
<path d="M12 10v4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<circle cx="12" cy="17" r="0.8" fill="currentColor"/>
</svg>
<span>Alerts</span>
</button>
<button class="nav-btn" id="nav-account" title="Account">
<svg viewBox="0 0 24 24" fill="none" width="20" height="20">
<circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7"/>
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
</svg>
<span>Sign out</span>
<span>Account</span>
</button>
</nav>
extension/popup/popup.js
+12 -1
View File
@@ -11,8 +11,10 @@
* we refresh the access_token and show the unlock-only view (master password only).
*/
const API_BASE = 'https://pwkeeper.ngodanguyen.tech';
const API_BASE = 'https://pwkeeper.ngodanguyen.tech';
const VAULT_URL = 'https://pwkeeper.ngodanguyen.tech/vault';
const GEN_URL = 'https://pwkeeper.ngodanguyen.tech/vault#generator';
const ALERTS_URL = 'https://pwkeeper.ngodanguyen.tech/vault#security';
// ── State ─────────────────────────────────────────────────────────────────────
@@ -531,6 +533,15 @@ async function init() {
// Vault actions
$('btn-add-item').addEventListener('click', () => { chrome.tabs.create({ url: VAULT_URL }); });
$('nav-account').addEventListener('click', signOut);
$('nav-generator').addEventListener('click', () => { chrome.tabs.create({ url: GEN_URL }); });
$('nav-alerts').addEventListener('click', () => { chrome.tabs.create({ url: ALERTS_URL }); });
// Keep the service worker alive so chrome.storage.session survives while the
// browser is open. We ping it every 20 s; the ping itself is a no-op but
// prevents the SW from being killed between popup openings.
const _keepalive = setInterval(() => {
chrome.runtime.sendMessage({ type: 'KEEPALIVE' }).catch(() => {});
}, 20_000);
// Search
$('vault-search').addEventListener('input', () => renderList());