Schogini

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