How To: Create Google Chrome Web Extensions

Google Chrome Web Store

Google Chrome Web Store

So you have followed BooyaGadget’s tutorial on How To: Create Google Chrome Web Apps, but you have hit a roadblock. The problem is that you want to create an App for your favorite site, but you are not the owner. Well there is a work-around, it won’t be public, but it will work in your Browser and let’s be honest, Chrome Web Apps are just beautiful glorified bookmarks. That being said, I love them, and I use them everyday so I would like to have all my favorite sites right there with all my Google Chrome Web Apps.

The first thing you will need is your favorite website. In this tutorial I will use ESPN3.com, which is not present in the Google Chrome Web Store. This process will work for all your favorites and once you have done the process once, you will spend more time creating the icons.

  • Step #1

Create a “Manifest” using notepad.  Similar to creating a Web App, you need to copy this code and save it as “manifest.json”

{“name”: “ESPN“,”
description”: “Watch Live Sports Online“,”
version”: “1.0”,”
icons”: {
“128”: “icon_espn.png
},
“app”: {
“urls”: [
http://www.espn3.com
],
“launch”: {
“web_url”: “http://www.espn3.com
}
},
“permissions”: [
“unlimitedStorage”,
“notifications”
]
}

This extension is for ESPN3.com, but if you would like to make changes just edit the bold lines to fit your needs.   The icon must have the same name as the icon that you will create.  The icon must also be 128×128 to work for the extension.  Once you have finished this manifest place it into a folder named for your extension.  In this example I am going to place the manifest into a folder named ESPN3.

  • Step #2
ESPN Watch Icon

ESPN Watch Icon

Create an Icon for your extension.  As mentioned above the icon must be 128 x 128 and named exactly as you have called it out in the manifest.  Typically for commercial products that I am converting to extensions I will do a Google Search for an Icon.  Most companies now have created icons for the numerous Apps that are now floating around in all the different marketplaces.  Feel free to be creative and create one yourself if you like.  When you are finished place the icon in the same folder as your manifest, in this case ESPN3.

  • Step #3

Installing your extension is very simple.  Click on the setting icon for Google Chrome and scroll down until you see Tools.  Under the Tools tab you will see Extensions.  This will open a new tab in Chrome and you will see a list of previously installed Extensions.

HowTo Create Google Chrome Web Extensions (1)

 

Click on “Load Unpacked Extension” and navigate to your created Folder.  Select the folder and click OK.  This will install your extension.

HowTo Create Google Chrome Web Extensions (2)

There it is, open a new tab and your new extension will be there waiting for you.  Click on it to give it a test drive and make sure that it is working properly.  Repeat this process for all your favorite websites that aren’t in the Chrome Web Store.  You can see from my screenshot that I have also created a Hulu Plus extension.  As I said before, you’ll spend more time tracking down or creating icons. Booya!

HowTo Create Google Chrome Web Extensions (3)

Don’t forget for all things Chrome, follow us on Twitter, like us on Facebook, or just subscribe here at BooyaGadget!

Filed Under: ChromebookComputersGoogleGoogle Web AppsStreaming Video

Tags:

About the Author: Booya TRJ is the graphics, news and Sony maniac. A former college track athlete, who now live vicariously through his NCAA football team. If he's not ten years deep in his dynasty then you might catch him rolling some Little Big Planet or polishing of the next adventure in the Uncharted Series.

RSSComments (2)

Leave a Reply | Trackback URL

  1. BooyaCuz says:

    Love it when you teach me the goodies… PLEASE DON’T MAKE ME BUY A CHROMEBOOK !! you’re getting close to it..

    great info, great article.