How to Create a Password Safe Chrome Extension

Okay, so you want to build your own password safe Chrome extension? It sounds hard, but it's doable! This guide will show you how, step by step. You'll learn a lot about web stuff and security, and you'll end up with a tool that you control.

Why Build Your Own Password Safe?

There are tons of password managers out there. So why bother making your own?</

You get to customize it. Make it exactly how you want.
You're in control. No trusting big companies with your data.
You'll learn a lot. Seriously, this is a great project for learning web development.
You'll understand security better. How passwords work, and how to keep them safe.

Basically, it's a cool way to learn and make something useful.

Read Also:How to Use CSS

What You'll Need

Before you start, make sure you have these things:

Web basics. You should know HTML, CSS, and JavaScript.
A code editor. VS Code, Sublime Text, Atom – whatever you like.
Chrome. To test your extension, of course.
(Optional) Python. If you want a more secure backend, a little Python helps.

Let's Build It! Step-by-Step

1. Set Up Your Project

First, make a new folder for your project. Inside, create these files:

manifest.json: This is the brain of your extension.
popup.html: This is what you see when you click the extension icon.
popup.css: This makes the popup look nice.
popup.js: This makes the popup work.
background.js: This runs in the background.
(Optional) background.py: Python backend code.

2. The Manifest (manifest.json)

The manifest.json file is super important. It tells Chrome everything about your extension.

{ "manifest_version": 3, "name": "Password Safe", "version": "1.0", "description": "A simple password safe Chrome extension.", "permissions": [ "storage", "activeTab" ], "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } }, "background": { "service_worker": "background.js" }, "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } }

What does it all mean?

manifest_version: Use 3. It's the latest version.
name: What you want to call your extension.
version: The version number. Start with 1.0.
description: A quick summary.
permissions: What your extension can do. storage lets you save data, and activeTab lets you see the current website.
action: This tells Chrome about the popup.
background: The background script.
icons: Little pictures for your extension.

Oh, and create an images folder and put your icon files in there.

3. The Popup (popup.html)

This is what users will see! It needs fields for the website URL, username, and password. Plus, buttons to save and get the info.

<!DOCTYPE html> <html> <head> <title>Password Safe</title> <link rel="stylesheet" href="popup.css"> </head> <body> <div class="container"> <h1>Password Safe</h1> <label for="website">Website:</label> <input type="text" id="website" placeholder="Enter website URL"><br><br> <label for="username">Username:</label> <input type="text" id="username" placeholder="Enter username"><br><br> <label for="password">Password:</label> <input type="password" id="password" placeholder="Enter password"><br><br> <button id="saveButton">Save Password</button> <<button id="getButton">Get Password</button> <div id="message"></div> </div> <script src="popup.js"></script> </body> </html>

4. Make It Look Good (popup.css)

Use CSS to style the popup. Here's a basic example:

