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:

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

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.

Enough talk.

Lets down to making our very own chrome extension!

Procedures To Follow When Making An Extension For Chrome

  1. Create the main folder for your Chrome extension
  2. Add the manifest.json file
  3. Adding an icon
  4. Add Your HTML
  5. 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 mkdir hello-extension

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 touch manifest.json

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

  1. As seen in the image above, enable Developer Mode by toggling the switch to the right.
  2. Click the Click the Load Unpacked button that appears when developer mode is on.
  3. 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.
  4. Your browser Immediately updates with the icon you created showing up on the upper right corner where your other installed extensions appear.
  5. 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!

Afolayan Raphael Oluwaseun

Written by

Developer & Digital Growth Hacker. Saving the world one paragraph at a time. Aspiring ethical Hacker and a Wordpress evangelist.

Facebook Developer Circles Lagos

A Tech Community united in knowledge sharing. Visit fb.com/groups/devclagos

More From Medium

More from Facebook Developer Circles Lagos

More on JavaScript from Facebook Developer Circles Lagos

More on JavaScript from Facebook Developer Circles Lagos

How to create Unique URLs in an ExpressJS and MongoDB App

More on JavaScript from Facebook Developer Circles Lagos

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade