Getting Started with Developing Browser Extensions
How to Develop your own basic Browser Extension for Chrome and Mozilla Firefox.
Hello Developers, have you heard about the browser extensions for your daily life makes easier
For More Information please follow this Google Developer Guide Getting Started Tutorial — Google Chrome
In daily life, we use many extensions in the browser to make our work easier and faster. In Chrome and Mozilla we use many different extensions like Proxy, wappalyzer, and many more.
Today we will learn about how to this extension development with our requirement usage. we will create a basic Extension that shows you how extension work and debug in our local environment.
So, Let’s create a Simple Extension.
- Creating a Project Directory.
$ mkdir extension-demo
$ cd extension-demo- Create a
manifest.jsonfile into Project dir.
Here, we create a manifest.json file it is very important.manifest.json describes the all metadata information of our extensions like Name, Version, Extension Icon, and many more Things.
- Create a file name
popup.htmland paste the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>- Now run our Extension for local testing in the browser.
There are the following browsers to run your extension code
1. Chrome
2. Mozilla Firefox
- Run our Extension in Chrome.
Open your Chrome browser and go to URL chrome://extensions turn on your Developer mode Enable.
After clicking the button Load Unpacked and load the extension Source Code.
As you can see our Extension will load and shows in the Browser Toolbar Menu.
- Run our Extension in Mozilla Firefox Browser.
Open your Mozilla Firefox browser and goto URL about: addons
You will see the following Window.
Click on Load Temporary Add-on… and point out/Load the manifest.json from your Extension Source code.
That’s Done…
That’s Done…
We successfully created our first simple Extension demo and debugged the extension in Google Chrome and Mozilla Firefox browsers.
Please let me know if you have queries in the comment section.
If you develop your extensions with React then this blog will be helpful.
