How to create a Google Chrome extension

This simple example serves to show how you can create your own bespoke Goggle Chrome extension using HTML, Javascript and JSON.

With Extension Installed

When our extension is installed it displays an icon to the left of the favourites star in the URL box (our icon in this case is a blue square with 3D style glasses) and shows a JavaScript alert to the user if the tab is browsing my website http://stevenhollidge.com.

There are two types of extensions:

  Browser Extension (notice the icons to the right of the URL box, these browser extensions run all the time)

  Page Action (which is what this example happens to be)

The source code consists of a JSON manifest file, an HTML file containing some JavaScript and three icons:

Step 1: Download and Install Google Chrome for Developers

Step 2: Create manifest.json file

Create an empty folder then add a file called manifest.json, here’s my version:

Step 3: Add background.html file

Step 4: Add your icon files

Step 5: Upload your extension to Chrome

Open Chrome and navigate to Chrome://extensions, then click the “Load unpacked extension…” button and select the folder containing your extension files.

Debugging your extension

You can debug your Chrome extension by navigating to chrome://extensions (see screenshot above) and click the background.html link below Inspect active views which will open Google Developer Tools where you can place breakpoints to step through your code:

You can download the source code here:

http://stevenhollidge.com/blog-source-code/ChromeExtension-CheckForMyWebsite.zip