feat: initial Silent Send browser extension
Chrome Manifest V3 extension that intercepts personal data and substitutes it with user-defined replacements before sending to Claude.ai. Hooks fetch() in the page's main world to catch API requests, with bidirectional substitution (real→fake on send, fake→real on display via reveal mode). Includes popup UI with mapping management, live test/diff view, activity log with badge count, options page with import/export, and Shadow DOM traversal for Claude.ai compatibility. https://claude.ai/code/session_01Dvgwe7XMoSxnWXkih8p1Cw
This commit is contained in:
Claude
@@ -0,0 +1,142 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
background: #f5f5f5;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
header { margin-bottom: 32px; }
|
||||
header h1 { font-size: 24px; font-weight: 600; }
|
||||
.subtitle { color: #6b7280; margin-top: 4px; }
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.section-desc { color: #6b7280; font-size: 13px; margin-bottom: 16px; }
|
||||
|
||||
/* Settings */
|
||||
.setting-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.setting-row label { font-weight: 500; }
|
||||
.setting-desc { font-size: 12px; color: #9ca3af; margin-top: 2px; }
|
||||
|
||||
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
|
||||
.toggle input { display: none; }
|
||||
.toggle-slider {
|
||||
position: absolute; inset: 0; background: #d1d5db;
|
||||
border-radius: 22px; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.toggle-slider::before {
|
||||
content: ''; position: absolute; width: 18px; height: 18px;
|
||||
left: 2px; bottom: 2px; background: #fff;
|
||||
border-radius: 50%; transition: 0.2s;
|
||||
}
|
||||
.toggle input:checked + .toggle-slider { background: #10b981; }
|
||||
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
|
||||
|
||||
.input-small {
|
||||
width: 80px; padding: 6px 8px; border: 1px solid #d1d5db;
|
||||
border-radius: 6px; font-size: 13px; text-align: center;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.mapping-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
|
||||
.mapping-table th {
|
||||
text-align: left; font-size: 11px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
color: #6b7280; padding: 8px 10px; border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.mapping-table td {
|
||||
padding: 8px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px;
|
||||
}
|
||||
.mapping-table tr:hover { background: #f9fafb; }
|
||||
.mapping-table .real { color: #dc2626; }
|
||||
.mapping-table .sub { color: #059669; font-weight: 500; }
|
||||
.mapping-table .cat {
|
||||
font-size: 11px; background: #f3f4f6; padding: 2px 6px;
|
||||
border-radius: 4px; text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Add row */
|
||||
.add-row {
|
||||
display: flex; gap: 8px; align-items: center;
|
||||
padding-top: 12px; border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1; padding: 7px 10px; border: 1px solid #d1d5db;
|
||||
border-radius: 6px; font-size: 13px; outline: none;
|
||||
}
|
||||
.input:focus { border-color: #111; }
|
||||
|
||||
.select {
|
||||
padding: 7px 8px; border: 1px solid #d1d5db;
|
||||
border-radius: 6px; font-size: 13px; background: #fff;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
font-size: 12px; color: #6b7280;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 6px;
|
||||
font-size: 12px; font-weight: 500; cursor: pointer;
|
||||
background: #fff; transition: all 0.15s;
|
||||
}
|
||||
.btn:hover { background: #f3f4f6; }
|
||||
.btn-primary { background: #111; color: #fff; border-color: #111; }
|
||||
.btn-primary:hover { background: #333; }
|
||||
.btn-danger { color: #dc2626; border-color: #fecaca; }
|
||||
.btn-danger:hover { background: #fef2f2; }
|
||||
|
||||
.btn-sm {
|
||||
padding: 4px 8px; font-size: 11px;
|
||||
}
|
||||
|
||||
.bulk-actions { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
|
||||
/* Log */
|
||||
.log-actions {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.log-list { max-height: 300px; overflow-y: auto; }
|
||||
.log-item {
|
||||
display: flex; gap: 12px; padding: 6px 0;
|
||||
border-bottom: 1px solid #f3f4f6; font-size: 13px;
|
||||
}
|
||||
.log-time { color: #9ca3af; font-size: 12px; white-space: nowrap; }
|
||||
.log-original { color: #dc2626; text-decoration: line-through; }
|
||||
.log-replaced { color: #059669; }
|
||||
|
||||
footer { text-align: center; padding: 16px 0; color: #9ca3af; font-size: 12px; }
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Silent Send - Options</title>
|
||||
<link rel="stylesheet" href="options.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Silent Send Options</h1>
|
||||
<p class="subtitle">Manage your privacy substitution mappings</p>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<h2>Settings</h2>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<label>Show inline highlights</label>
|
||||
<p class="setting-desc">Show a subtle underline on text that will be substituted</p>
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="showHighlights">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<label>Max log entries</label>
|
||||
<p class="setting-desc">Number of activity log entries to keep</p>
|
||||
</div>
|
||||
<input type="number" id="maxLogEntries" class="input-small" min="10" max="1000" value="200">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Mappings</h2>
|
||||
<p class="section-desc">Manage all your substitution rules. Longer matches take priority.</p>
|
||||
|
||||
<div class="bulk-actions">
|
||||
<button class="btn" id="btnExport">Export JSON</button>
|
||||
<button class="btn" id="btnImport">Import JSON</button>
|
||||
<input type="file" id="fileImport" accept=".json" hidden>
|
||||
<button class="btn btn-danger" id="btnClearAll">Clear All</button>
|
||||
</div>
|
||||
|
||||
<table class="mapping-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Real Value</th>
|
||||
<th>Substitute</th>
|
||||
<th>Category</th>
|
||||
<th>Case</th>
|
||||
<th>Enabled</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="mappingTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="add-row">
|
||||
<input type="text" id="newReal" placeholder="Real value" class="input">
|
||||
<input type="text" id="newSub" placeholder="Substitute" class="input">
|
||||
<select id="newCategory" class="select">
|
||||
<option value="name">Name</option>
|
||||
<option value="email">Email</option>
|
||||
<option value="phone">Phone</option>
|
||||
<option value="address">Address</option>
|
||||
<option value="ssn">SSN</option>
|
||||
<option value="dob">DOB</option>
|
||||
<option value="general">General</option>
|
||||
</select>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="newCaseSensitive">
|
||||
Aa
|
||||
</label>
|
||||
<button class="btn btn-primary" id="btnAddMapping">Add</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Activity Log</h2>
|
||||
<div class="log-actions">
|
||||
<span id="logCount">0 entries</span>
|
||||
<button class="btn btn-danger" id="btnClearLog">Clear Log</button>
|
||||
</div>
|
||||
<div class="log-list" id="logList"></div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Silent Send v0.1.0</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="options.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
import Storage from '../lib/storage.js';
|
||||
|
||||
let mappings = [];
|
||||
let settings = {};
|
||||
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
mappings = await Storage.getMappings();
|
||||
settings = await Storage.getSettings();
|
||||
|
||||
// Apply settings to UI
|
||||
$('#showHighlights').checked = settings.showHighlights || false;
|
||||
$('#maxLogEntries').value = settings.maxLogEntries || 200;
|
||||
|
||||
renderMappings();
|
||||
renderLog();
|
||||
|
||||
// Settings listeners
|
||||
$('#showHighlights').addEventListener('change', async (e) => {
|
||||
await Storage.saveSettings({ showHighlights: e.target.checked });
|
||||
});
|
||||
|
||||
$('#maxLogEntries').addEventListener('change', async (e) => {
|
||||
await Storage.saveSettings({ maxLogEntries: parseInt(e.target.value, 10) || 200 });
|
||||
});
|
||||
|
||||
// Add mapping
|
||||
$('#btnAddMapping').addEventListener('click', addMapping);
|
||||
$('#newSub').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') addMapping();
|
||||
});
|
||||
|
||||
// Export
|
||||
$('#btnExport').addEventListener('click', () => {
|
||||
const data = JSON.stringify(mappings, null, 2);
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'silent-send-mappings.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
// Import
|
||||
$('#btnImport').addEventListener('click', () => $('#fileImport').click());
|
||||
$('#fileImport').addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const imported = JSON.parse(text);
|
||||
if (!Array.isArray(imported)) throw new Error('Expected array');
|
||||
// Merge: add IDs if missing
|
||||
for (const item of imported) {
|
||||
if (!item.id) item.id = crypto.randomUUID();
|
||||
if (!item.createdAt) item.createdAt = Date.now();
|
||||
if (item.enabled === undefined) item.enabled = true;
|
||||
}
|
||||
mappings = [...mappings, ...imported];
|
||||
await Storage.saveMappings(mappings);
|
||||
renderMappings();
|
||||
} catch (err) {
|
||||
alert('Failed to import: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear all
|
||||
$('#btnClearAll').addEventListener('click', async () => {
|
||||
if (!confirm('Delete all mappings? This cannot be undone.')) return;
|
||||
mappings = [];
|
||||
await Storage.saveMappings([]);
|
||||
renderMappings();
|
||||
});
|
||||
|
||||
// Clear log
|
||||
$('#btnClearLog').addEventListener('click', async () => {
|
||||
await Storage.clearLog();
|
||||
renderLog();
|
||||
});
|
||||
});
|
||||
|
||||
async function addMapping() {
|
||||
const real = $('#newReal').value.trim();
|
||||
const sub = $('#newSub').value.trim();
|
||||
if (!real || !sub) return;
|
||||
|
||||
const mapping = await Storage.addMapping({
|
||||
real,
|
||||
substitute: sub,
|
||||
category: $('#newCategory').value,
|
||||
caseSensitive: $('#newCaseSensitive').checked,
|
||||
});
|
||||
|
||||
mappings.push(mapping);
|
||||
renderMappings();
|
||||
|
||||
$('#newReal').value = '';
|
||||
$('#newSub').value = '';
|
||||
$('#newCaseSensitive').checked = false;
|
||||
$('#newReal').focus();
|
||||
}
|
||||
|
||||
function renderMappings() {
|
||||
const tbody = $('#mappingTableBody');
|
||||
|
||||
if (mappings.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#9ca3af;padding:24px">No mappings configured</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = mappings
|
||||
.map(
|
||||
(m) => `
|
||||
<tr data-id="${m.id}">
|
||||
<td class="real">${escapeHtml(m.real)}</td>
|
||||
<td class="sub">${escapeHtml(m.substitute)}</td>
|
||||
<td><span class="cat">${m.category || 'general'}</span></td>
|
||||
<td>${m.caseSensitive ? 'Yes' : 'No'}</td>
|
||||
<td>
|
||||
<label class="toggle" style="width:32px;height:18px">
|
||||
<input type="checkbox" class="toggle-enabled" ${m.enabled ? 'checked' : ''}>
|
||||
<span class="toggle-slider" style="border-radius:18px"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td><button class="btn btn-sm btn-danger btn-delete">×</button></td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join('');
|
||||
|
||||
// Bind
|
||||
tbody.querySelectorAll('.btn-delete').forEach((btn) => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const id = btn.closest('tr').dataset.id;
|
||||
await Storage.deleteMapping(id);
|
||||
mappings = mappings.filter((m) => m.id !== id);
|
||||
renderMappings();
|
||||
});
|
||||
});
|
||||
|
||||
tbody.querySelectorAll('.toggle-enabled').forEach((cb) => {
|
||||
cb.addEventListener('change', async () => {
|
||||
const id = cb.closest('tr').dataset.id;
|
||||
await Storage.updateMapping(id, { enabled: cb.checked });
|
||||
const m = mappings.find((m) => m.id === id);
|
||||
if (m) m.enabled = cb.checked;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function renderLog() {
|
||||
const log = await Storage.getLog();
|
||||
$('#logCount').textContent = `${log.length} entries`;
|
||||
|
||||
const list = $('#logList');
|
||||
if (log.length === 0) {
|
||||
list.innerHTML = '<div style="text-align:center;color:#9ca3af;padding:24px">No activity logged</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = log
|
||||
.slice(0, 100)
|
||||
.map((entry) => {
|
||||
const time = new Date(entry.timestamp).toLocaleString();
|
||||
return `
|
||||
<div class="log-item">
|
||||
<span class="log-time">${time}</span>
|
||||
<span class="log-original">${escapeHtml(entry.original || '')}</span>
|
||||
<span>→</span>
|
||||
<span class="log-replaced">${escapeHtml(entry.replaced || '')}</span>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
Reference in New Issue
Block a user