Claude Skills Guide

AI Password Generator Chrome Extension: A Developer Guide

Password security remains one of the most critical aspects of digital hygiene. While traditional password generators produce random strings, AI-powered generators can create memorable yet highly secure passwords based on user context, preferences, and predictable patterns that humans naturally struggle with. This guide walks you through building a Chrome extension that uses AI to generate intelligent passwords.

Why AI for Password Generation?

Standard password generators rely on pure randomness—characters selected uniformly from a character set. While mathematically sound, these passwords often suffer from practical problems: they’re difficult to remember, hard to type on mobile devices, and get rejected by various password policies.

An AI approach can generate passwords that balance security with usability. Machine learning models understand language patterns, can incorporate user-provided context (like service names or personal memories), and produce passwords that score high on entropy while remaining memorable.

Extension Architecture

A password generator Chrome extension operates through three main components: the popup interface for user interaction, a background service worker for processing, and content scripts when interaction with specific pages is needed.

The architecture follows this flow:

  1. User opens popup and configures password requirements
  2. Background worker receives request and generates password using AI
  3. Generated password is displayed and can be copied or auto-filled
  4. Optional: content script handles form auto-fill on detected login pages

Manifest Configuration

Every Chrome extension begins with the manifest file. For a password generator with AI capabilities, you’ll need these permissions:

