How to Create a Chrome Extension in 10 Minutes Flat

Originally published at: http://www.sitepoint.com/create-chrome-extension-10-minutes-flat/
about everything you could ever possibly want.

But, have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be or what it would entail? Well, it turns out it is super easy—probably a lot easier than you ever imagined.

In this tutorial I am going to show you how to create a basic Chrome extension in about 5 minutes—no joke!

What we are going to build

I’m pretty obsessed about the speed of my website, http://simpleprogrammer.com, so I often utilize sites like GTmetrix to check my site speed, just to make sure it isn’t slowing down.

I’ll often check other sites that I’m on as well, so I can see how they compare.

Well, wouldn’t it be nice if there was a Chrome extension that allowed you to use GTmetrix to check the site speed of whatever site you happened to be browsing, just by clicking a button?

I checked the Chrome Web Store and there wasn’t an extension that performed this action, so that’s exactly what we are going to build today.

What is a Chrome Extension?

Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.

At a very basic level, a Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. This kind of extension puts a button in the Chrome toolbar that will show an HTML page when clicked and optionally execute some JavaScript.

Chrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts. But for this tutorial we are going to keep things simple.

If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation.

Continue reading this article on SitePoint
1 Like

By chance do you plan to have a follow up with packaging up your extension and submitting it to the Google Web Store?

Great idea. I’ll definitely consider doing one.

2 Likes

I’d really appreciate it. I enjoyed the simplicity of this article and being able to easily create the extension.

I like the idea too, let’s do it. :slight_smile:

Assuming of course there’s enough for a full article.

What sort of IDE do you recommend?

If I were to create a chrome extension, package it and upload it to the chrome store, how would you recommend monetizing this or using its popularity to drive my public exposure, i.e. promote my personal brand? Other than associating a website with my dev profile in the chrome store (which is very subtle and probably wont be noticed) charging for the extension would most likely make people less inclined to obtain it so this does not appear to me to be a good approach.

Great idea thank you for sharing the valuable information.

Any IDE you would use to do web development. For me, I just used Sublime Text or Visual Studio.

I agree. I don’t think you’ll make much money charging for an extension—at lest not directly.

Just a little code remark: chrome.tabs.getSelected is deprecated.

And you should use chrome.tabs.query({active: true})

See https://developer.chrome.com/extensions/tabs#method-getSelected

Just to be safe. Anyways, nice short tutorial!

Great article, everything is clear!
I want to convert a site’s rss feed to Chrome Extension. Something similar to this - https://chrome.google.com/webstore/detail/fox-news/pamidlfalnpbkhdhbbepaibgehibgmna?hl=en-US
I looked for how to do this, but did not find. Maybe you can help me?

Try Chrome Dev Editor app for developing -
https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en-US

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.