To-Do Chrome Extension Part 1 – Project Setup

This is part one of the series on making a to-do extension for Google Chrome.

In this series we will create a simple to-do extension where you can add tasks through a browser action popup. When you have completed a task, you should be able to remove it from the list. The browser action icon should display how many tasks you have left to complete.

This series on Chrome Extensions is aimed towards beginners in extension developing but with basic experience in JavaScript and HTML.

Let’s start with creating a good folder structure for our extension. We know we will store images, HTML, CSS and JavaScript files. We might even use external JavaScript libraries like jQuery. Images, CSS and JavaScript files will go into their own separate folders. Our HTML files will stay in the root folder. This makes the following folder structure:

  • CSS
  • Images
  • JS 
    • Libs

Manifest File

After we have created these folders we will create a manifest.json file that holds metadata about our extension in JSON format. There are two required properties that you need to specify in the manifest file—name and version—but we will go ahead and add a few more that we need for our to-do extension.

Create a manifest.json file and fill in the following information.

{
	"manifest_version": 2,

	"name": "To Do",  
	"description": "A simple To Do extension.",
	"version": "1.0.0",

	"icons": { 
		"32": "images/icon32.png",
		"48": "images/icon48.png",
		"128": "images/icon128.png" 
	},

	"browser_action": {
		"default_icon": "images/icon19.png",
		"default_popup": "popup.html"
	},
	"options_page": "options.html"
}

That is quite a mouthful, but I will break it down row by row. The first three properties are quite self-explanatory so I will go directly to icons section. There are two required icon sizes that you should ship with your extension; these are 48x48 and 128x128 pixels. The 128 pixel icon will be displayed in the install dialog and the 48 pixel icon shows up on the extensions page. I also added a reference to a 32 pixel icon as that is the size the extensions gallery is using.

Next property is browser_action which defines the clickable icon next to the Omnibar in Google Chrome. It needs a default icon with size of 19 pixels. If you link to an image larger than 19 pixels it will be resized to fit. Popup property is the HTML file that will be shown when you click the browser action icon. We will simply call this file popup.html.

Lastly we define a page that will act as a options page, named options.html. Users will be able to access it from the options button at the extensions page.

The manifest file is finished for now, but we need to create a few files that we have referenced in the file.

Creating Necessary Files

Creating a clear and good looking icon is quite challenging so we can use one of the icon-search services available on the web. I’m usually using one called Iconfinder.net which feature a large library of icons and ability to filter on name and size. For our simple extension I found a good icon of which I then created four different sizes (19x19, 32x32, 48x48 and 128x128) and saved them in the images folder.

Now we need a couple of HTML files, namely popup.html and options.html, and their respective JavaScript and CSS files (with the same name). The HTML files should be saved in the root next to manifest.json, JavaScript files in the js folder, and CSS files in the css folder.

We will add some basic HTML 5 markup to the HTML files. Open both popup.html and options.html and paste the following code snippet in each file. Also change {name} to the filename in each file (e.g. “Popup” in popup.html).

<!DOCTYPE html> 
<html> 
<head> 
    <title>{name} - To-Do</title> 
    <link rel="stylesheet" href="css/{name}.css" type="text/css" /> 
    <script src="js/{name}.js" type="text/javascript"></script> 
</head> 
<body> 
    <h1>{name}</h1> 
</body> 
</html>

Running the Extension

extension-loaded Finally we are ready to load the extension into Google Chrome to see if it works. You do this by navigating to chrome://extensions/. Turn developer mode on if it is off. Next click the Load unpacked extension… button. You will be presented with a folder browser. Find the folder you created for the extension, and press OK. The extension should now load and display in the list. A browser action icon should also be visible in the toolbar.

Of course there is no functionality at all in this version of the extension. We will work on that in the next part of this series.

Download the Source

Download To-Do Extension Source (Part 1)

published in Chrome Extensions