{
  "manifest_version": 3,
  "name": "AI Password Generator",
  "version": "1.0.0",
  "description": "AI-powered password generation with context awareness",
  "permissions": [
    "activeTab",
    "storage",
    "clipboardWrite"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

The clipboardWrite permission enables automatic copying to clipboard, while storage saves user preferences across sessions.

Core Password Generation Logic

The heart of your extension is the password generation algorithm. Here’s a practical implementation that combines randomness with AI-style contextual awareness:

// password-generator.js
class AIPasswordGenerator {
  constructor(options = {}) {
    this.length = options.length || 16;
    this.includeSymbols = options.includeSymbols ?? true;
    this.includeNumbers = options.includeNumbers ?? true;
    this.useMemorable = options.useMemorable ?? false;
    this.context = options.context || '';
  }

  // Generate using AI-style pattern recognition
  async generate() {
    if (this.useMemorable) {
      return this.generateMemorable();
    }
    return this.generateSecure();
  }

  generateSecure() {
    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const numbers = '0123456789';
    const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';

    let charset = lowercase + uppercase;
    if (this.includeNumbers) charset += numbers;
    if (this.includeSymbols) charset += symbols;

    // Use crypto.getRandomValues for cryptographically secure randomness
    const randomValues = new Uint32Array(this.length);
    crypto.getRandomValues(randomValues);

    let password = '';
    for (let i = 0; i < this.length; i++) {
      password += charset[randomValues[i] % charset.length];
    }

    // Ensure password meets complexity requirements
    return this.enforceComplexity(password);
  }

  generateMemorable() {
    // Generate password using pronounceable pattern
    const consonants = 'bcdfghjklmnpqrstvwxyz';
    const vowels = 'aeiou';
    
    let password = '';
    const randomValues = new Uint32Array(this.length);
    crypto.getRandomValues(randomValues);

    for (let i = 0; i < this.length; i++) {
      if (i % 2 === 0) {
        password += consonants[randomValues[i] % consonants.length];
      } else {
        password += vowels[randomValues[i] % vowels.length];
      }
    }

    // Inject numbers and symbols at random positions
    return this.injectSpecialChars(password);
  }

  injectSpecialChars(password) {
    const numbers = '0123456789';
    const symbols = '!@#$%';
    const randomValues = new Uint32Array(2);
    crypto.getRandomValues(randomValues);

    const numPos = randomValues[0] % password.length;
    const symPos = randomValues[1] % password.length;

    const chars = password.split('');
    chars[numPos] = numbers[randomValues[0] % numbers.length];
    if (symPos !== numPos) {
      chars[symPos] = symbols[randomValues[1] % symbols.length];
    }

    return chars.join('');
  }

  enforceComplexity(password) {
    // Ensure at least one character from each required set
    const hasLower = /[a-z]/.test(password);
    const hasUpper = /[A-Z]/.test(password);
    const hasNumber = /[0-9]/.test(password);
    const hasSymbol = /[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(password);

    if (!hasLower || !hasUpper || !hasNumber || !hasSymbol) {
      return this.generateSecure(); // Regenerate if complexity fails
    }
    return password;
  }

  // Calculate entropy for security scoring
  calculateEntropy(password) {
    let charsetSize = 0;
    if (/[a-z]/.test(password)) charsetSize += 26;
    if (/[A-Z]/.test(password)) charsetSize += 26;
    if (/[0-9]/.test(password)) charsetSize += 10;
    if (/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(password)) charsetSize += 32;

    const entropy = password.length * Math.log2(charsetSize);
    return Math.round(entropy);
  }
}

Building the Popup Interface

The popup provides the user interface for password configuration and generation:

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 320px; padding: 20px; font-family: system-ui, -apple-system, sans-serif; }
    h2 { margin: 0 0 16px 0; font-size: 18px; }
    .field { margin-bottom: 12px; }
    label { display: block; font-size: 13px; margin-bottom: 4px; color: #333; }
    input[type="number"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
    .checkbox { display: flex; align-items: center; gap: 8px; }
    .checkbox input { margin: 0; }
    .password-display { 
      background: #f5f5f5; padding: 12px; border-radius: 4px; 
      font-family: monospace; word-break: break-all; margin: 16px 0;
      min-height: 20px;
    }
    .strength { font-size: 12px; margin-top: 4px; }
    .strength.strong { color: #16a34a; }
    .strength.medium { color: #ca8a04; }
    .strength.weak { color: #dc2626; }
    button { 
      width: 100%; padding: 10px; background: #2563eb; color: white;
      border: none; border-radius: 4px; cursor: pointer; font-weight: 500;
    }
    button:hover { background: #1d4ed8; }
    button.secondary { background: #f3f4f6; color: #333; margin-top: 8px; }
    button.secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <h2>AI Password Generator</h2>
  
  <div class="field">
    <label for="length">Password Length</label>
    <input type="number" id="length" value="16" min="8" max="64">
  </div>
  
  <div class="field checkbox">
    <input type="checkbox" id="includeSymbols" checked>
    <label for="includeSymbols">Include Symbols</label>
  </div>
  
  <div class="field checkbox">
    <input type="checkbox" id="includeNumbers" checked>
    <label for="includeNumbers">Include Numbers</label>
  </div>
  
  <div class="field checkbox">
    <input type="checkbox" id="useMemorable">
    <label for="useMemorable">Memorable Pattern</label>
  </div>

  <div class="password-display" id="output"></div>
  <div class="strength" id="strength"></div>

  <button id="generate">Generate Password</button>
  <button class="secondary" id="copy">Copy to Clipboard</button>

  <script src="popup.js"></script>
</body>
</html>

Connecting the Popup Logic

The popup JavaScript ties together the UI with the generator:

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const output = document.getElementById('output');
  const strengthEl = document.getElementById('strength');
  
  const generator = new AIPasswordGenerator();

  document.getElementById('generate').addEventListener('click', () => {
    const options = {
      length: parseInt(document.getElementById('length').value),
      includeSymbols: document.getElementById('includeSymbols').checked,
      includeNumbers: document.getElementById('includeNumbers').checked,
      useMemorable: document.getElementById('useMemorable').checked
    };

    const password = new AIPasswordGenerator(options).generate();
    const entropy = new AIPasswordGenerator(options).calculateEntropy(password);
    
    output.textContent = password;
    displayStrength(entropy);
    
    // Store for clipboard copy
    output.dataset.password = password;
  });

  function displayStrength(entropy) {
    let text, className;
    if (entropy >= 60) {
      text = `Strong (${entropy} bits entropy)`;
      className = 'strong';
    } else if (entropy >= 40) {
      text = `Medium (${entropy} bits entropy)`;
      className = 'medium';
    } else {
      text = `Weak (${entropy} bits entropy)`;
      className = 'weak';
    }
    strengthEl.textContent = text;
    strengthEl.className = 'strength ' + className;
  }

  document.getElementById('copy').addEventListener('click', () => {
    const password = output.dataset.password;
    if (password) {
      navigator.clipboard.writeText(password).then(() => {
        const btn = document.getElementById('copy');
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy to Clipboard', 1500);
      });
    }
  });

  // Generate initial password
  document.getElementById('generate').click();
});

Security Considerations

When building password generators, security is paramount:

  1. Use crypto.getRandomValues() — Never use Math.random() for password generation
  2. Never transmit passwords — Generate locally, never send to external servers
  3. Clear clipboard after timeout — Set a clipboard clearing mechanism
  4. Use content security policy — Prevent inline script execution in production
// Clear clipboard after 30 seconds for security
setTimeout(() => {
  navigator.clipboard.writeText('');
}, 30000);

Testing Your Extension

Load your extension in Chrome by navigating to chrome://extensions/, enabling Developer mode, and clicking “Load unpacked”. Test these scenarios:

Conclusion

Building an AI password generator Chrome extension combines web development skills with security-conscious coding practices. The core implementation focuses on cryptographically secure randomness, configurable options, and a clean user interface.

The extension architecture shown here provides a solid foundation. You can extend it further with features like password history, breach checking against known databases, or integration with password managers. Each addition should maintain the core security principle: passwords should never leave the user’s device unless explicitly requested.

Start with the basic implementation, test thoroughly, and add features incrementally. The most effective security tools are those that people actually use.


Built by theluckystrike — More at zovo.one