Tag Archives: Web Apps

Last week I decided I was going to switch to Firefox 4 as my default web browser. I love Google Chrome, but Firefox is highly customizable compared to what I can do with Chrome. Developer tools are a big reason I wanted to switch to Firefox. Because of the limitations of Chrome, developer tools simple aren’t as powerful in Chrome as they are in Firefox. I soon realized a big problem with Firefox: memory management. With Chrome, I never worried about restarting my MacBook and went for months without a single reboot. When using Firefox, I’d notice my computer slowing down every couple of days and the only thing that seemed to remedy the problem was a reboot of OS X. I’ve since gone back to Chrome and it’s like a breath of fresh air. It just works, it’s fast and it doesn’t have memory management issues.

There are some things that really frustrate me about Chrome, though. I like the idea of the Chrome Web Apps. Chrome Web Apps are basically just a link to a web page that show up as big icons on your “new tab” page. They have some options regular bookmarks don’t have; the most useful for me is the option to “open as pinned tab”. I love the way Firefox 4 did this. Basically you just right-clicked the tab and chose “pin as app tab”. That not only pins the tab, but every time you start Firefox, your pinned tab is automatically launched.

My first thought was “how can I open bookmarks as pinned tabs in Chrome?” After some searching, I didn’t come up with any good solutions. My next thought was “I’ve seen people bookmark sites using Google Web Apps. How do I create my own Google Web App?” This eventually led me to a “Installable Web  Apps” tutorial by Google. It turns out it’s super-simple to create a bookmark to any site by creating your own installable web app. Here’s how…

Bookmark Your Favorite Site by Creating an Installable Chrome Web App

Let’s say you want to add a Chrome Web App that links to the Peach Web Design homepage and you want that link to open up as a pinned tab when you click it. Easy! Follow these instructions…

1. Create a folder and give it a name. I’m going to call my folder “peach_app”.
2. You need two files in that folder:
   1. A text file with the name “manifest.json”. Paste the following code in your text file (the areas that you need to customize for each new app are [highlight]highlighted[/highlight]):
{
"name": "[highlight]Peach Web Design[/highlight]",
"manifest_version": 2,
"version": "1",
"icons": { "128": "[highlight]peach_icon.png[/highlight]" },
"app": {
"urls": [
"http://[highlight]pickpeach.com[/highlight]/"
],
"launch": {
"web_url": "http://[highlight]pickpeach.com[/highlight]/"
}
}
}
   2. A 128×128 .png image with whatever image you want to use as the icon. Google Images is really useful for finding images exactly the size and type you need. You’ll notice in the code above I used “peach_icon.png“.
3. You’ve created your first Chrome Web App! Now you need to install it:
   1. Launch Google Chrome (my current version is Chrome 10.0).
   2. In the address bar, paste: chrome://extensions/
   3. At the top-right of the page, click “Developer Mode”
   4. Click the “Load unpacked extension…” button.
   5. Select the folder you created, in this case, “peach_app”.

That’s it! You should now see your new web app icon when you open a new tab. If you want to open the web app as a pinned tab, right click on the icon and select “Open as pinned tab”.

UPDATE: Updated for compatibility with “manifest_version 2″.