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."
I created and installed my extension 4 months ago and now have 99 users, not bad for a network of only 400 members!
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)."
440x280"Provide image that the store can use to promote your item.
Fill the entire region, using square corners and no padding (full bleed).
Use a medium or dark background.
Avoid text in the image as much as possible.
Don’t put white elements along the edges of the image; the edges should be well defined.
Don't use a screenshot.
Your image should display well when reduced to half size."
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.
- icon.png (mentioned above)
- manifest.json (see below)
- 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):
"version": "1.0",
"description": "WHAT DOES YOUR EXTENSION DO",
"browser_action": {
"default_icon": "icon.png", "default_popup": "popup.html"
},
"permissions": []
}
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)
<body><center><span style="font-family: Arial; font-weight: normal; font-style: normal; text-decoration: none; font-size:small;">
NAME OF YOUR EXTENSION OR NETWORK<br /><br />
<A HREF="javascript:void(0)"onclick="window.open('http://YOUR NETWORK/chat/index/popOutWindow','linkname','height=600, width=600,scrollbars=yes, resizable=yes')"><img src='http://YOUR CHAT ICON.png' title='Chat with YOUR NETWORK' alt="Chat" width="20"><br /><font color="#be1176">Chat</font></a>
<br /><br />
<A HREF="javascript:void(0)"onclick="window.open('http://YOUR NETWORK/m','linkname','height=700, width=350,scrollbars=yes, resizable=yes')"><img src='http://YOUR ACTIVITY LOGO.png' title='Latest Activity' alt="Activity" width="17"><br /><font color="#be1176">Latest Activity</font></a>
<br /><br />
<A HREF="javascript:void(0)"onclick="window.open('http://YOUR NETWORK/m/forum/topic/new','linkname','height=450, width=350,scrollbars=yes, resizable=yes')"><img src='http://YOUR SHARE ICON.png' title='Share on YOUR NETWORK' alt="Share on YOUR NETWORK" width="20"><br /><font color="#be1176">Share</font></a>
<br /><br />
<a href="http://YOUR NETWORK" target="_blank"><img src='http://YOUR NETWORK LOGO.png' title='Open YOUR NETWORK' alt="Open YOUR NETWORK" width="40"><br />Open YOUR NETWORK</a>
</span></center>
</body>
</html>
LOAD THE EXTENSION LOCALLY
This is copied from http://ubuntumanual.org/posts/365/how-to-create-a-google-chrome-extension-for-beginners-basics-part-1
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!
Replies
nice tute! I've been wanting to make an extension for Chrome...thanks for sharing
everything is working except for the manifest file... I used Notepad, named it manifest.json but when I load the extension file I am getting a warning saying that the manifest file can't be read. when creating the popup.html file, it changed to a google chrome logo after saving. should the .json file be updating after saving as well? I just read that there might be an issue with Notepad not having the proper plug in? any help would be appreciated.
here is the code I am using (copied from above):
"name": "PennyChatter Stocks",
"version": "1.0",
"description": "Penny Stock Alerts",
"browser_action": {}
"default_icon": "icon.png", "default_popup": "popup.html"
},
"permissions": []
}
and the error I am getting:
This is a great addition and appreciate any help I can get with this. very exciting!!
Make sure that notepad is not changing the file name. It will often add .txt to the end just change it to .json.
it's a text document, but the file name is manifest.json - still getting the same error. I started over with the manifest file, checked the properties to make sure the extension .txt isn't being added... has me scratching my head.