Hello everyone, everything good?
I haven't posted anything in a while, I was a little busy with changes in work and studies, but this weekend I learned something really cool and that particularly solved a problem I had…
Like many, when I registered in some form and needed to put a password to finish, I looked for dates, names, places or something familiar to remember more easily, but that's the problem... We can't put passwords that are familiar to us, can we? be easy to guess the password if we do social engineering. As in the series Mr. Robot, which I certainly highly recommend!
In this creation I learned two things:
- I don't need to memorize my password. Since I can use some other application to be able to store my passwords.
- And the second, of course, I cannot create weak passwords related to myself.
Thinking about these two pains, I created an extension that generates strong passwords!
I will divide this problem into 4 parts: Logic, where we will create a function that performs what we want, with pure javascript. Preview, where we will make the structure with HTML and add some points requested by the browser to publish our extension. E*stylization* ie we will give life with css to our extension and finally interactivity with the web where we will be modifying the web components.
Before all that, I needed to read the documentation for Chrome Extensions and in the root of our project add our manifest.json file:
{
"manifest_version": 3,
"name": "Generate Password",
"description": "Generate a random password",
"version": "1.0",
"action": {
"default_popup": "./src/index.html",
"default_icon": "key.png"
}
}
Logic
function randomCharacter() {
const letters = 'aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ'
const numbers = '0123456789'
const simbols = '!"#$%&()*+,-./:;<=>?@[]^_`{|}~'
const characters = letters + numbers + simbols
return characters[Math.floor(Math.random() * characters.length)]
}
function generatePassword(length = 8) {
let password = ""
for (let i = 0; i < length; i++) {
password += randomCharacter()
}
return password
}
export default { generatePassword }
The randomCharacter() function creates a characters string that contains uppercase and lowercase letters, numbers and symbols. It then returns a random character from that string.
The generatePassword() function takes a length as an optional parameter, which is set to 8 by default. It uses a loop to call the randomCharacter() function repeatedly and add the returned characters to a string password. After the loop, the function returns the generated random password.
In summary, the generatePassword() function uses the randomCharacter() function to generate random passwords of the desired length.
Viewer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<h1>Random Password Generator🔥</h1>
<div class="content-options">
<input class="input-option" type="text" id="input-text" value="" placeholder="Create password...">
</div>
<div class="message disabled" id="message">
<p id="message">Password copied to clipboard!🥳</p>
</div>
<div class="content-buttons">
<button class="button" id="generate">Generate</button>
<button class="button-copy" id="copy">Copy</button>
</div>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>
This is a basic HTML file with a form to generate random passwords.
The HTML code starts with the <!DOCTYPE html> and <html lang="en"> tags that define the type and language of the document.
The <head> and <title> tags provide information about the page, such as the character encoding and title.
The <link> tag is used to link the CSS file style.css to style the page.
Inside the <body> tag is a div container with class "content" that contains the title "Random Password Generator" in a level 1 header (<h1 >).
Just below, there is an input text box with the class "input-option" which is used to display the generated passwords. The placeholder tag provides a hint for the user to type.
The next div with the "message" class displays a message that the password has been copied to the clipboard after the "Copy" button is clicked.
The last div with the "content-buttons" class contains two buttons: "Generate" to generate a new random password and "Copy" to copy the generated password to the clipboard.
The index.js JavaScript file is linked to the HTML via the <script> tag and provides the logic to generate random passwords and copy the password to the clipboard.
Style
This CSS style file defines the visual appearance of an HTML document.
I didn't put it how I did it because it's really something basic and I wanted to focus on logic.
Interactivity with the web page
This Javascript file is responsible for creating the interactivity of the web page, adding click events on the "Generate" and "Copy" buttons.
import generator from './helpers/generator.js'
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('input-text')
const buttonGenerate = document.getElementById('generate')
const buttonCopyToClipboard = document.getElementById('copy')
const message = document.getElementById('message')
buttonGenerate.addEventListener('click', () => {
const password = generator.generatePassword(10)
console.log(password)
input.value = password
})
buttonCopyToClipboard.addEventListener('click', () => {
message.classList.remove('disabled')
input.select()
navigator.clipboard.writeText(input.value)
})
})
First, the code imports an external module that contains a password generator function.
The code then uses the addEventListener method to add a callback function that will be executed when the "DOMContentLoaded" event occurs on the page. This ensures that all of the content on the page has loaded before the script starts interacting with it.
Within the callback, the code captures references to the HTML elements that will be manipulated (the text input field, the "Generate" and "Copy" buttons, and the message element).
The code then adds a click event to the "Generate" button. When the button is clicked, the callback function creates a random password using the imported password generator function and displays the password in the text input field.
The code also adds a click event to the "Copy" button. When the button is clicked, the callback function enables the display of the "password copied" message and copies the value of the text input field to the user's clipboard using the navigator.clipboard.writeText() method.
Project structure
├── src/
│ ├── helpers/
│ │ ├── generator.js
│ │ └── generator.spec.js
│ ├── index.html
│ ├── index.js
│ └── style.css
├── key.png
├── manifest.json
├── package.json
└── README.md
Top comments (0)