Design a Password Manager Extension – Frontend System Design

We’ll walk through the frontend system design for a password manager browser extension: a product that reads login forms on arbitrary sites, unlocks a vault, and fills a username and password without ever handing the wrapping key to the page. You’ll see why content scripts share a DOM and not a JavaScript heap, why autofill is a heuristic problem, why an iframe must use its own origin, and why crypto belongs on a chrome-extension:// page.

This is not “inject a script and set input.value.” The interviewer is asking you to put secrets next to hostile JavaScript and still be able to explain the boundary. A page can watch the DOM, spoof an unlock modal, and lie about its URL in a message body. The design is the set of rules that still work when that is true.

Problem Statement

Design the frontend for a password manager browser extension like 1Password, Bitwarden, or Chrome’s password manager.

Requirements:

• Detect login fields on web pages, including fields inside iframes and... premium content.