< Back

Sick of Bookmarks, Add a Simple Google Chrome Extension

My bookmarks list is an unmanageable nightmare. I have a thousand links and nearly all of them are truncated. A select few have made their way into a half-attempted folder structure, which I have since given up on and would be hard-pressed to actually locate. And, to top it all off, is the inevitable vertical scrolling user experience of this monster. I simply don’t have the time nor the will to dig out a vital project URL. Instead, I would rather search through my equally unmanaged GMail account.

So, amidst hours of unproductiveness, I decided to aid my future productivity and write a helpful Google Chrome Extension. My goal, a very accessible and organized list of my current project’s development, production and project management links. Also, since I wanted this working in 5 minutes, I cut out development overhead like datasources or styling. If you want to get all fancy and add some amazing features into your extensions, check out Google’s tutorial for more information.

Here we go!

1. Create a JSON Manifest File

Set up a new directory for your extension files. Within it, you will need to add a file called manifest.json. This file will hold of your extension settings. Mine looks like:

{
  "name": "Active Projects",
  "version": "1.0",
  "description": "This extension has a current list of projects, urls and development environments.",
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "icon.png",
	"popup" : "projects.html"
  }
}

The only really property of note is browser_action. I assigned a icon to the default icon so that Chrome will pull it into its toolbar. Make sure it’s exactly 19 pixels by 19 pixels or else things will start to look funky. Also, specify a HTML page to display when your new icon is clicked (i.e. projects.html).

2. Build out Projects.html

Here, I built a very simple HTML list and link structure.

<style>
body {
	min-width:357px;
  	overflow-x:hidden;
	font: normal 12px/1.5em Arial; 
	color: #666;
}
h1 { font-size: 1.7em; }
h2 { font-size: 1.3em; }
</style>

<h1>Active Projects</h1>

<h2>{PROJECT TITLE}</h2>

<ul>
	<li>
		<a 
			href="http://www.example.com/" 
			onclick="chrome.tabs.create({url : this.href});">{Project Link}</a>
	</li>
</ul>

One item of note is the onclick call. Using Chrome’s Javascript API, I specify that when the link is clicked, it will spawn a new tab rather than redirect the active tab or window.

That’s it

That literally took me 5 minutes to build and ironically, hours to blog about.

Connect with us

Thank You!

We really appreciate your interest in what we do.

We'll get back to you as soon as we can.