alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext): apply color scheme on popup + vault startup

Browse Source 
Import applyColorScheme in popup.ts and vault.ts, await it at boot,
and register a chrome.storage.onChanged listener so live color-picker
changes take effect without a reload.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-05-02 18:55:28 -04:00
parent 6bca0b3526
commit b928ed407b
2 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
extension/src/popup/popup.ts
View File

@@ -19,6 +19,7 @@ import { renderFieldHistory } from './components/field-history';
import { teardown as teardownTrash } from './components/trash'; import { teardown as teardownTrash } from './components/trash';
import { teardown as teardownDevices } from './components/devices'; import { teardown as teardownDevices } from './components/devices';
import { teardown as teardownFieldHistory } from './components/field-history'; import { teardown as teardownFieldHistory } from './components/field-history';
import { applyColorScheme } from '../shared/color-scheme';
// --- Escape HTML to prevent XSS --- // --- Escape HTML to prevent XSS ---
export function escapeHtml(str: string): string { export function escapeHtml(str: string): string {
@@ -215,6 +216,14 @@ function render(): void {
// --- Init --- // --- Init ---
async function init(): Promise<void> { async function init(): Promise<void> {
await applyColorScheme();
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'sync' && 'password_display_scheme' in changes) {
void applyColorScheme();
}
});
// Snapshot the active tab at popup-open — the fill path uses this // Snapshot the active tab at popup-open — the fill path uses this
// tabId/url pair so the SW can verify the tab hasn't navigated before // tabId/url pair so the SW can verify the tab hasn't navigated before
// forwarding credentials (audit M5 + TOCTOU close via expectedHost). // forwarding credentials (audit M5 + TOCTOU close via expectedHost).

9
extension/src/vault/vault.ts
View File

@@ -20,6 +20,7 @@ import { renderVaultSettings as renderVaultSettingsView } from '../popup/compone
import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history'; import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history';
import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel'; import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel';
import { renderImportPanel, teardown as teardownImport } from './components/import-panel'; import { renderImportPanel, teardown as teardownImport } from './components/import-panel';
import { applyColorScheme } from '../shared/color-scheme';
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Helpers // Helpers
@@ -608,6 +609,14 @@ async function loadManifest(): Promise<void> {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
await applyColorScheme();
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'sync' && 'password_display_scheme' in changes) {
void applyColorScheme();
}
});
// Delegated handler for .error-cta buttons — set up once on the stable root. // Delegated handler for .error-cta buttons — set up once on the stable root.
const app = document.getElementById('vault-app')!; const app = document.getElementById('vault-app')!;
app.addEventListener('click', (e) => { app.addEventListener('click', (e) => {