chrome - FORUM - Ning Creators Social Network2024-03-28T19:51:19Zhttps://creators.ning.com/forum/topics/feed/tag/chromeHow to Create a Chrome Extension for your Networkhttps://creators.ning.com/forum/topics/how-to-create-a-chrome-extension-for-your-network2011-12-30T16:00:50.000Z2011-12-30T16:00:50.000ZKatie McKayhttps://creators.ning.com/members/KatieMcKay<div><p> </p>
<p> </p>
<p>If you use Google Chrome as your browser, you may be familiar with Extensions. Google describes them as<i>"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><br />
I created and installed my extension 4 months ago and now have 99 users, not bad for a network of only 400 members!</p>
<p><br />
Here is a video of what I've created (If you can't see it, here's the <a rel="nofollow" href="http://youtu.be/j8DWbWLcCcg" target="_blank">direct link</a>):</p>
<p> <iframe width="640" height="510" src="http://www.youtube.com/embed/j8DWbWLcCcg?rel=0&hd=1&wmode=opaque" frameborder="0"></iframe></p>
<p> </p>
<p><font size="4"><u>PREPARE</u></font><br />
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.<br />
<br />
<br />
<b>16x16</b> (Important, name this one icon.png) this will be used as the image that appears in the browser toolbar.<b><br /></b><br />
<br />
<b>128x128</b> 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. <i>"Upload an icon image that represents the item. The image you provide is used to generate images in other sizes."</i><br />
<br />
<br />
<b>1200x800</b> Screen shot - You'll have to create this one after the draft of the extension has been created.<br />
<i>"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)."</i><br />
<br />
<br />
<b>440x280</b><i>"Provide image that the store can use to promote your item.<br />
Fill the entire region, using square corners and no padding (full bleed).<br />
Use a medium or dark background.<br />
Avoid text in the image as much as possible.<br />
Don’t put white elements along the edges of the image; the edges should be well defined.<br />
Don't use a screenshot.<br />
Your image should display well when reduced to half size."</i><br />
<br />
<br />
<br />
<b>20x20</b> 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.<br />
Now, create a new folder on your computer for Extensions. You are going to put three items in the is folder.</p>
<ol type="1">
<li>icon.png (mentioned above)</li>
<li>manifest.json (see below)</li>
<li>popup.html (see below)</li>
</ol>
<p><font size="4"><u>MANIFEST.JSON</u></font><br />
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):</p>
<div class="success">"name": "NAME YOUR EXTENSION",<br />
"version": "1.0",<br />
"description": "WHAT DOES YOUR EXTENSION DO",<br />
"browser_action": {<br />
"default_icon": "icon.png", "default_popup": "popup.html"<br />
},<br />
"permissions": []<br />
}</div>
<p> </p>
<p><font size="4"><u>POPUP.HTML</u></font><br />
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)</p>
<div class="success"><html><br />
<body><center><span style="font-family: Arial; font-weight: normal; font-style: normal; text-decoration: none; font-size:small;"><br />
NAME OF YOUR EXTENSION OR NETWORK<br /><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 /><br /><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 /><br /><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 /><br /><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><br />
</span></center><br />
</body><br />
</html></div>
<p> </p>
<p><font size="4"><u>LOAD THE EXTENSION LOCALLY</u></font><br />
This is copied from <a rel="nofollow" target="_blank" href="http://ubuntumanual.org/posts/365/how-to-create-a-google-chrome-extension-for-beginners-basics-part-1">http://ubuntumanual.org/posts/365/how-to-create-a-google-chrome-extension-for-beginners-basics-part-1</a><br />
<em>Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions or type chrome://extensions</em><br />
<em>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.</em><br />
<em>Now you see 3 buttons in Developer mode: Load unpacked extension, Pack extension. Update extensions now</em><br />
<em>Click the Load unpacked extension button. A file dialog appears.</em><br />
<em>In the file dialog, navigate to your extension's folder and click OK.</em><br />
<em>If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page.</em></p>
<p>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.</p>
<p><font size="4"><u>LOAD THE EXTENSION FOR THE WORLD</u></font></p>
<p><a rel="nofollow" target="_blank" href="http://chrome.google.com/webstore/detail/megndjgmkiipgffpbknnnblcdeagfinc">Here</a> is what my extension looks like in the webstore. Note: Google charges a one time $5.00 fee per extension.<br />
1. Create a .zip file of the three items in your extensions folder.<br />
2. Go to <a rel="nofollow" target="_blank" href="https://chrome.google.com/webstore/developer/dashboard">https://chrome.google.com/webstore/developer/dashboard</a> and login with your Google credentials.<br />
Click Add new Item and go to the file you created in zip format and click Upload.<br />
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.</p>
<p><span style="color: #ff0000;">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, <strong>so if you find anything cool, please let me know</strong>!</span></p>
</div>How-to Create A Google Chrome Web App for Your Ninghttps://creators.ning.com/forum/topics/howto-create-a-google-chrome2011-02-27T22:55:06.000Z2011-02-27T22:55:06.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span style="font-weight: normal;">In the past, i showed you <a target="_self" href="http://creators.ning.com/forum/topics/how-to-turn-your-network-into">how to create a desktop extension for your Ning network using chrome</a>, but that was just too easy. Now I am going to show you a trick that takes only a few minutes and in the end you'll have a Google Chrome Web App of your Ning network and can submit it to the Chrome Web Store for your members to download and use. Here is a look at the finished product as seen in the Google Chrome Browser (along with a custom theme I made for my <a rel="nofollow" target="_blank" href="http://landsurveyorsunited.com">network for land surveyors</a>, which may become a future how-to post):</span></p>
<p><span style="font-weight: normal;"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/545879?profile=original"><img class="align-center" width="350" src="http://storage.ning.com/topology/rest/1.0/file/get/545879?profile=RESIZE_480x480"></a><br></span></p>
<p><span class="font-size-5" id="more-11140"> What the heck is a Chrome Web App?</span></p>
<p>You can create application shortcuts to websites that you regularly visit, as well as apps that you've installed from the <a rel="nofollow" href="http://www.google.com/support/chrome/bin/answer.py?answer=1047776">Chrome Web Store</a>. These shortcuts can be placed on your computer desktop and menus for quick and easy access.</p>
<p><span class="font-size-5">What is required to make a CWA?</span></p>
<p>A Chrome Web App requires two components, the Manifest and an Icon.</p>
<p>The <strong>Manifest</strong> is a JSON file with the name<strong>manifest.json</strong></p>
<p>The <strong>Icon</strong> is a 128px x 128px image that will be used on the New Tab page.</p>
<p>To create the Manifest, copy the following into a text editor like Notepad or TextEdit:</p>
<p>{<br> "name": "Your-Network-Name",<br> "description": "Your Description of Your Network",<br> "version": "1.0",<br> "icons": {<br> "128": "128.png"<br> },<br> "app": {<br> "urls": [<br> "http://www.yournetwork.ning.com/"<br> ],<br> "launch": {<br> "web_url": "http://www.yournetwork.ning.com/"<br> }<br> },<br> "permissions": [<br> "unlimitedStorage",<br> "notifications"<br> ]<br> }</p>
<p> </p>
<p>You will need to make the appropriate changes (replace text and urls with red line beside them with your own) to the areas indicated below (name, description, urls, and launch):</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/545926?profile=original"><img class="align-center" width="470" src="http://storage.ning.com/topology/rest/1.0/file/get/545926?profile=original"></a></p>
<p>Once this is done, save the file as <strong>manifest.json</strong> (NOT manifest.json.txt!!!)</p>
<p>Next, you need to have created an icon for your web app. You can use any graphics application such as photoshop or GIMP or web app that allows you to save it as a 128×128 png file. Save the file with the name 128.png.</p>
<p> </p>
<p>NOW...Create a new folder somewhere on your computer and give it a name (connecting the words in the name with either an _ or - for example: Your_Network )and give it the name that you will call your Web app and place both the manifest and icon files inside the folder.</p>
<p><strong>Now it’s time to install the Web App into Chrome.</strong></p>
<p>1. Open Google Chrome.</p>
<p>2. Click the <strong>wrench</strong> in the upper-right corner of the application.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/gprint_1.jpg"></p>
<p>3. Click <strong>Tools</strong> and select <strong>Extensions</strong>.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_ext1.png" title="chrome_ext" width="450" height="398" class="alignnone size-full wp-image-11150"></p>
<p>4. On the right side of the Extensions page, click the <strong>+</strong> that is next to Developer mode.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_devmode.png" title="chrome_devmode" width="151" height="47" class="alignnone size-full wp-image-11143"></p>
<p>5. Click the <strong>Load unpacked extension</strong> button.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_loadext.png" title="chrome_loadext" width="401" height="158" class="alignnone size-full wp-image-11144"></p>
<p>6. Browse to the Web App’s folder and click <strong>OK</strong>.</p>
<p>BOOM!! Your web app should now be created for your network, any errors are likely a manifest typo. Go back and check the manifest for any missed character(or an unnecessary ones).</p>
<p>Now when you click on the<strong> New Tab page in Chrome Browser</strong>, your new web app will appear with the others as shown above.</p>
<p> </p>
<p>Whew..this post got long....i will create a follow up post soon to show you how to submit it to the Chrome Web store and share with your members. For now, you have all you need to run your new app on your computer.</p></div>