Add ShieldAI browser extension with phishing & spam detection (FRE-4576)
- Extension package: Manifest V3, background service worker, content scripts - Phishing detection engine with heuristic analysis (typosquatting, entropy, TLD, brand impersonation) - Local URL caching layer (Storage API) for <100ms cached lookups - Popup UI with protection status, stats, and phishing report button - Options page for settings management (blocked/allowed domains, feature toggles) - Server-side extension routes: URL check, phishing report, auth, stats, exposure check - Tier-aware feature gating (Basic/Plus/Premium) - 25 passing tests for phishing detection heuristics - Declarative net request rules for known phishing patterns - DarkWatch integration for credential exposure checks - Firefox compatibility layer via build modes Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
271
packages/extension/src/popup/popup.html
Normal file
271
packages/extension/src/popup/popup.html
Normal file
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ShieldAI Protection</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 360px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
background: #f9fafb;
|
||||
}
|
||||
.header {
|
||||
background: linear-gradient(135deg, #1e40af, #3b82f6);
|
||||
color: white;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header h1 { font-size: 16px; font-weight: 600; }
|
||||
.shield-icon { font-size: 24px; }
|
||||
.status-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.status-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-row:last-child { margin-bottom: 0; }
|
||||
.status-label { color: #6b7280; font-size: 13px; }
|
||||
.status-value { font-weight: 600; }
|
||||
.status-value.safe { color: #22c55e; }
|
||||
.status-value.warning { color: #f59e0b; }
|
||||
.status-value.danger { color: #ef4444; }
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #d1d5db;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.toggle.active { background: #3b82f6; }
|
||||
.toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.toggle.active::after { transform: translateX(20px); }
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.stat-card {
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-number { font-size: 24px; font-weight: 700; color: #1e40af; }
|
||||
.stat-label { font-size: 11px; color: #6b7280; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.features-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.feature-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.feature-item:last-child { border-bottom: none; }
|
||||
.feature-name { font-size: 13px; }
|
||||
.tier-badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tier-badge.basic { background: #e0e7ff; color: #4338ca; }
|
||||
.tier-badge.plus { background: #fef3c7; color: #92400e; }
|
||||
.tier-badge.premium { background: #dcfce7; color: #166534; }
|
||||
.tier-badge.locked { background: #f3f4f6; color: #9ca3af; }
|
||||
.actions-section {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn:hover { opacity: 0.9; }
|
||||
.btn-primary { background: #3b82f6; color: white; }
|
||||
.btn-secondary { background: #f3f4f6; color: #374151; }
|
||||
.btn-danger { background: #ef4444; color: white; }
|
||||
.report-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.last-threat {
|
||||
padding: 12px 16px;
|
||||
background: #fef2f2;
|
||||
border-radius: 8px;
|
||||
margin: 0 16px 16px;
|
||||
font-size: 12px;
|
||||
color: #991b1b;
|
||||
}
|
||||
.last-threat strong { display: block; margin-bottom: 4px; }
|
||||
.blocked-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.blocked-overlay h2 { font-size: 28px; color: #ef4444; margin-bottom: 8px; }
|
||||
.blocked-overlay p { color: #6b7280; margin-bottom: 24px; }
|
||||
.blocked-url {
|
||||
background: #f3f4f6;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
margin-bottom: 24px;
|
||||
max-width: 90%;
|
||||
word-break: break-all;
|
||||
}
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="blocked-view" class="blocked-overlay hidden">
|
||||
<span class="shield-icon" style="font-size: 48px;">🛡️</span>
|
||||
<h2>Page Blocked</h2>
|
||||
<p>ShieldAI detected a potential threat</p>
|
||||
<div class="blocked-url" id="blocked-url"></div>
|
||||
<div style="display: flex; gap: 12px;">
|
||||
<button class="btn btn-primary" id="continue-btn">Continue Anyway</button>
|
||||
<button class="btn btn-secondary" id="back-btn">Go Back</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="popup-view">
|
||||
<div class="header">
|
||||
<span class="shield-icon">🛡️</span>
|
||||
<div>
|
||||
<h1>ShieldAI</h1>
|
||||
<div style="font-size: 11px; opacity: 0.8;">Phishing & Spam Protection</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-section">
|
||||
<div class="status-row">
|
||||
<span class="status-label">Protection</span>
|
||||
<div class="toggle-container">
|
||||
<span id="status-text" class="status-value safe">Active</span>
|
||||
<div class="toggle active" id="protection-toggle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-label">Account</span>
|
||||
<span id="account-status" class="status-value">Guest</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-label">Tier</span>
|
||||
<span id="tier-badge" class="tier-badge basic">Basic</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="threats-count">0</div>
|
||||
<div class="stat-label">Threats Blocked</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="urls-count">0</div>
|
||||
<div class="stat-label">URLs Checked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="last-threat" class="last-threat hidden">
|
||||
<strong>⚠️ Last Threat</strong>
|
||||
<span id="threat-description"></span>
|
||||
</div>
|
||||
|
||||
<div class="features-section">
|
||||
<div class="section-title">Active Features</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-name">URL Analysis</span>
|
||||
<span class="tier-badge basic">Active</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-name">Spam Detection</span>
|
||||
<span class="tier-badge basic">Active</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-name">Active Blocking</span>
|
||||
<span id="blocking-badge" class="tier-badge locked">Plus+</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-name">DarkWatch Integration</span>
|
||||
<span id="darkwatch-badge" class="tier-badge locked">Plus+</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-name">Real-time Scanning</span>
|
||||
<span id="realtime-badge" class="tier-badge locked">Premium</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions-section">
|
||||
<button class="btn btn-danger report-btn" id="report-btn">
|
||||
<span>⚡</span> Report Phishing
|
||||
</button>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="btn btn-secondary" style="flex: 1;" id="options-btn">Options</button>
|
||||
<button class="btn btn-secondary" style="flex: 1;" id="login-btn">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
122
packages/extension/src/popup/popup.ts
Normal file
122
packages/extension/src/popup/popup.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { BackgroundMessage, MessageType, PopupData } from '../types';
|
||||
|
||||
const popupView = document.getElementById('popup-view') as HTMLElement;
|
||||
const blockedView = document.getElementById('blocked-view') as HTMLElement;
|
||||
|
||||
const protectionToggle = document.getElementById('protection-toggle') as HTMLElement;
|
||||
const statusText = document.getElementById('status-text') as HTMLElement;
|
||||
const accountStatus = document.getElementById('account-status') as HTMLElement;
|
||||
const tierBadge = document.getElementById('tier-badge') as HTMLElement;
|
||||
const threatsCount = document.getElementById('threats-count') as HTMLElement;
|
||||
const urlsCount = document.getElementById('urls-count') as HTMLElement;
|
||||
const lastThreat = document.getElementById('last-threat') as HTMLElement;
|
||||
const threatDescription = document.getElementById('threat-description') as HTMLElement;
|
||||
const blockingBadge = document.getElementById('blocking-badge') as HTMLElement;
|
||||
const darkwatchBadge = document.getElementById('darkwatch-badge') as HTMLElement;
|
||||
const realtimeBadge = document.getElementById('realtime-badge') as HTMLElement;
|
||||
|
||||
const reportBtn = document.getElementById('report-btn') as HTMLButtonElement;
|
||||
const optionsBtn = document.getElementById('options-btn') as HTMLButtonElement;
|
||||
const loginBtn = document.getElementById('login-btn') as HTMLButtonElement;
|
||||
const continueBtn = document.getElementById('continue-btn') as HTMLButtonElement;
|
||||
const backBtn = document.getElementById('back-btn') as HTMLButtonElement;
|
||||
|
||||
checkBlockedUrl();
|
||||
loadPopupData();
|
||||
|
||||
function checkBlockedUrl(): void {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const blockedUrl = params.get('blocked');
|
||||
if (blockedUrl) {
|
||||
popupView.classList.add('hidden');
|
||||
blockedView.classList.remove('hidden');
|
||||
document.getElementById('blocked-url')!.textContent = blockedUrl;
|
||||
|
||||
continueBtn.onclick = () => {
|
||||
chrome.tabs.update({ url: blockedUrl });
|
||||
};
|
||||
backBtn.onclick = () => {
|
||||
chrome.tabs.goBack();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function loadPopupData(): void {
|
||||
chrome.runtime.sendMessage({ type: MessageType.GET_POPUP_DATA }, (response) => {
|
||||
const data = response as PopupData;
|
||||
updateUI(data);
|
||||
});
|
||||
}
|
||||
|
||||
function updateUI(data: PopupData): void {
|
||||
statusText.textContent = data.protectionEnabled ? 'Active' : 'Paused';
|
||||
statusText.className = `status-value ${data.protectionEnabled ? 'safe' : 'warning'}`;
|
||||
protectionToggle.className = `toggle ${data.protectionEnabled ? 'active' : ''}`;
|
||||
|
||||
accountStatus.textContent = data.isLoggedIn ? 'Connected' : 'Guest';
|
||||
accountStatus.className = `status-value ${data.isLoggedIn ? 'safe' : ''}`;
|
||||
|
||||
const tier = data.tier || 'basic';
|
||||
tierBadge.textContent = tier.charAt(0).toUpperCase() + tier.slice(1);
|
||||
tierBadge.className = `tier-badge ${tier}`;
|
||||
|
||||
threatsCount.textContent = data.threatsBlockedToday.toLocaleString();
|
||||
urlsCount.textContent = data.urlsCheckedToday.toLocaleString();
|
||||
|
||||
if (data.lastThreat) {
|
||||
lastThreat.classList.remove('hidden');
|
||||
threatDescription.textContent = data.lastThreat.description;
|
||||
}
|
||||
|
||||
if (data.tier === 'plus' || data.tier === 'premium') {
|
||||
blockingBadge.textContent = 'Active';
|
||||
blockingBadge.className = 'tier-badge plus';
|
||||
}
|
||||
|
||||
if (data.tier === 'premium') {
|
||||
darkwatchBadge.textContent = 'Active';
|
||||
darkwatchBadge.className = 'tier-badge plus';
|
||||
realtimeBadge.textContent = 'Active';
|
||||
realtimeBadge.className = 'tier-badge premium';
|
||||
}
|
||||
}
|
||||
|
||||
protectionToggle.addEventListener('click', () => {
|
||||
chrome.runtime.sendMessage({ type: MessageType.TOGGLE_PROTECTION }, (response) => {
|
||||
const enabled = (response as { enabled: boolean }).enabled;
|
||||
protectionToggle.className = `toggle ${enabled ? 'active' : ''}`;
|
||||
statusText.textContent = enabled ? 'Active' : 'Paused';
|
||||
statusText.className = `status-value ${enabled ? 'safe' : 'warning'}`;
|
||||
});
|
||||
});
|
||||
|
||||
reportBtn.addEventListener('click', async () => {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
if (!tab?.url) return;
|
||||
|
||||
const title = tab.title || 'Unknown Page';
|
||||
const success = await chrome.runtime.sendMessage({
|
||||
type: MessageType.REPORT_PHISHING,
|
||||
payload: {
|
||||
url: tab.url,
|
||||
pageTitle: title,
|
||||
tabId: tab.id,
|
||||
timestamp: Date.now(),
|
||||
reason: 'Manual report from popup',
|
||||
heuristics: {},
|
||||
},
|
||||
});
|
||||
|
||||
reportBtn.textContent = (success as { success: boolean })?.success
|
||||
? '✓ Reported'
|
||||
: '⚡ Report Phishing';
|
||||
setTimeout(() => { reportBtn.innerHTML = '<span>⚡</span> Report Phishing'; }, 2000);
|
||||
});
|
||||
|
||||
optionsBtn.addEventListener('click', () => {
|
||||
chrome.tabs.create({ url: chrome.runtime.getURL('options.html') });
|
||||
});
|
||||
|
||||
loginBtn.addEventListener('click', () => {
|
||||
chrome.tabs.create({ url: 'https://app.shieldai.com/auth/login?extension=true' });
|
||||
});
|
||||
Reference in New Issue
Block a user