Build a Password Generator Chrome Extension: Complete Tutorial

January 20, 2025 · 18 min read · Chrome Extensions, Tutorial

Build a Password Generator Chrome Extension: Complete Tutorial

Password security is more critical than ever in 2025. With cyberattacks becoming increasingly sophisticated and data breaches affecting millions of users worldwide, having strong, unique passwords for every account has become a fundamental aspect of digital security. A password generator extension is one of the most practical and useful Chrome extensions you can build, serving as a valuable security tool extension that helps users create robust passwords instantly.

In this comprehensive tutorial, we will walk you through building a fully functional random password Chrome extension from scratch. You will learn how to implement secure password generation algorithms, create an intuitive user interface, add copy-to-clipboard functionality, and prepare your extension for publication on the Chrome Web Store.

Why Build a Password Generator Chrome Extension?

Before diving into the code, let us understand why creating a password generator extension is an excellent project choice for both learning and real-world impact.

High Demand for Security Tools

The demand for password management and security tools has skyrocketed in recent years. With the average person managing over 100 online accounts, the need for strong, unique passwords has never been more pressing. Users are actively searching for solutions that can help them generate secure passwords quickly and conveniently. A Chrome extension that generates random passwords directly in the browser meets this need perfectly, as it is always accessible and does not require switching between applications.

Relatively Simple Implementation

Despite the significant utility it provides, a basic password generator extension is surprisingly straightforward to implement. You do not need complex backend systems, database connections, or advanced cryptographic expertise. The core functionality relies on JavaScript is built-in cryptographic capabilities, making this an ideal project for developers who are new to Chrome extension development.

Manifest V3 Compatibility

Building your password generator with Manifest V3 ensures compliance with Google’s latest extension platform requirements. This means your extension will work seamlessly with modern Chrome versions and follow best practices for security and performance. Manifest V3 introduces several improvements, including enhanced privacy controls and more efficient resource usage, making it the perfect foundation for a security-focused extension.

Project Structure and Setup

Let us start by setting up the project structure for our Chrome extension. Create a new folder for your project and add the following essential files.

Required Files

Your password generator extension will need four core files: the manifest file that defines the extension configuration, an HTML file for the popup interface, a JavaScript file for the password generation logic, and a CSS file for styling. This simple structure is typical of many Chrome extensions and provides a clean foundation for building more complex features later.

Create a folder named password-generator and add these files inside:

password-generator/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
└── icon.png

The manifest.json file is the heart of your extension, telling Chrome everything it needs to know about your extension’s capabilities and permissions.

The Manifest File

The manifest.json file uses Manifest V3 format and defines the basic information about your extension. Here is what you need to include:

{
  "manifest_version": 3,
  "name": "Secure Password Generator",
  "version": "1.0",
  "description": "Generate strong, random passwords instantly with this security tool extension",
  "permissions": ["clipboardWrite"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  }
}

Notice that we include the clipboardWrite permission, which allows our extension to copy generated passwords to the user’s clipboard. This is essential for the user experience, as it enables quick copying of passwords without requiring manual selection and copying.

