Chrome Extensions Tutorial — Let’s Build a Chrome Extension
Ever wondered how awesome chrome extensions like Grammerly, InspireNuggets, Mozbar, Keywords Everywhere and others are built?
Maybe you are just a developer who is curious about how these awesome extensions are built and made to seamlessly integrate with the chrome browser.
Well, this article is a comprehensive guide that explains how to make extensions for chrome and it is expected that by the end of this article you should have an idea of how to make your first chrome extension.
Existing extensions on the chrome marketplace
Requirements for creating a chrome extension
To create an extension for chrome, the following is required:
- An Understanding of how chrome extensions work
- An idea of what you want to create
- A knowledge of the desired language
- A Manifest.json file that contains detailed information about your extension
- Icons for your extension
- Some Coffee :)
Chrome Extensions Explained
According to the Chrome extensions documentation:
An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.
An overview of the chrome extension we are making
The Chrome Extension we are going to be creating in this tutorial will be a simple extension that greets ‘Hello World!’ when its triggered.
Lets down to making our very own chrome extension!
Procedures To Follow When Making An Extension For Chrome
- Create the main folder for your Chrome extension
- Add the manifest.json file
- Adding an icon
- Add Your HTML
- Testing Your Extension
Creating a main Folder For your Chrome Extension
There is no special procedure here, Simply create a directory where all the files for your extension will be placed.
For the sake of simplicity, we’d be naming our extension’s folder: ‘hello-extension’
If you’re using git bash or a terminal, type
Adding the Manifest.json File to our Chrome Extension
Navigate to the folder you just created and create a manifest.json file.
With git, that is done with
On windows, you can use the new file command.
In the manfest.json file add the following lines of code
The instructions above gives chrome the necessary information about our extension.
The next step is to proceed to add our icon
Adding an icon to your chrome extension
Download a sample icon here or create your own and make sure its in the same folder as your manifest.json.
Once that is done, include your icon in the manifest file so your code whould look like this:
Adding HTML to the Chrome Extension
After our icon has been specified in the manifest file of the chrome extension we are building, its time to add some activity to the extension.
In the workspace folder, proceed to create an HTML file and name it as ‘popup.html’ or whatever name you wish to.
Add the following code to the HTML file:
Save and proceed to include the HTML file as the default action in your manifest.json file:
Voila! we have just created a simple extension for chrome!
Let’s Proceed to see our extension in action.
Testing The Extension
Open the Chrome Browser and in the address bar, type in ‘chrome://extensions/’ and hit enter
It takes you to the chrome extensions tab in your browser
Screenshot of the extensions dashboard
- As seen in the image above, enable Developer Mode by toggling the switch to the right.
- Click the Click the Load Unpacked button that appears when developer mode is on.
- You are presented with a dialog box that prompts you to select the folder where your extension is located, select the hello-extension folder you created earlier.
- Your browser Immediately updates with the icon you created showing up on the upper right corner where your other installed extensions appear.
- Click on the icon and you should see a very refreshing message waiting for you there :).
Follow the Official documentation to learn how to publish your extension to Github.
Wrapping up on our chrome extension development tutorial:
Chrome extension development is a very interesting area of web development that should fancy any developer. Learning how to make chrome extensions is something very cool. However, proceeding to make awesome extensions would also be beneficial as it could give a good boost to your Resume as a developer.
Hit the clap button to encourage me to write more technical guides and remember to hit the follow button to see when i publish new articles.
Give me a star on github via my profile
Till then, see you in my next medium post!