Posts Tagged ‘Chrome’
02
Oct

CloudMagic is a  browser extension (available for Google Chrome and Mozilla Firefox browser) can search your Gmail so quickly that you won’t use the gmail’s search  box any more.

CloudMagic installs within seconds, and once it’s up and running, it appears as a small search bar on the upper right hand side of your Gmail window. Right now, CloudMagic, works only with Gmail and Google Apps e-mail.
More »

, , , , ,

04
Jan

How to create a simple Google chrome extension

This tutorial helps you to go through the easiest way of creating a simple extension for Google’s newly launched browser “Chrome”.  Basically this browser extension adds an icon to Google Chrome Toolbar which when clicked will displays the recent tweets of a Twitter account that you specify: The extension looks like this

Google Chrome Extension

Step1: Basic Requirement (Download Google Chrome Beta)

To develop extensions for Google Chrome you need to get on an early access release channel of Google Chrome. The normal Stable Channel Release of Google Chrome doesn’t yet support extensions (Let’s hope it for the next release)

Download for Windows or Linux: Beta channel

Download for Mac: Dev channel

Step2: Creating and Loading the Extension

  1. Create a folder with your extension name.
  2. Inside the folder create a file with the name “manifest.json” and add this code in it

{

“name”: “Schogini’s Chrome Extension”,

“version”: “1.0″,

“description”: “Learn How to make Extension for chrome.”,

“browser_action”: {

“default_icon”: “icon.png”

}

}

  1. Create an icon with the name given in the code “icon.png”, and save it in the same folder
  2. Load the extension

Click Tools Icon  Google Chrome tools and select “Extensions” In the page you can see Developer mode which will come up with a + icon  Google Chrome Developer Mode

Click on it to open Click the “Load Unpacked Extension Button” and select the folder you created for your extension 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, as the following screenshot shows.

Google Chrome extension installed Properly

Now let’s start with the triggering of button, add this code to the “manifest.json” file.

This code just brings up the popup window when the icon is clicked.

  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  }

Step3: Creating The pop up window

In your extension folder create the file named “popup.html” Here we write the javascript code to display recent 5 tweets from your twitter account Add this code to the file In the second script line in this code, instead of “schogini.json” change it to your twitter name Like this “twittername.json” And the “count=5” mentions the number of tweets which will be displayed in the popup.

<html>

<head>

<style type=”text/css”>

<!– #twitter_update_list li a { font-size:100% !important; font-size:13px !important; } –>

</style>

</head>

<body>

<div><ul id=”twitter_update_list”> <li>Loading Tweets..</li> </ul></div>

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>

<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/schogini.json?callback=twitterCallback2&count=5″></script>

</body>

</html>

Now come back to the browser select the extension manager and click the Reload button to load the changes to reflect.

Google Chrome extension Tutorial

If you see the popup with the tweets. !!!!!! Hooooray you did it

, , , , , , ,