The popup.html file defines the user interface that appears when users click your extension icon. Let us create a clean, intuitive interface with controls for password generation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Generator</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h1>Password Generator</h1>
    
    <div class="password-display">
      <input type="text" id="password" readonly placeholder="Click Generate">
      <button id="copy-btn" title="Copy to clipboard">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
      </button>
    </div>
    
    <div class="controls">
      <div class="control-group">
        <label for="length">Password Length: <span id="length-value">16</span></label>
        <input type="range" id="length" min="8" max="64" value="16">
      </div>
      
      <div class="control-group checkbox-group">
        <label>
          <input type="checkbox" id="uppercase" checked>
          Uppercase (A-Z)
        </label>
        <label>
          <input type="checkbox" id="lowercase" checked>
          Lowercase (a-z)
        </label>
        <label>
          <input type="checkbox" id="numbers" checked>
          Numbers (0-9)
        </label>
        <label>
          <input type="checkbox" id="symbols" checked>
          Symbols (!@#$%)
        </label>
      </div>
    </div>
    
    <button id="generate-btn">Generate Password</button>
    
    <div class="strength-indicator">
      <div class="strength-bar" id="strength-bar"></div>
      <span id="strength-text">Click generate</span>
    </div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>

This HTML structure provides a clean, organized interface with a password display field, length slider, character type checkboxes, a generate button, and a visual strength indicator. The design prioritizes usability, making it easy for users to customize their password requirements.

The JavaScript Logic

The popup.js file contains all the password generation logic. This is where the magic happens, and we implement secure random password generation using JavaScript’s cryptographic capabilities:

document.addEventListener('DOMContentLoaded', () => {
  const passwordInput = document.getElementById('password');
  const generateBtn = document.getElementById('generate-btn');
  const copyBtn = document.getElementById('copy-btn');
  const lengthSlider = document.getElementById('length');
  const lengthValue = document.getElementById('length-value');
  const strengthBar = document.getElementById('strength-bar');
  const strengthText = document.getElementById('strength-text');
  
  const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const numberChars = '0123456789';
  const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
  
  // Cryptographically secure random number generation
  function getSecureRandom(max) {
    const array = new Uint32Array(1);
    window.crypto.getRandomValues(array);
    return array[0] % max;
  }
  
  function generatePassword(length, options) {
    let charPool = '';
    
    if (options.uppercase) charPool += uppercaseChars;
    if (options.lowercase) charPool += lowercaseChars;
    if (options.numbers) charPool += numberChars;
    if (options.symbols) charPool += symbolChars;
    
    if (charPool === '') {
      return 'Select at least one option';
    }
    
    let password = '';
    for (let i = 0; i < length; i++) {
      password += charPool[getSecureRandom(charPool.length)];
    }
    
    return password;
  }
  
  function calculateStrength(password) {
    let strength = 0;
    
    if (password.length >= 8) strength += 1;
    if (password.length >= 12) strength += 1;
    if (password.length >= 16) strength += 1;
    if (/[a-z]/.test(password)) strength += 1;
    if (/[A-Z]/.test(password)) strength += 1;
    if (/[0-9]/.test(password)) strength += 1;
    if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
    
    return strength;
  }
  
  function updateStrengthIndicator(password) {
    const strength = calculateStrength(password);
    let color, text, width;
    
    if (strength <= 2) {
      color = '#ff4444';
      text = 'Weak';
      width = '25%';
    } else if (strength <= 4) {
      color = '#ffaa00';
      text = 'Medium';
      width = '50%';
    } else if (strength <= 6) {
      color = '#00cc66';
      text = 'Strong';
      width = '75%';
    } else {
      color = '#00ff88';
      text = 'Very Strong';
      width = '100%';
    }
    
    strengthBar.style.backgroundColor = color;
    strengthBar.style.width = width;
    strengthText.textContent = text;
    strengthText.style.color = color;
  }
  
  function getOptions() {
    return {
      uppercase: document.getElementById('uppercase').checked,
      lowercase: document.getElementById('lowercase').checked,
      numbers: document.getElementById('numbers').checked,
      symbols: document.getElementById('symbols').checked
    };
  }
  
  // Event listeners
  generateBtn.addEventListener('click', () => {
    const length = parseInt(lengthSlider.value);
    const options = getOptions();
    const password = generatePassword(length, options);
    
    passwordInput.value = password;
    updateStrengthIndicator(password);
  });
  
  lengthSlider.addEventListener('input', () => {
    lengthValue.textContent = lengthSlider.value;
  });
  
  copyBtn.addEventListener('click', async () => {
    const password = passwordInput.value;
    
    if (!password || password === 'Select at least one option') {
      return;
    }
    
    try {
      await navigator.clipboard.writeText(password);
      copyBtn.classList.add('copied');
      setTimeout(() => copyBtn.classList.remove('copied'), 1500);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  });
  
  // Generate initial password
  generateBtn.click();
});

This JavaScript implementation uses window.crypto.getRandomValues() for cryptographically secure random number generation, which is far superior to using Math.random() for security-sensitive applications. The code also includes a strength calculation algorithm that evaluates passwords based on length and character variety, providing users with visual feedback about password quality.

The CSS Styling

The popup.css file provides a modern, clean visual design for your extension:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 320px;
  background: #1a1a2e;
  color: #ffffff;
}

.container {
  padding: 20px;
}

h1 {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
  color: #00d4ff;
}

.password-display {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.password-display input {
  flex: 1;
  padding: 12px;
  border: 2px solid #16213e;
  border-radius: 8px;
  background: #16213e;
  color: #00d4ff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.password-display input:focus {
  outline: none;
  border-color: #00d4ff;
}

.password-display button {
  padding: 12px;
  background: #00d4ff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.password-display button:hover {
  background: #00b8e6;
}

.password-display button.copied {
  background: #00cc66;
}

.controls {
  margin-bottom: 20px;
}

.control-group {
  margin-bottom: 15px;
}

.control-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #a0a0a0;
}

.control-group input[type="range"] {
  width: 100%;
  cursor: pointer;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #00d4ff;
}

#generate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #00d4ff, #0066ff);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#generate-btn:hover {
  transform: translateY(-2px);
}

