With the introduction of extensions, Google Chrome became even more agile and powerful.
In this tutorial, we are going to create a simple extension, which puts a small icon next to Chrome’s address bar, and, when clicked, will fetch HACKS N CRACKS RSS feed and display a fancy preview of our latest POSTS.
First a few words about extensions.
How Extensions Work
Extensions in Google Chrome are basically webpages. You have javascript files, stylesheets and images. You can even use JavaScript libraries like jQuery.The extensions are, however, treated a bit differently than your regular webpage, which is displayed in the browser. You can have access to all the opened tabs, to the user’s browsing history, you can manipulate all the pages that are opened, send AJAX requests to any website and much more.
You also have the benefit (or the limitation) that your extension runs only on one browser. You can forget all compatibility issues and embrace Google Chrome’s hot new HTML5 features.
Developing extensions
Extension are packed in a .crx file (arenamed zip file) but during development, you can map your working folder as an extension. This way you can quickly change and deploy code without the need of repackaging.This is done by opening the extension page (type chrome://extensions/ in the address bar, or click Wrench icon > Extensions), and clicking Developer mode > Load unpacked extension.. on the page. After you make a change to the extension, just hit the Reload link below it.
After you’re done developing, click Pack extension.. and a crx file will be created for you. You can serve this file from your site and enable your site’s visitors to install it.
Google Chrome is by far the easiest browser to make extensions for, as you will see from the steps below.
A note about debugging: To debug your extension, right-click on your extension’s icon, next to the address bar, and choose Inspect popup. You can also check out this tutorial.
Step 1 – Manifest.json
The first step in creating an extension, is mapping a folder on your hard drive as an extension (as explained the above). You are going to put all your files in this folder.The only thing required from your extension by Chrome, is the manifest.json file. This is a text file, which holds configuration settings in the form of a json object.
Here is the one we are going to use:
{
"name": "Hacks N Cracks Extension",
"version": "1.0",
"description": "Recent posts.",
"icons":{
"128":"icon_128.png"
},
"browser_action": {
"default_icon": "icon.gif",
"popup": "HACKSNCRACKS.html"
}
}
In this file we are specifying the name of the extension and a number of other options, such as browser actions and permissions.
In browser_actions, we put settings that are in relation with the browser window. The popup property tells Chrome, that we are going to show HACKSNCRACKS.html as a popup. There are a number of settings you can put in browser_actions. You can read more on Google Chrome’s Extension documentation.
For this extension we do not need access to currently opened pages, nor manipulating tabs and windows. If we needed those, however, we would need to include a permissions property, with the addresses of the pages.
For more information about the manifest file, refer to Google Chrome’s documentation.
Step 2 – HTML 5
As mentioned above, we told Chrome that Hacks-N-Cracks.html is going to be opened as a popup. This is a regular html file, complete with stylesheets and js files.And as Google Chrome has a really good support for HTML5, we can code Hacks-N-Cracks.html in it. You could, however, use any HTML version you normally code your sites with.
Hacks-N-Cracks.html
<!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery.min.js"> </script> <script src="script.js"> </script> </head> <body> <h1> Latest Posts On Hacks N Cracks</body> </html>As you can see, we are addressing the css and js files directly. Chrome will include them for us. Just as if we are working on a regular webpage.
Step 3 – CSS3
As the extension is rendered Google Chrome, we do not need to limit ourselves with the least common denominator when it comes to CSS3 support. This is why we can afford to use fancy rules like -webkit-box-reflection and -webkit-gradient.
*{
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:12px;
color:#666;
/* A webkit gradient: */
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
text-shadow:1px 1px 0 white;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
.tutorial{
width:500px;
padding:10px 20px;
margin-bottom:10px;
}
img{
width:100px;
height:100px;
float:left;
/* Webkit CSS3 Reflection */
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(rgba(255, 255, 255, 0.3))) 0 0 0 0 stretch stretch;
}
-webkit-box-reflect creates a pure CSS reflection under the thumbnail images. It takes a number of parameters to generate the reflection – position of the reflection, offset from the bottom of the image, and a mask (which is defined with a gradient).styles.css – Part 2
p,a{
padding:10px 0 0 120px;
display:block;
}
a,a:visited{
color:#09F;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1{
/* Webkit gradient: */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
border-bottom: 1px solid #F0F0F0;
font-size: 24px;
font-weight: normal;
margin-bottom: 30px;
padding: 30px 0px;
text-align: center;
text-shadow: white 0px 1px 1px;
}
h2{
font-size:24px;
font-weight:normal;
right:40px;
padding-left:120px;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
In the second part of the code we are also using a gradient, but this time as a background for the h1 element.
Step 4 – jQuery
The JavaScript is executed as if it was part of a regular web page. This means that we can include the jQuery library and define a $(document).ready() function as we would normally do in a web project.Clicking the extension icon has the same effect for the scripts on the page, as opening the page in a browser.
Inside $(document).ready(), we fetch the latest results from Hacks N Cracks’s RSS feed, with the help of Yahoo’s YQL API. It allows us to use an SQL-like syntax to fetch data in a JSON format.
After fetching the data, we generate the HTML markup and include it in Hacksncracks.html. We also save it to localStorage as a simple caching solution. localStorage is a simple way to save persistent data (it survives between page loads). This makes the experience of using the extension a lot faster.
script.js
$(document).ready(function(){
var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/blogspot/HACKSNCRACKS/' LIMIT 3";
// Storing the seconds since the epoch in now:
var now = (new Date()).getTime()/1000;
// If there is no cache set in localStorage, or the cache is older than 1 hour:
if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
{
$.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){
// msg.query.results.item is an array:
var items = msg.query.results.item;
var htmlString = "";
for(var i=0;i\
'+tut.description+'
\
Read more\
'; } // Setting the cache localStorage.cache = htmlString; localStorage.time = now; // Updating the content div: $('#content').html(htmlString); },'json'); } else{ // The cache is fresh, use it: $('#content').html(localStorage.cache); } });This structure is made available to us in the msg variable on line 11 of script.js.
With this your first Google Chrome extension is complete!
Conclusion
You can read more about extensions (including advanced features not covered in this tutorial) on Google Chrome’s Extension documentation page. I hope that this tutorial has given you a great start in extending the browser’s functionality.What do you think? Would you make a Chrome extension for your website?
Seems this a hard tutorial than download our packages -
You may make changes in this package and than make your extension!!
0 comments:
Post a Comment