Paolo Ronco
PORTFOLIO
Online security is more important than ever, yet many people continue to use weak passwords like “12345678”, "password" or “qwerty”, compromising your accounts and sensitive data. With the growing threat of cyber attacks, it is essential to use strong and secure passwords to protect your privacy and personal information.
Fortunately, there are tools that make this practice quick and easy. Among these, a new Chrome Extension call Password Generator, designed to generate unique and strong passwords in just a few clicks.
Simple, predictable passwords are easy for hackers and automated bots to guess. Using random combinations of letters, numbers, and symbols is the best way to protect yourself. However, manually creating these passwords can be tedious and cumbersome. This is where our Password Generator, an easy-to-use Chrome extension also available in a web version.
The extension Password Generator allows you to create secure and personalized passwords based on your needs, directly from the Chrome browser or the website. With an intuitive interface and customizable tools, you can choose:
Each generated password is random and unique, eliminating any risk of predictability. In addition, you can immediately copy the generated password with a simple click to paste it wherever you need it.
You can install the extension Password Generator directly from the Chrome Web Store:👉 Password Generator on Chrome Web Store
If you are a developer or want to contribute to the project, you can find the source code on GitHub:👉 Password Generator on GitHub
Below you can find the extension code, which includes three main files: pop-up.html, script.js And style.css.
<!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="styles.css"> </head> <body> <div class="container"> <h1>Password Generator</h1> <div class="options"> <label for="length">Password Length:</label> <input type="range" id="length" min="4" max="32" value="12"> <span id="length-value">12</span> <label> <input type="checkbox" id="include-letters" checked> Letters (a-z, A-Z) </label> <label> <input type="checkbox" id="include-numbers" checked> Numbers (0-9) </label> <label> <input type="checkbox" id="include-specials"> Special Characters (!$%?€) </label> </div> <div class="output"> <input type="text" id="password" readonly> <button id="refresh">Refresh</button> <button id="copy">Copy</button> </div> </div> <script src="script.js"></script> </body> </html>
document.addEventListener("DOMContentLoaded", () => { const lengthInput = document.getElementById("length"); const lengthValue = document.getElementById("length-value"); const includeLetters = document.getElementById("include-letters"); const includeNumbers = document.getElementById("include-numbers"); const includeSpecials = document.getElementById("include-specials"); const passwordOutput = document.getElementById("password"); const refreshButton = document.getElementById("copy"); => { const length = parseInt(lengthInput.value, 10); const useLetters = includeLetters.checked; const useNumbers = includeNumbers.checked; const useSpecials = includeSpecials.checked; let letters = "abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ"; let numbers = "0123456789"; let specials = "!$%?€"; let characters = ""; if (useLetters) characters += letters; if (useNumbers) characters += numbers; if (useSpecials) characters += specials; if (characters === "") { passwordOutput.value = "Select at least one option!"; return; } let password = ""; let specialCount = 0; for (let i = 0; i < length; i++) { const randomIndex = Math.floor(Math.random() * characters.length); const randomChar = characters[randomIndex]; if (specials.includes(randomChar)) { specialCount++; } password += randomChar; } if (useSpecials && specialCount === 0) { const randomSpecial = specials[Math.floor(Math.random() * specials.length)]; const randomReplaceIndex = Math.floor(Math.random() * password.length); password = password.slice(0, randomReplaceIndex) + randomSpecial + password.slice(randomReplaceIndex + 1); } passwordOutput.value = password; }; const copyToClipboard = () => { const password = passwordOutput.value; if (password) { navigator.clipboard.writeText(password).then(() => { alert("Password copied to clipboard!"); }).catch(err => { console.error("Could not copy password: ", err); }); } else { alert("No password to copy!"); } }; lengthInput.addEventListener("input", () => { updateLengthValue(); generatePassword(); }); refreshButton.addEventListener("click", () => { generatePassword(); }); copyButton.addEventListener("click", () => { copyToClipboard(); }); updateLengthValue(); generatePassword(); });
body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f9; } .container { background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; width: 300px; } h1 { margin-bottom: 20px; font-size: 1.5em; color: #333; } .options label { display: block; margin-bottom: 10px; font-size: 0.9em; color: #555; } #length { width: 100%; margin: 10px 0; } #length-value { font-weight: bold; color: #333; } .output { margin-top: 20px; } #password { width: calc(100% - 40px); padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; text-align: center; } button { background: #007bff; color: #ffffff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 0.9em; cursor: pointer; transition: background 0.3s; } button:hover { background: #0056b3; }
For the extension, three icons with the following dimensions are required:
Images must be uploaded to the main project folder and referenced in the file manifest.json.
The extension will now be visible in your browser.
Reselling, redistributing or copying the code, extension or site they are not authorized without the author's consent.
