Saturday, February 12, 2011

Create your own google chrome extension

                 Google changed our internet experience by creating an awesome browser, great performance, neat and clever design,fast and more and more. In these days Google opened a web store for Google chrome.extension and applications are the major attractions for Google Chrome.
In this post I would like to discuss about how can we create a simple Google chrome extension for your own twitter posts and mentions




  1. Create a folder any where on your computer where you want to create your extension
  2. create a new text file and named it in to manifest.json and put the following code in that.



{
  "name": "rajagopal_p",
  "version": "1.0",
  "description": "My twitter streams",
  "browser_action": {
    "default_icon": "icon.png","popup":"twitter.html"
  }
}

3. Copy a suitable Icon icon.png in to that folder
4. Create an another text file named twitter.html and put that in to our extension folder.
5.Put the following script in to our twitter.html file


<script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript" ></script> 
<script type="text/javascript" > 
    new TWTR.Widget({
        version: 2,
        type: 'search',
        search: 'rajagopal_p',
        title: 'Rajagopal',
        subject: 'rajagopal_p',
        interval: 6000,
        width: 230,
        height: 300,
        theme: {
            shell: {
                background: '#8ec1da',
                color: '#ffffff'
            },
            tweets: {
                background: '#ffffff',
                color: '#444444',
                links: '#1985b5'
            }
        },
        features: {
            scrollbar: false,
            loop: true,
            live: true,
            hashtags: true,
            timestamp: true,
            avatars: true,
            behavior: 'default'
        }
    }).render().start();
</script>


In this script you can specify the searching Item,title,size,theme etc as you like :)


  1. Load the extension.
    1. Bring up the extensions management page by clicking the wrench icon  and choosing Tools > Extensions.
    2. If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
    3. Click the Load unpacked extension button. A file dialog appears.
    4. 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, as the following screenshot shows.




0 comments:

Post a Comment