Welcome to this Chrome Extension Tutorial, where we will learn how to create Notes for our browser.
If you use Google Chrome or Chromium browser(Brave), you've used some of the browser's extensions.
Isn't this exciting😍, you're going to make your own extension and can use it for yourself.
This is what our Chrome Extension Look Like.
So, what to wait
Let's go🚀
How to Create a Chrome Extension?🤔
First of all, we need to create a manifest.json file.
manifest.json
The manifest.json file contains all the necessary information about our extension that is required to build the Chrome extension.
Now, let's create a manifest.json file and add the following code:
Our manifest.json file contains the value of name, version, manifest_version (3 in this case, which is the latest manifest version), action fields. In the action field, there's the value default_popup & default_icon that contains the path to the HTML file and logo which is index.html & logo.png in this example.
Now, let’s create a popup.html file with this HTML boilerplate code:
popup.html
Let's add style to our code in the CSS file.
style.css
Let's create a script.js file and add the following code:
script.js
The complete source code of this project can be found on GitHub.
Happy Learning!
Happy Coding!
I Hope you loved it!!💓then give a heart