Pull to refresh

Karma checker в виде расширения для Google Chrome

Reading time 4 min
Views 1.3K
Так как dev версии Google Chrome поддерживают расширения и я об этом узнал совсем недавно, я решил написать это самое расширение.
Быстро решив, что аддон будет для хабра я начал писать код...

Процесс этот оказался довольно долгим в виду того, что я не сразу познал все тонкости API.

Чтобы начать писать расширение для Chrome, надо всего лишь чуток знаний JavaScript/HTML/CSS — стандартный набор так сказать.
Следующий шаг — это посещение линка с туториалом.

На втором шаге мы выясняем, что для написания нашего расширения нужно минимум два файла: manifest.json и наш произвольно названный *.html файл.
После создания этих двух файлов, кладем их в произвольно названную чистую папку, расположенную, к примеру, на рабочем столе.
Начнем с файла manifest.json:

{
  "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" ]
}

Самое главное в этом файле для нашего конкретного расширения, это строка "permissions": [ "http://habrahabr.ru/" ]
Так как самое главное это XMLHttpRequest, выполняющегося с одного домена (localhost как бы) на другой (habrahabr.ru), нам нужно что-то сделать с Cross Domain issue о как :).
Так вот эта самая строка разрешает нам снять запрет на запросы между двумя доменами.
Ну вот мы плавно и подошли к сути нашего топика.

Если вы еще не забыли, главной фишкой расширения является мониторинг кармы и хабрасилы. Так вот для тех кто не знал, у хабра есть спешал API по адресу http://habrahabr.ru/api/profile/%username%/
В ответ на GET запрос, хабр отдаст нам XML файл такого вида:

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

Ну а дальше все просто. Нам нужно всего лишь парсить XML. Тут есть два способа
Мы можем получить этот файл в виде строки и тогда нам надо парсить строку, а можем получить в виде XML документа и легко получить все что нам нужно из него по средствам стандартных js функций.

JavaScript часть (вписываем свой юзернейм в кавычки в переменной 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 часть (код из js части вставить между тегами ):

<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>

Вот и весь код. Теперь это все надо установить.
Для этого в адресной строке Chrome набираем: chrome://extensions/
После этого нажимаем кнопочку «Load unpacked extention» и выбираем папку с расширением.

Если вы не читали эту статью полность, а сразу перешли к загрузке, то не забудьте вписать свой username в переменную var YOUR_USER_NAME и кавычки не забудьте.

фух… ну вот вроде и все
Download extention.
Tags:
Hubs:
+27
Comments 30
Comments Comments 30

Articles