Karma checker as an extension for Google Chrome

Since the dev versions of Google Chrome support extensions and I found out about this quite recently, I decided to write this extension itself.
Quickly deciding that the addon will be for Habr, I started writing code ...

This process turned out to be quite long in view of the fact that I did not immediately recognize all the subtleties of the API.

To start writing an extension for Chrome, you just need a bit of knowledge of JavaScript / HTML / CSS - a standard set so to speak.
The next step is to visit the link with the tutorial .

In the second step, we find out that to write our extension we need at least two files: manifest.json and our arbitrarily named *.html file.
After creating these two files, put them in a randomly named clean folder located, for example, on the desktop.
Let's start with the manifest.json file:
')

{
"name" : "Habrahabr Karma Checker" ,
"version" : "1.0" ,
"description" : "Simple extension to check karma and rating on habrahabr.ru" ,
"permissions" : [ "http://habrahabr.ru/" ] ,
"toolstrips" : [ "hkc.html" ]
}

The most important thing in this file for our specific extension is the string "permissions": [ "http://habrahabr.ru/" ]
Since the most important thing is XMLHttpRequest, running from one domain (localhost as it were) to another (habrahabr.ru), we need to do something about the Cross Domain issue about how :) .
So this very line allows us to lift the ban on requests between two domains.
Well, we smoothly and came to the essence of our topic.

If you have not forgotten, the main feature of the expansion is the monitoring of karma and habrasila. So for those who did not know, the Habr has the API at the address http://habrahabr.ru/api/profile/%username%/
In response to the GET request, Habr will give us an XML file of this type:

<?xml version = "1.0" ?>
<habrauser >
<login > xolvo </login >
<karma > 1 </karma >
<rating > 1.61 </rating >
<ratingPosition > 11438 </ratingPosition >
</habrauser >

Well, then everything is simple. We just need to parse the XML. There are two ways
We can get this file as a string and then we need to parse the string, but we can get it as an XML document and easily get everything we need from it using standard js functions.

JavaScript part (enter your username in quotes in the var YOUR_USER_NAME variable var YOUR_USER_NAME ):

var YOUR_USER_NAME = '' ;
function check ( ) {
var req = new XMLHttpRequest ( ) ;
req. open ( 'GET' , 'http://habrahabr.ru/api/profile/' + YOUR_USER_NAME , true ) ;
req. overrideMimeType ( 'text/xml' ) ;
req. onreadystatechange = function ( ) {
if ( req. readyState == 4 && req. status == 200 ) {
/*
* Debuging info
*
* console.log(req.responseXML);
* console.log(req.responseXML.getElementsByTagName('karma')[0].firstChild.nodeValue);
* console.log(req.responseXML.getElementsByTagName('rating')[0].firstChild.nodeValue);
*/
document. getElementById ( 'yourkarma' ) . innerHTML = req. responseXML . getElementsByTagName ( 'karma' ) [ 0 ] . firstChild . nodeValue ;
document. getElementById ( 'yourrating' ) . innerHTML = req. responseXML . getElementsByTagName ( 'rating' ) [ 0 ] . firstChild . nodeValue ;
}
} ;
req. send ( ) ;
}

HTML part (insert the code from the js part between the tags):

< html >
< head >
< script >

< / script >
< / head >
< body onload = "check()" >
< img src = "http://habrahabr.ru/i/favicon.ico" >
< div class = "toolstrip-button" onclick = "check()" >
< span > Karma - < strong id = "yourkarma" >< / strong > | Rating - < strong id = "yourrating" >< / strong >< / span >
< / div >
< / body >
< / html >

That's all the code. Now all this needs to be installed.
To do this, in the Chrome address bar, type: chrome://extensions/
After that we press the “Load unpacked extention” button and select the folder with the extension.

If you did not read this article in full, but immediately went on to download, then do not forget to enter your username in the var YOUR_USER_NAME variable var YOUR_USER_NAME and quotes do not forget.

fuh ... well that's all
Download extention .