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:
徐枫
317
extension/src/popup/popup.css
Normal file
317
extension/src/popup/popup.css
Normal file
@@ -0,0 +1,317 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 340px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.view {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Login View */
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
padding: 24px 0 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.login-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.link {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #eff6ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 10px;
|
||||
color: #9ca3af;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-badge.connected {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-badge.connected .dot {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.status-badge.disconnected {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.status-badge.disconnected .dot {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-badge.error .dot {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.status-badge.connecting {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-badge.connecting .dot {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
/* Stats Row */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 12px 0;
|
||||
margin-bottom: 16px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Pairing Dialog */
|
||||
.dialog {
|
||||
background: #f9fafb;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pairing-code {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
letter-spacing: 8px;
|
||||
color: #3b82f6;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.pairing-input {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.dialog-hint {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
91
extension/src/popup/popup.html
Normal file
91
extension/src/popup/popup.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CookieBridge</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Not Logged In View -->
|
||||
<div id="view-login" class="view" style="display: none;">
|
||||
<div class="logo-section">
|
||||
<div class="logo">🍪</div>
|
||||
<h1>CookieBridge</h1>
|
||||
<p class="subtitle">Cross-device cookie sync</p>
|
||||
</div>
|
||||
<div class="login-section">
|
||||
<input type="text" id="device-name" placeholder="Device name (e.g. MacBook Pro)" />
|
||||
<button id="btn-register" class="btn btn-primary">Register Device</button>
|
||||
<a href="#" id="link-first-use" class="link">First time setup guide</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logged In View -->
|
||||
<div id="view-main" class="view" style="display: none;">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="user-info">
|
||||
<div class="avatar">🍪</div>
|
||||
<div class="user-details">
|
||||
<span id="display-name" class="name"></span>
|
||||
<span id="display-device-id" class="device-id"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="connection-status" class="status-badge disconnected">
|
||||
<span class="dot"></span>
|
||||
<span class="label">Disconnected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-row">
|
||||
<div class="stat">
|
||||
<span id="stat-cookies" class="stat-value">0</span>
|
||||
<span class="stat-label">Cookies</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span id="stat-devices" class="stat-value">0</span>
|
||||
<span class="stat-label">Devices</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span id="stat-syncs" class="stat-value">0</span>
|
||||
<span class="stat-label">Syncs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<button id="btn-sync-tab" class="btn btn-primary">Sync Current Site</button>
|
||||
<button id="btn-add-whitelist" class="btn btn-secondary">Add to Whitelist</button>
|
||||
<button id="btn-pair" class="btn btn-secondary">Pair Device</button>
|
||||
</div>
|
||||
|
||||
<!-- Pairing Dialog (hidden by default) -->
|
||||
<div id="pairing-dialog" class="dialog" style="display: none;">
|
||||
<div id="pairing-initiate" style="display: none;">
|
||||
<p class="dialog-title">Your Pairing Code</p>
|
||||
<div id="pairing-code" class="pairing-code"></div>
|
||||
<p class="dialog-hint">Enter this code on the other device within 5 minutes</p>
|
||||
</div>
|
||||
<div id="pairing-accept">
|
||||
<p class="dialog-title">Enter Pairing Code</p>
|
||||
<input type="text" id="input-pairing-code" placeholder="000000" maxlength="6" class="pairing-input" />
|
||||
<div class="dialog-actions">
|
||||
<button id="btn-pairing-accept" class="btn btn-primary btn-small">Pair</button>
|
||||
<button id="btn-pairing-generate" class="btn btn-secondary btn-small">Generate Code</button>
|
||||
<button id="btn-pairing-cancel" class="btn btn-ghost btn-small">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<a href="#" id="btn-settings" class="footer-link">Settings</a>
|
||||
<a href="https://github.com/Rc707Agency/cookiebridge" target="_blank" class="footer-link">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../dist/popup/popup.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
206
extension/src/popup/popup.ts
Normal file
206
extension/src/popup/popup.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* Popup script — controls the popup UI interactions.
|
||||
*/
|
||||
export {};
|
||||
|
||||
// --- Elements ---
|
||||
|
||||
const viewLogin = document.getElementById("view-login")!;
|
||||
const viewMain = document.getElementById("view-main")!;
|
||||
|
||||
// Login
|
||||
const inputDeviceName = document.getElementById("device-name") as HTMLInputElement;
|
||||
const btnRegister = document.getElementById("btn-register") as HTMLButtonElement;
|
||||
|
||||
// Main header
|
||||
const displayName = document.getElementById("display-name")!;
|
||||
const displayDeviceId = document.getElementById("display-device-id")!;
|
||||
const connectionStatus = document.getElementById("connection-status")!;
|
||||
|
||||
// Stats
|
||||
const statCookies = document.getElementById("stat-cookies")!;
|
||||
const statDevices = document.getElementById("stat-devices")!;
|
||||
const statSyncs = document.getElementById("stat-syncs")!;
|
||||
|
||||
// Actions
|
||||
const btnSyncTab = document.getElementById("btn-sync-tab") as HTMLButtonElement;
|
||||
const btnAddWhitelist = document.getElementById("btn-add-whitelist") as HTMLButtonElement;
|
||||
const btnPair = document.getElementById("btn-pair") as HTMLButtonElement;
|
||||
const btnSettings = document.getElementById("btn-settings")!;
|
||||
|
||||
// Pairing
|
||||
const pairingDialog = document.getElementById("pairing-dialog")!;
|
||||
const pairingInitiate = document.getElementById("pairing-initiate")!;
|
||||
const pairingAccept = document.getElementById("pairing-accept")!;
|
||||
const pairingCode = document.getElementById("pairing-code")!;
|
||||
const inputPairingCode = document.getElementById("input-pairing-code") as HTMLInputElement;
|
||||
const btnPairingAccept = document.getElementById("btn-pairing-accept") as HTMLButtonElement;
|
||||
const btnPairingGenerate = document.getElementById("btn-pairing-generate") as HTMLButtonElement;
|
||||
const btnPairingCancel = document.getElementById("btn-pairing-cancel") as HTMLButtonElement;
|
||||
|
||||
// --- 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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- UI Updates ---
|
||||
|
||||
function showView(loggedIn: boolean) {
|
||||
viewLogin.style.display = loggedIn ? "none" : "block";
|
||||
viewMain.style.display = loggedIn ? "block" : "none";
|
||||
}
|
||||
|
||||
function updateConnectionBadge(status: string) {
|
||||
connectionStatus.className = `status-badge ${status}`;
|
||||
const label = connectionStatus.querySelector(".label")!;
|
||||
const labels: Record<string, string> = {
|
||||
connected: "Connected",
|
||||
disconnected: "Disconnected",
|
||||
connecting: "Connecting...",
|
||||
error: "Error",
|
||||
};
|
||||
label.textContent = labels[status] || status;
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
try {
|
||||
const status = await sendMessage("GET_STATUS");
|
||||
showView(status.loggedIn);
|
||||
|
||||
if (status.loggedIn) {
|
||||
displayName.textContent = status.deviceName || "My Device";
|
||||
displayDeviceId.textContent = status.deviceId
|
||||
? status.deviceId.slice(0, 12) + "..."
|
||||
: "";
|
||||
updateConnectionBadge(status.connectionStatus);
|
||||
statCookies.textContent = String(status.cookieCount);
|
||||
statDevices.textContent = String(status.peerCount);
|
||||
statSyncs.textContent = String(status.syncCount);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to get status:", err);
|
||||
showView(false);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
btnRegister.addEventListener("click", async () => {
|
||||
const name = inputDeviceName.value.trim();
|
||||
if (!name) {
|
||||
inputDeviceName.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
btnRegister.disabled = true;
|
||||
btnRegister.textContent = "Registering...";
|
||||
|
||||
try {
|
||||
await sendMessage("REGISTER_DEVICE", { name });
|
||||
await refreshStatus();
|
||||
} catch (err) {
|
||||
console.error("Registration failed:", err);
|
||||
btnRegister.textContent = "Registration Failed";
|
||||
setTimeout(() => {
|
||||
btnRegister.textContent = "Register Device";
|
||||
btnRegister.disabled = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
btnSyncTab.addEventListener("click", async () => {
|
||||
btnSyncTab.disabled = true;
|
||||
btnSyncTab.textContent = "Syncing...";
|
||||
try {
|
||||
await sendMessage("SYNC_CURRENT_TAB");
|
||||
btnSyncTab.textContent = "Synced!";
|
||||
setTimeout(() => {
|
||||
btnSyncTab.textContent = "Sync Current Site";
|
||||
btnSyncTab.disabled = false;
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error("Sync failed:", err);
|
||||
btnSyncTab.textContent = "Sync Failed";
|
||||
setTimeout(() => {
|
||||
btnSyncTab.textContent = "Sync Current Site";
|
||||
btnSyncTab.disabled = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
btnAddWhitelist.addEventListener("click", async () => {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
if (!tab?.url) return;
|
||||
|
||||
try {
|
||||
const url = new URL(tab.url);
|
||||
await sendMessage("ADD_WHITELIST", { domain: url.hostname });
|
||||
btnAddWhitelist.textContent = "Added!";
|
||||
setTimeout(() => {
|
||||
btnAddWhitelist.textContent = "Add to Whitelist";
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error("Failed to add whitelist:", err);
|
||||
}
|
||||
});
|
||||
|
||||
// Pairing
|
||||
btnPair.addEventListener("click", () => {
|
||||
pairingDialog.style.display = "block";
|
||||
pairingInitiate.style.display = "none";
|
||||
pairingAccept.style.display = "block";
|
||||
inputPairingCode.value = "";
|
||||
inputPairingCode.focus();
|
||||
});
|
||||
|
||||
btnPairingGenerate.addEventListener("click", async () => {
|
||||
try {
|
||||
const result = await sendMessage("INITIATE_PAIRING");
|
||||
pairingAccept.style.display = "none";
|
||||
pairingInitiate.style.display = "block";
|
||||
pairingCode.textContent = result.pairingCode;
|
||||
} catch (err) {
|
||||
console.error("Failed to generate pairing code:", err);
|
||||
}
|
||||
});
|
||||
|
||||
btnPairingAccept.addEventListener("click", async () => {
|
||||
const code = inputPairingCode.value.trim();
|
||||
if (code.length !== 6) return;
|
||||
|
||||
btnPairingAccept.disabled = true;
|
||||
try {
|
||||
await sendMessage("ACCEPT_PAIRING", { code });
|
||||
pairingDialog.style.display = "none";
|
||||
await refreshStatus();
|
||||
} catch (err) {
|
||||
console.error("Pairing failed:", err);
|
||||
btnPairingAccept.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
btnPairingCancel.addEventListener("click", () => {
|
||||
pairingDialog.style.display = "none";
|
||||
});
|
||||
|
||||
btnSettings.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
chrome.runtime.openOptionsPage();
|
||||
});
|
||||
|
||||
// --- Init ---
|
||||
|
||||
refreshStatus();
|
||||
Reference in New Issue
Block a user