Site Lock

Contribution

What I built

1. 01Designed five block modes per site — password overlay, redirect, close tab, fake loader, and a browser-style error page picked from nine Chrome and Cloudflare templates.
2. 02Kept it zero-server: the master password exists only as a bcrypt hash, rules and that hash ride the profile's sync storage, and logs, sessions and settings never leave the device.
3. 03Chose two interception points: redirects are stopped before the page loads, every other mode at navigation commit, with the overlay mounted at document_start inside a closed shadow root the page cannot touch.
4. 04Added the safety valves: timed unlocks (5 / 30 / 60 minutes or today), an optional WebAuthn gate on changing the master password, and scheduled backups that work inside MV3's alarm + downloads constraints and exclude the hash.
5. 05Tested it like a product: 44 Vitest unit specs plus 28 Playwright end-to-end specs that launch a persistent Chrome with the unpacked build loaded.

Screens

How it works

How the data moves

The core paths through the system — a dot travels each hop, and the caption says what happens there.

From the code

A few lines that matter

import * as bcrypt from 'bcryptjs'

const ROUNDS = 10

export async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, ROUNDS)
}

export async function verifyPassword(password: string, hash: string): Promise<boolean> {
  return bcrypt.compare(password, hash)
}

chrome.webNavigation.onCommitted.addListener(async ({ tabId, url, frameId }) => {
  if (frameId !== 0) return
  if (!url.startsWith('http://') && !url.startsWith('https://')) return

  const hostname = new URL(url).hostname
  await deleteExpiredSessions()

  const rules = await getAllRules()
  // Skip redirect rules — handled by onBeforeNavigate
  const rule = rules.find(r => r.enabled && r.mode !== 'redirect' && matchesDomain(hostname, r.domain))
  if (!rule) return

  const session = await getActiveSession(rule.id)
  if (session) return

  await addLog({ ruleId: rule.id, domain: hostname, mode: rule.mode, event: 'blocked' })
  // …then lock the tab according to rule.mode

Decisions

Calls that shaped it