Let’s create a Browser Extension ( with source code )

It’s easy to create a basic browser extension!
If you know a bit of JavaScript! that’s great otherwise don’t worry I’ll help you and try to explain all the boring stuff we are going to do in this artical

What do we need !?
Simple a computer or laptop and if you have installed VS CODE then It’s better otherwise you can use any code editor ( but I recommend VS Code )

What we are building !?
A simple and easy password-generated browser Extension.

Why !?
Because I have already built it.

Now Let’s start it without wasting time:

First, start with creating a folder name “passwordGeneraor”. You can name It whatever you want!

inside the folder let’s place our main icon ( size 19 X 19 ) called icon.png

and another Icon ( size 128 X 128 ) called icon_128.png

Now, when we have done this our icons. let's open the folder in vs code or any text editor you are using.

and let’s create our first file manifest.json.

every extension must have this file manifest.json and let’s start coding!

let me help you to understand this!
manifest_version is always 2 ( at least this time )
name is the name of the extension
description is the description of the extension
version is the version of the extension
icon is for extension Icon
browser_action : for now we define our default icon and default html file
permission: here we define our extension permission for now we write “activeTab”

Our second file is popup.html

You can open the file in browser for preview !
Or open It with live server ( my favorite my way ! It basically auto reload the html page every time you save it !
I know most of you already know about it and use it ! )
Our html file :

popup.html

we use google apis to add Open Sans family in our extension

popup.html

we use some basic style.

popup.html

popup.html

we use some basic html:
first we display the name of our extension in <h1> tag. On the second div we create a text field for password length. On the third div we create a checkbox to ask to the user if user want to include special character in the password. As on the four field we ask to the user if user want to Include number In the password. and the fifth div is use to to explain the work flow of our extension ( If we don’t include it it will fine but it’s good to explain the workflow of our extension ). And In the last we add our js Script.
let’s move to js file:

track popup.js

we tract out Button with the Id of “generate” with document.getElementById function and then we add a Event Listener so we can track whenever user click on our button. Then we create a function name makePassword

popup.js

This this function we create a variable to store Our Capital Alphabets and create another variable for generating a random collection of capital alphabets

Here we use some of js build In method.

~ for loop — Is use for call an action at a certain time !
~ charAt — Is use to get the a character at a specific index position in a string.
~ Math.floor — floor() is used to get the largest integer value that is less than or equal to a number.
~ Math.random — Is use to get the random number.

What we are doing here !?
We start with a loop and set the condition to run 12 time and then we concat the variable to it so we don’t lose the value we get from the previous row! and concat it with a random alphabet with the help of chatAt and Math.floor, Math.random.

We do the same thing with small alphabets, number and special character

popup.js

popup.js

next we combine all the variable to a single variable in combination.

why I do it when I can simply save all in one variable. I’ll explain It in couple of sec.

popup.js

So here we call the input field from our html file. To know If user tell us the length of the password. if user doesn’t we go with 12. and this is the reason why I set the condition for 12 time.

secondary we check if user check any checkbox and if there is checked we include the combination as the requirement. ( and this is the reason why we create multiple variable to store the combination of the characters).

popup.js

In the end we use for loop to run the condition as user requirement and then we generate the password with the help of chatAt, Math.floor and Math.random functions. and in the end we return the password to the user so we can display it In our html file:

generate password

popup.html

here Is the Link of the git repo: passwordGeneraor

and you can check the live demo here:

~ Microsoft Edge : Generate Password — Microsoft Edge Addons

~ Firefox : Generate Password — Get this Extension for 🦊 Firefox (en-US) (mozilla.org)

You Can Ask Questions !

Thanks !