Write a Chrome extension in 15 minutes

There are two other attributes you can use instead of browser_action: page_action or theme. These three are mutually exclusive and define what type of extension you’re making. A browser_action extension (the most common type) installs your icon – specified by the default_icon attribute – in the extensions area to the right of Chrome’s address bar.

You can create your manifest using Windows Notepad: you just need to save it with the name MANIFEST.JSON (not MANIFEST.TXT). If there’s an error in the manifest file, you’ll get a relatively helpful message telling you the exact point in the file where the error occurs in terms of line number and column.

If you do get an error, go back and double-check the file. Make sure the commas, quote marks and colons are all in the right places, check you haven’t used square or standard brackets instead of curly braces, and remember that if you open a brace or bracket in almost any type of code file, you must close it again. If all else fails, download our working extension code.

Making it do something

So far our extension does nothing but show an icon in the browser. To make it useful, we need to add another line to the manifest file: the default_popup attribute for the browser action. This simply specifies an HTML file that Chrome will display when you click the icon. It can contain anything a standard HTML page can contain, including complex JavaScript and CSS if you wish. The neat thing about the pop-up is that Chrome automatically sizes it to fit the content, so you can display snippets of information.

We’re going to take advantage of this by creating a “useful snippet” extension. In our case, it’s going to show a pop-up containing colleagues’ office extension phone numbers.

All we need to do is extend the manifest file very slightly, then concoct a simple HTML file with the relevant snippets, plus a bit of CSS styling. The manifest file now looks like this:

{
“name” : “PC Pro Aide Memoire Extension”,
“version” : “0.2”,
“description” : “A replacement for lost brain cells.”,
“icons” : {
“16” : “pcpro_16.jpg”,
“48” : “pcpro_48.jpg”,
“128”: “pcpro_128.jpg”},
“browser_action” : {
“default_icon” : “pcpro_19.jpg”,
“default_popup”: “AideMemoire.html”
}
}

We’ve tidied up the icon code using different sizes of icon for Chrome to display as necessary. The only functional change is the addition of that default_popup line, specifying our aide memoire HTML file. That file looks like this:

And that’s all there is to it. We now have a functioning Chrome extension that’s actually pretty useful if you have little bits of information you always forget during the day. Click the extension’s icon and a little pop-up bubble appears, so the information is always to hand and doesn’t need you to navigate away from what you’re doing.

Chrome extension

Next steps

This is only the tip of the iceberg as far as extensions are concerned, but the simple structure of a manifest file and a few HTML supporting files is the same for almost all extensions. You can get the complete Google documentation for extensions.

Now click here for our step-by-step guide to making your extension work in Google Chrome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.