feat: implement M2 Chrome browser extension
Build the CookieBridge Chrome extension (Manifest V3) with: - Background service worker: cookie monitoring via chrome.cookies.onChanged, WebSocket connection to relay server with auto-reconnect, HTTP polling fallback, device registration and pairing flow - Browser-compatible crypto: libsodium-wrappers-sumo for XChaCha20-Poly1305 encryption, Ed25519 signing, X25519 key exchange (mirrors server's sodium-native API) - Popup UI: device registration, connection status indicator (gray/blue/ green/red), cookie/device/sync stats, one-click current site sync, whitelist quick-add, device pairing with 6-digit code - Options page: server URL config, connection mode (auto/WS/polling), poll interval slider, auto-sync toggle, domain whitelist/blacklist management, paired device list, key export/import, data clearing - Sync engine: LWW conflict resolution with Lamport clocks (same as server), bidirectional cookie sync with all paired peers, echo suppression to prevent sync loops - Badge management: icon color reflects state (gray=not logged in, blue=connected, green=syncing with count, red=error) - Build system: esbuild bundling for Chrome 120+, TypeScript with strict mode, clean type checking Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
徐枫
305
extension/src/options/options.css
Normal file
305
extension/src/options/options.css
Normal file
@@ -0,0 +1,305 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
background: #f9fafb;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
/* Fields */
|
||||
.field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field .value {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.field .value.mono {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field input[type="text"],
|
||||
.field select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.field input[type="text"]:focus,
|
||||
.field select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.field-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Range */
|
||||
.range-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.range-group input[type="range"] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-group span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
.toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #d1d5db;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.toggle-label input:checked + .toggle {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.toggle-label input:checked + .toggle::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag .remove {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #93c5fd;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.tag .remove:hover {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.add-tag {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-tag input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-tag input:focus {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Peer List */
|
||||
.peer-list {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.peer-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.peer-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.peer-info .peer-name {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.peer-info .peer-id {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.peer-info .peer-date {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Save Bar */
|
||||
.save-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
font-size: 13px;
|
||||
color: #059669;
|
||||
}
|
||||
114
extension/src/options/options.html
Normal file
114
extension/src/options/options.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CookieBridge Settings</title>
|
||||
<link rel="stylesheet" href="options.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>CookieBridge Settings</h1>
|
||||
</header>
|
||||
|
||||
<!-- Account Section -->
|
||||
<section class="section">
|
||||
<h2>Account</h2>
|
||||
<div class="field">
|
||||
<label>Device Name</label>
|
||||
<span id="opt-device-name" class="value">—</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Device ID</label>
|
||||
<span id="opt-device-id" class="value mono">—</span>
|
||||
</div>
|
||||
<div class="field-actions">
|
||||
<button id="btn-logout" class="btn btn-danger">Log Out</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Connection Section -->
|
||||
<section class="section">
|
||||
<h2>Connection</h2>
|
||||
<div class="field">
|
||||
<label for="opt-server-url">Server URL</label>
|
||||
<input type="text" id="opt-server-url" placeholder="http://localhost:3000" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="opt-connection-mode">Connection Mode</label>
|
||||
<select id="opt-connection-mode">
|
||||
<option value="auto">Auto (WebSocket preferred)</option>
|
||||
<option value="websocket">WebSocket Only</option>
|
||||
<option value="polling">HTTP Polling</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field" id="field-poll-interval">
|
||||
<label for="opt-poll-interval">Poll Interval</label>
|
||||
<div class="range-group">
|
||||
<input type="range" id="opt-poll-interval" min="1" max="60" value="5" />
|
||||
<span id="opt-poll-interval-label">5s</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sync Section -->
|
||||
<section class="section">
|
||||
<h2>Sync</h2>
|
||||
<div class="field">
|
||||
<label class="toggle-label">
|
||||
<span>Auto-sync cookies</span>
|
||||
<input type="checkbox" id="opt-auto-sync" />
|
||||
<span class="toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Whitelist (sync only these domains)</label>
|
||||
<div class="tag-list" id="whitelist-tags"></div>
|
||||
<div class="add-tag">
|
||||
<input type="text" id="whitelist-input" placeholder="example.com" />
|
||||
<button id="btn-add-whitelist" class="btn btn-small btn-secondary">Add</button>
|
||||
</div>
|
||||
<p class="field-hint">Leave empty to sync all domains (except blacklisted)</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Blacklist (never sync these domains)</label>
|
||||
<div class="tag-list" id="blacklist-tags"></div>
|
||||
<div class="add-tag">
|
||||
<input type="text" id="blacklist-input" placeholder="*.bank.com" />
|
||||
<button id="btn-add-blacklist" class="btn btn-small btn-secondary">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Paired Devices Section -->
|
||||
<section class="section">
|
||||
<h2>Paired Devices</h2>
|
||||
<div id="peer-list" class="peer-list">
|
||||
<p class="empty-state">No paired devices yet</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security Section -->
|
||||
<section class="section">
|
||||
<h2>Security</h2>
|
||||
<div class="field-actions">
|
||||
<button id="btn-export-keys" class="btn btn-secondary">Export Keys</button>
|
||||
<button id="btn-import-keys" class="btn btn-secondary">Import Keys</button>
|
||||
<input type="file" id="file-import-keys" accept=".json" style="display: none" />
|
||||
</div>
|
||||
<div class="field-actions" style="margin-top: 12px;">
|
||||
<button id="btn-clear-data" class="btn btn-danger">Clear All Local Data</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Save -->
|
||||
<div class="save-bar">
|
||||
<button id="btn-save" class="btn btn-primary">Save Settings</button>
|
||||
<span id="save-status" class="save-status"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../dist/options/options.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
257
extension/src/options/options.ts
Normal file
257
extension/src/options/options.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Options page script — manages extension settings.
|
||||
*/
|
||||
export {};
|
||||
|
||||
// --- Messaging helper ---
|
||||
|
||||
function sendMessage(type: string, payload?: unknown): Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
chrome.runtime.sendMessage({ type, payload }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
reject(new Error(chrome.runtime.lastError.message));
|
||||
return;
|
||||
}
|
||||
if (response?.error) {
|
||||
reject(new Error(response.error));
|
||||
return;
|
||||
}
|
||||
resolve(response);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Elements ---
|
||||
|
||||
const optDeviceName = document.getElementById("opt-device-name")!;
|
||||
const optDeviceId = document.getElementById("opt-device-id")!;
|
||||
const btnLogout = document.getElementById("btn-logout") as HTMLButtonElement;
|
||||
|
||||
const optServerUrl = document.getElementById("opt-server-url") as HTMLInputElement;
|
||||
const optConnectionMode = document.getElementById("opt-connection-mode") as HTMLSelectElement;
|
||||
const optPollInterval = document.getElementById("opt-poll-interval") as HTMLInputElement;
|
||||
const optPollIntervalLabel = document.getElementById("opt-poll-interval-label")!;
|
||||
const fieldPollInterval = document.getElementById("field-poll-interval")!;
|
||||
|
||||
const optAutoSync = document.getElementById("opt-auto-sync") as HTMLInputElement;
|
||||
const whitelistTags = document.getElementById("whitelist-tags")!;
|
||||
const whitelistInput = document.getElementById("whitelist-input") as HTMLInputElement;
|
||||
const btnAddWhitelist = document.getElementById("btn-add-whitelist") as HTMLButtonElement;
|
||||
const blacklistTags = document.getElementById("blacklist-tags")!;
|
||||
const blacklistInput = document.getElementById("blacklist-input") as HTMLInputElement;
|
||||
const btnAddBlacklist = document.getElementById("btn-add-blacklist") as HTMLButtonElement;
|
||||
|
||||
const peerList = document.getElementById("peer-list")!;
|
||||
|
||||
const btnExportKeys = document.getElementById("btn-export-keys") as HTMLButtonElement;
|
||||
const btnImportKeys = document.getElementById("btn-import-keys") as HTMLButtonElement;
|
||||
const fileImportKeys = document.getElementById("file-import-keys") as HTMLInputElement;
|
||||
const btnClearData = document.getElementById("btn-clear-data") as HTMLButtonElement;
|
||||
|
||||
const btnSave = document.getElementById("btn-save") as HTMLButtonElement;
|
||||
const saveStatus = document.getElementById("save-status")!;
|
||||
|
||||
// --- State ---
|
||||
|
||||
let whitelist: string[] = [];
|
||||
let blacklist: string[] = [];
|
||||
|
||||
// --- Load Settings ---
|
||||
|
||||
async function loadSettings() {
|
||||
const state = await chrome.storage.local.get(null);
|
||||
|
||||
optDeviceName.textContent = state.deviceName || "—";
|
||||
optDeviceId.textContent = state.deviceId || "—";
|
||||
|
||||
optServerUrl.value = state.serverUrl || "http://localhost:3000";
|
||||
optConnectionMode.value = state.connectionMode || "auto";
|
||||
optPollInterval.value = String(state.pollIntervalSec || 5);
|
||||
optPollIntervalLabel.textContent = `${state.pollIntervalSec || 5}s`;
|
||||
updatePollVisibility();
|
||||
|
||||
optAutoSync.checked = state.autoSync !== false;
|
||||
|
||||
whitelist = state.whitelist || [];
|
||||
blacklist = state.blacklist || [
|
||||
"*.bank.*",
|
||||
"*.paypal.com",
|
||||
"*.stripe.com",
|
||||
"accounts.google.com",
|
||||
"login.microsoftonline.com",
|
||||
];
|
||||
|
||||
renderTags(whitelistTags, whitelist, "whitelist");
|
||||
renderTags(blacklistTags, blacklist, "blacklist");
|
||||
renderPeers(state.peers || []);
|
||||
}
|
||||
|
||||
function renderTags(container: HTMLElement, items: string[], listName: string) {
|
||||
container.innerHTML = "";
|
||||
for (const item of items) {
|
||||
const tag = document.createElement("span");
|
||||
tag.className = "tag";
|
||||
tag.innerHTML = `${item}<span class="remove" data-list="${listName}" data-value="${item}">×</span>`;
|
||||
container.appendChild(tag);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPeers(peers: Array<{ deviceId: string; name: string; platform: string; pairedAt: string }>) {
|
||||
if (peers.length === 0) {
|
||||
peerList.innerHTML = '<p class="empty-state">No paired devices yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
peerList.innerHTML = "";
|
||||
for (const peer of peers) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "peer-item";
|
||||
item.innerHTML = `
|
||||
<div class="peer-info">
|
||||
<div class="peer-name">${peer.name} (${peer.platform})</div>
|
||||
<div class="peer-id">${peer.deviceId.slice(0, 16)}...</div>
|
||||
<div class="peer-date">Paired: ${new Date(peer.pairedAt).toLocaleDateString()}</div>
|
||||
</div>
|
||||
`;
|
||||
peerList.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePollVisibility() {
|
||||
fieldPollInterval.style.display =
|
||||
optConnectionMode.value === "polling" ? "block" : "none";
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
optConnectionMode.addEventListener("change", updatePollVisibility);
|
||||
|
||||
optPollInterval.addEventListener("input", () => {
|
||||
optPollIntervalLabel.textContent = `${optPollInterval.value}s`;
|
||||
});
|
||||
|
||||
// Tag removal (event delegation)
|
||||
document.addEventListener("click", (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.classList.contains("remove")) return;
|
||||
|
||||
const listName = target.dataset.list;
|
||||
const value = target.dataset.value;
|
||||
if (!listName || !value) return;
|
||||
|
||||
if (listName === "whitelist") {
|
||||
whitelist = whitelist.filter((d) => d !== value);
|
||||
renderTags(whitelistTags, whitelist, "whitelist");
|
||||
} else {
|
||||
blacklist = blacklist.filter((d) => d !== value);
|
||||
renderTags(blacklistTags, blacklist, "blacklist");
|
||||
}
|
||||
});
|
||||
|
||||
btnAddWhitelist.addEventListener("click", () => {
|
||||
const domain = whitelistInput.value.trim();
|
||||
if (domain && !whitelist.includes(domain)) {
|
||||
whitelist.push(domain);
|
||||
renderTags(whitelistTags, whitelist, "whitelist");
|
||||
whitelistInput.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
btnAddBlacklist.addEventListener("click", () => {
|
||||
const domain = blacklistInput.value.trim();
|
||||
if (domain && !blacklist.includes(domain)) {
|
||||
blacklist.push(domain);
|
||||
renderTags(blacklistTags, blacklist, "blacklist");
|
||||
blacklistInput.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
// Save
|
||||
btnSave.addEventListener("click", async () => {
|
||||
await chrome.storage.local.set({
|
||||
serverUrl: optServerUrl.value.trim(),
|
||||
connectionMode: optConnectionMode.value,
|
||||
pollIntervalSec: parseInt(optPollInterval.value),
|
||||
autoSync: optAutoSync.checked,
|
||||
whitelist,
|
||||
blacklist,
|
||||
});
|
||||
|
||||
// Reconnect with new settings
|
||||
await sendMessage("RECONNECT");
|
||||
|
||||
saveStatus.textContent = "Saved!";
|
||||
setTimeout(() => {
|
||||
saveStatus.textContent = "";
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Logout
|
||||
btnLogout.addEventListener("click", async () => {
|
||||
if (!confirm("Are you sure you want to log out? This will remove your device identity.")) {
|
||||
return;
|
||||
}
|
||||
await sendMessage("LOGOUT");
|
||||
window.close();
|
||||
});
|
||||
|
||||
// Export keys
|
||||
btnExportKeys.addEventListener("click", async () => {
|
||||
const result = await sendMessage("EXPORT_KEYS");
|
||||
if (!result?.keys) {
|
||||
alert("No keys to export");
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([JSON.stringify(result.keys, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "cookiebridge-keys.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
// Import keys
|
||||
btnImportKeys.addEventListener("click", () => {
|
||||
fileImportKeys.click();
|
||||
});
|
||||
|
||||
fileImportKeys.addEventListener("change", async () => {
|
||||
const file = fileImportKeys.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const keys = JSON.parse(text);
|
||||
if (!keys.signPub || !keys.signSec || !keys.encPub || !keys.encSec) {
|
||||
throw new Error("Invalid key file");
|
||||
}
|
||||
await sendMessage("IMPORT_KEYS", keys);
|
||||
alert("Keys imported successfully. The extension will reconnect.");
|
||||
await loadSettings();
|
||||
} catch (err) {
|
||||
alert(`Failed to import keys: ${(err as Error).message}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear data
|
||||
btnClearData.addEventListener("click", async () => {
|
||||
if (
|
||||
!confirm(
|
||||
"This will delete ALL local data including your encryption keys. Are you sure?",
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
await sendMessage("LOGOUT");
|
||||
await chrome.storage.local.clear();
|
||||
alert("All data cleared.");
|
||||
window.close();
|
||||
});
|
||||
|
||||
// --- Init ---
|
||||
|
||||
loadSettings();
|
||||
Reference in New Issue
Block a user