DEV Community

Kumar Nitesh
Kumar Nitesh

Posted on

Unleash the Power of Strong Passwords: How to Build a Password Generator Chrome Extension in 5 Easy Steps

Passwords are an integral part of our online lives, but coming up with strong, unique passwords for every website can be a real hassle. That's why a password generator chrome extension can come in handy. In this article, we'll show you how to build a simple password generator chrome extension in just 5 easy steps.

Step 1: Create a Manifest File
The first thing we need to do is create a manifest.json file. This file will contain important information about your chrome extension, including its name, version, and permissions. Here's an example of what the manifest.json file should look like:

{
  "manifest_version": 2,
  "name": "Password Generator",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Enter fullscreen mode Exit fullscreen mode

Step 2: Create a Popup HTML File
Next, we need to create a popup.html file that will serve as the interface for our password generator. This file will include a form with a text input for the password length and a button to generate a password. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Password Generator</title>
  </head>
  <body>
    <form>
      <label for="length">Password Length:</label>
      <input type="number" id="length" min="8" max="32">
      <button id="generate">Generate</button>
    </form>
    <div id="password"></div>
    <script src="popup.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a Popup JavaScript File
Now that we have our HTML file set up, we need to add some JavaScript to make our password generator work. In this step, we'll create a popup.js file that will generate a random password based on the length specified by the user.

document.addEventListener("DOMContentLoaded", function() {
  const lengthInput = document.getElementById("length");
  const generateButton = document.getElementById("generate");
  const passwordDiv = document.getElementById("password");

  generateButton.addEventListener("click", function() {
    const password = generatePassword(lengthInput.value);
    passwordDiv.textContent = password;
  });
});

function generatePassword(length) {
  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;':,.<>?";
  let password = "";
  for (let i = 0; i < length; i++) {
    password += charset.charAt(Math.floor(Math.random() * charset.length));
  }
  return password;
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add an Icon
To make your password generator look more professional, you can add an icon to it. Simply create a .png image file and save it as icon.png in the same directory as your other files. Then, reference the icon in your manifest.json file by setting "default_icon": "icon.png".

Step 5: Load Your Extension
Finally, it's time to load your chrome extension. To do this, go to chrome://extensions in your browser and enable "Developer mode." Then, click on the "Load unpacked" button and select the directory containing your files.

That's it! You now have a fully functional password generator chrome extension. To test it out, click on the extension icon in your browser and enter the desired password length. You should see a random password generated for you.

Building a password generator chrome extension is a great way to make your online life easier and more secure. By following these 5 easy steps, you can quickly and easily build your own password generator and start generating strong, unique passwords with just a few clicks.
Happy Coding!

Top comments (0)