body { width: 300px; font-family: sans-serif; padding: 10px; } .container { display: flex; flex-direction: column; } label { margin-bottom: 5px; } input { padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; } button:hover { background-color: #3e8e41; } #message { margin-top: 10px; font-weight: bold; }

5. Make It Work (popup.js)

This is where the magic happens. The JavaScript code saves and retrieves passwords using Chrome's storage API.

document.addEventListener('DOMContentLoaded', function() { const saveButton = document.getElementById('saveButton'); const getButton = document.getElementById('getButton'); const websiteInput = document.getElementById('website'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const messageDiv = document.getElementById('message'); saveButton.addEventListener('click', function() { const website = websiteInput.value; const username = usernameInput.value; const password = passwordInput.value; if (website && username && password) { chrome.storage.sync.set({ [website]: { username: username, password: password } }, function() { messageDiv.textContent = 'Password saved!'; }); } else { messageDiv.textContent = 'Please fill in all fields.'; } }); getButton.addEventListener('click', function() { const website = websiteInput.value; if (website) { chrome.storage.sync.get(website, function(result) { if (result[website]) { usernameInput.value = result[website].username; passwordInput.value = result[website].password; messageDiv.textContent = 'Password retrieved!'; } else { messageDiv.textContent = 'Password not found for this website.'; } }); } else { messageDiv.textContent = 'Please enter a website URL.'; } }); });

Here's the breakdown:

It listens for clicks on the "Save" and "Get" buttons.
When you click "Save," it grabs the website, username, and password.
It uses chrome.storage.sync.set to save the data. The chrome.storage.sync part means your passwords sync across your devices!
When you click "Get," it finds the saved info.
If it finds the password, it fills in the username and password fields.
If anything goes wrong, it shows an error message.

6. Background Tasks (background.js)

This script runs in the background. For now, it just logs a message when you install the extension.

chrome.runtime.onInstalled.addListener(() => { console.log('Password Safe extension installed!'); });

7. Load It Up in Chrome!

Time to see if it works!

Open Chrome and go to chrome://extensions.
Turn on "Developer mode" (top right).
Click "Load unpacked" and pick your extension's folder.

Boom! Your extension should be in your Chrome toolbar.

Security Time!

Right now, your extension saves passwords as plain text. That's bad! Let's make it more secure.

1. Encryption!

Let's encrypt those passwords before saving them. Use a JavaScript library like crypto-js.

// Install crypto-js: npm install crypto-js const CryptoJS = require('crypto-js'); // Encryption function function encrypt(password, secretKey) { return CryptoJS.AES.encrypt(password, secretKey).toString(); } // Decryption function function decrypt(ciphertext, secretKey) { const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey); return bytes.toString(CryptoJS.enc.Utf8); } // Example usage const secretKey = 'MySecretKey'; // Replace with a strong, randomly generated key const encryptedPassword = encrypt(password, secretKey); const decryptedPassword = decrypt(encryptedPassword, secretKey);

Important: Where do you keep the secretKey? Don't just hardcode it! You want to ask your user for a master password. Use that password to derive the real encryption key. Look up "key derivation function (KDF)" like PBKDF2.

2. Python Backend (Optional, But Good)

For even more security, store the encrypted passwords on a server. Here's how:

Make a Python API. Use Flask to create a way to save and get passwords.
Use a database. SQLite or PostgreSQL are good choices.
Protect the API. Add authentication so only you can use it.
Connect with JavaScript. Use the fetch API in popup.js.

Example Python Flask API (background.py):

from flask import Flask, request, jsonify import sqlite3 app = Flask(name) DATABASE = 'passwords.db' def get_db_connection(): conn = sqlite3.connect(DATABASE) conn.row_factory = sqlite3.Row return conn def create_table(): conn = get_db_connection() cursor = conn.cursor() cursor.execute(""" CREATE TABLE IF NOT EXISTS passwords ( id INTEGER PRIMARY KEY AUTOINCREMENT, website TEXT NOT NULL, username TEXT NOT NULL, password TEXT NOT NULL ) """) conn.commit() conn.close() create_table() @app.route('/save', methods=['POST']) def save_password(): data = request.get_json() website = data['website'] username = data['username'] password = data['password'] conn = get_db_connection() cursor = conn.cursor() cursor.execute("""INSERT INTO passwords (website, username, password) VALUES (?, ?, ?)""", (website, username, password)) conn.commit() conn.close() return jsonify({'message': 'Password saved successfully'}), 200 @app.route('/get', methods=['GET']) def get_password(): website = request.args.get('website') conn = get_db_connection() cursor = conn.cursor() cursor.execute("SELECT username, password FROM passwords WHERE website = ?", (website,)) result = cursor.fetchone() conn.close() if result: return jsonify({'username': result['username'], 'password': result['password']}), 200 else: return jsonify({'message': 'Password not found'}), 404 if name == 'main': app.run(debug=True)

Modified JavaScript (popup.js):

// Replace existing saveButton and getButton event listeners with these saveButton.addEventListener('click', function() { const website = websiteInput.value; const username = usernameInput.value; const password = passwordInput.value; if (website && username && password) { fetch('http://127.0.0.1:5000/save', { // Replace with your API endpoint method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ website: website, username: username, password: password }) }) .then(response => response.json()) .then(data => { messageDiv.textContent = data.message; }) .catch(error => { messageDiv.textContent = 'Error saving password.'; console.error('Error:', error); }); } else { messageDiv.textContent = 'Please fill in all fields.'; } }); getButton.addEventListener('click', function() { const website = websiteInput.value; if (website) { fetch(http://127.0.0.1:5000/get?website=${website}) // Replace with your API endpoint .then(response => response.json()) .then(data => { if (data.username && data.password) { usernameInput.value = data.username; passwordInput.value = data.password; messageDiv.textContent = 'Password retrieved!'; } else { messageDiv.textContent = data.message; } }) .catch(error => { messageDiv.textContent = 'Error retrieving password.'; console.error('Error:', error); }); } else { messageDiv.textContent = 'Please enter a website URL.'; } });

Don't forget to install Flask and SQLite with pip!

3. Key Generation

Don't hardcode that secret key! Use a strong random number generator. Chrome has an Identity API for secure storage – check it out!

4. Two-Factor Authentication (2FA)

Want even more security? Add 2FA. Use a TOTP app or send a code to the user's phone.

5. Password Strength

Add a password strength meter to encourage users to pick strong passwords.

Good Habits

Security Always. Encrypt everything! Protect your keys!
Easy to Use. Make the interface simple and clear.
Handle Errors. Don't let your extension crash. Show helpful messages.
Clean Code. Write code that's easy to read and understand.
Keep It Updated. Fix bugs and stay up-to-date with Chrome changes.

Wrap Up

Making a Password Safe Chrome Extension is a challenge, but it's worth it. You'll learn a ton about Web Development, especially Javascript. Adding Python for the backend makes it even better. Just remember: security and user experience are key!