Schogini

The iPhone and Android ecosystems are growing rapidly, with Gartner estimating the two platforms combined to sell 25% of smart phones worldwide. Google stated they are activating 100,000 Android devices a day. Apple has sold an amazing 85 million iPhones and iPod touches over the past three years. Internationally, the iPhone platform has significantly more unique devices than Android in the AdMob network.  The ratio of iPhone OS devices to Android devices was 3.5 to 1.  

The chart below compares unique Android and iPhone devices for the US and worldwide.  In the US, there were 10.7 million iPhone devices compared to 8.7 million Android devices.

Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.

Faster - Quick to startup from your desktop and loads webpages in a snap.

One box for everything - Type in the address bar and get suggestions for both search and web pages.

Thumbnails of your top sites - Access your favorite pages instantly with lightning speed from any new tab.

Incognito mode - Don’t want pages you visit to show up in your web history? Choose incognito mode for private browsing.

To start with Google Chrome just have a look at the video posted here! googlechrome

Just started my experimentation with Chrome extensions and got stuck at this point: chrome.tabs.executeScript will just not work!

In the Chrome error console I kept getting this error:

Error during tabs.executeScript: Cannot access contents of url “http://google.com”. Extension manifest must request permission to access this host.

I went through the documentations but, just kept missing the point. And the point is Chrome extensions need to be given explicit permission to access any piece of information whether it is tab data or web page data.

This is the manifest.json which caused the error:

{
“name”: “Gayatri Tab”,
“description”: “Gayatri Tab Tests”,
“version”: “0.1″,
“permissions”: ["tabs"],
“background_page”: “background.html”,
“browser_action”: {
“default_icon”: “testing123.png”,
“default_title”: “test tabs – gayatri”
}
}

And this is the manifest.json that works!

{
“name”: “Gayatri Tab”,
“description”: “Gayatri Tab Tests”,
“version”: “0.1″,
“permissions”: ["tabs", "http://*/", "https://*/"],
“background_page”: “background.html”,
“browser_action”: {
“default_icon”: “testing123.png”,
“default_title”: “test tabs – gayatri”
}
}

See the areas marked yellow. In the working manifest.json we have explicitly given the extension permission to “http://” and “https”//” content.

This is the complete test extension:

manifest.json

{
“name”: “Gayatri Tab”,
“description”: “Gayatri Tab Tests”,
“version”: “0.1″,
“permissions”: ["tabs", "http://*/", "https://*/"],
“background_page”: “background.html”,
“browser_action”: {
“default_icon”: “testing123.png”,
“default_title”: “test tabs – gayatri”
}
}

background.html

<script>
chrome.browserAction.onClicked.addListener(function(tab) {
alert(tab.id + ‘: ‘ + tab.url);
chrome.tabs.executeScript(tab.id, {file: ‘myscripts.js’});
});
</script>

myscripts.js

function myname()
{
alert(‘hello’);
}
myname();

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

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   and select “Extensions” In the page you can see Developer mode which will come up with a + icon  

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.

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.

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