#generate-btn:active {
  transform: translateY(0);
}

.strength-indicator {
  margin-top: 20px;
}

.strength-bar {
  height: 6px;
  background: #16213e;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.strength-text {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
}

The styling uses a modern dark theme with cyan accents, creating a professional appearance that matches the security-focused nature of the extension. The design is responsive and works well across different screen sizes.

Creating an Icon

Every Chrome extension needs an icon. You can create a simple icon using any image editor or even generate one programmatically. For a password generator, consider using a lock symbol or a key icon. Save your icon as icon.png in multiple sizes (16x16, 48x48, and 128x128 pixels) for different contexts within Chrome.

Loading and Testing Your Extension

Now that you have all the files in place, it is time to load your extension into Chrome and test it:

Open Chrome and navigate to chrome://extensions/
Enable “Developer mode” using the toggle in the top right corner
Click “Load unpacked” and select your password-generator folder
Your extension icon should appear in the Chrome toolbar

Click the icon to open the popup and test the password generation. Try adjusting the length slider, toggling character options, and testing the copy functionality. The strength indicator should update in real-time as you generate new passwords.

Security Best Practices

When building a password generator extension, security is paramount. Here are some important considerations:

Use Cryptographically Secure Randomness

Never use Math.random() for password generation. Instead, always use window.crypto.getRandomValues() as demonstrated in our implementation. This ensures that the generated passwords are truly unpredictable and resistant to brute-force attacks.

Do Not Store Passwords

A password generator should generate passwords on-demand and never store them. This reduces the attack surface and ensures that even if your extension is compromised, no passwords are exposed. If you later add password history functionality, ensure that data is encrypted and the user has control over deletion.

Clear Clipboard After Use

Consider implementing a feature that automatically clears the clipboard after a configurable timeout. This prevents passwords from remaining in the clipboard indefinitely, which could be exploited by malicious software.

Enhancing Your Extension

Once you have the basic password generator working, consider adding these features to make your extension more useful:

Password History

Allow users to store generated passwords locally using Chrome’s storage API. This enables them to recall previously generated passwords if they need to reference them later.

Custom Character Sets

Add the ability for users to define custom character sets or exclude similar-looking characters (like 0 and O, or l and 1) to improve password readability.

Password Visibility Toggle

Add a feature to show or hide the password in the display field, useful for users who want to verify their password before copying.

Sync Across Devices

Implement Chrome sync storage to allow users to access their preferences across different devices where they use Chrome.

Publishing Your Extension

When you are ready to share your extension with the world, you can publish it to the Chrome Web Store:

Create a developer account at the Chrome Web Store
Package your extension as a ZIP file
Upload your extension and fill in the required information
Submit for review

Ensure that your extension follows Google’s policies, including providing a clear privacy policy if your extension handles user data.

Conclusion

Congratulations! You have built a fully functional password generator extension that generates cryptographically secure random passwords directly in the browser. This project demonstrates the core concepts of Chrome extension development, including Manifest V3, popup interfaces, secure JavaScript implementations, and clipboard API integration.

The skills you have learned in this tutorial provide a solid foundation for building more complex Chrome extensions. Whether you want to expand this password generator with additional features or tackle entirely different extension projects, you now understand the architecture and best practices for creating successful Chrome extensions.

Start using your extension today and experience the convenience of having a secure random password Chrome generator at your fingertips. Share it with friends and colleagues, or publish it to the Chrome Web Store to help users worldwide improve their password security.

Turn Your Extension Into a Business

Ready to monetize? The Extension Monetization Playbook covers freemium models, Stripe integration, subscription architecture, and growth strategies for Chrome extension developers.

Built by theluckystrike at zovo.one

Build a Password Generator Chrome Extension: Complete Tutorial

Build a Password Generator Chrome Extension: Complete Tutorial

Why Build a Password Generator Chrome Extension?

High Demand for Security Tools

Relatively Simple Implementation

Manifest V3 Compatibility

Project Structure and Setup

Required Files

The Manifest File

The Popup HTML

The JavaScript Logic

The CSS Styling

Creating an Icon

Loading and Testing Your Extension

Security Best Practices

Use Cryptographically Secure Randomness

Do Not Store Passwords

Clear Clipboard After Use

Enhancing Your Extension

Password History

Custom Character Sets

Password Visibility Toggle

Sync Across Devices

Publishing Your Extension

Conclusion

Turn Your Extension Into a Business