How to Create a Chrome Extension for your Network

I really debated with myself on whether or not to share this because I think its amazingly cool, but my site would not be what it is if it wasn't for me sucking up free tips from people willing to share so here it is :). Plus, I'm hoping if you guys think of some cool ways to utilize this, you'll share them with me.

If you use Google Chrome as your browser, you may be familiar with Extensions. Google describes them as"Extensions are extra features and functionality that you can easily add to Google Chrome. By using extensions, you can customize Google Chrome with features you like, while keeping your browser free of things that you don't use."

Here is a video of what I've created (If you can't see it, here's the direct link:

PREPARE
You will need some preparation before creating your extension. Several graphics related to your Network will be required at different steps during the process. I will try and list the minimum required here. I like .png files, because they look good and can have transparent backgrounds, but .gif and .jpg as well as others could work.


16x16 (Important, name this one icon.png) this will be used as the image that appears in the browser toolbar.


128x128 Use a light background, a simple image and no text. This will show up in a blue box for your extension in the Chrome Web Store. "Upload an icon image that represents the item. The image you provide is used to generate images in other sizes."


1200x800 Screen shot - You'll have to create this one after the draft of the extension has been created.
"Provide at least 1, and preferably 4 or 5 screenshots of your app. If your app supports multiple locales, you can provide locale-specific screenshots. Your screenshot should have square corners and no padding (full bleed)."


480x240 I have not seen where this one appears, Google is requiring it for a new format in the future.
"Fill the entire region, using square corners and no padding (full bleed).
Use a medium or dark background and light text.
Don’t put white elements along the edges of the image; the edges should be well defined."


20x20 Icons for Chat, Latest Activity, Share and a Network mini-logo. - These are only if you want to use the same features in your extension that I created and am demonstrating in this tutorial.

Now, create a new folder on your computer for Extensions. You are going to put three items in the is folder.

1. icon.png (mentioned above)
2. manifest.json (see below)
3. popup.html (see below)

MANIFEST.JSON
Open Notepad to create a text file and name it manifest.json. Paste the following, replace the CAPS with your information (this text will be seen by the public):

POPUP.HTML
You can put whatever you want here, you just need to know how. The extensions available are way beyond my realm of knowledge so I used some tricky little links to Ning pages in a way you may have never considered. If you want to copy mine, as shown in the video, here is the code to paste into a text document and save as popup.html (again replace CAPS with your info)

NAME OF YOUR EXTENSION OR NETWORK



Chat





Latest Activity





Share





Open YOUR NETWORK

LOAD THE EXTENSION LOCALLY
This is copied from http://ubuntumanual.org/posts/365/how-to-create-a-google-chrome-ext...
Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions or type chrome://extensions
Look for Developer mode option present in the right top corner. Click it if Developer mode has a + by it, to add developer information to the page. The + changes to a -, and more buttons and information appear along with the existing extensions list.
Now you see 3 buttons in Developer mode: Load unpacked extension, Pack extension. Update extensions now
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.
If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page.

Now your extension should be running on your computer, test it, try all the links make sure everything looks and acts just the way you want it to before you share it with the world.  Now is also the time to make your screen shots.

LOAD THE EXTENSION FOR THE WORLD

Here is what my extension looks like in the webstore. Note: Google charges a one time $5.00 fee per extension. 
1. Create a .zip file of the three items in your extensions folder.
2. Go to https://chrome.google.com/webstore/developer/dashboard and login with your Google credentials.
Click Add new Item and go to the file you created in zip format and click Upload.
Here's where you'll need the other images I warned you about. Just follow the instructions from Google carefully, there are scroll over tips on most steps and it gives you a chance to preview your work before publishing. It's also fairly easy to comeback to your Developers Dashboard and make edits when needed.

I hope that you enjoy this tip, its a labor of love for sure! I've started a wishlist of things I would like to figure out how to add to mine, so if you find anything cool, please let me know!