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

    Так как 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.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 30

      0
      что-то у меня перестало работать ((
        0
        … getElementsByTagName('karma')[]… пропустили 0 в статье, а в исходниках есть.
          0
          это что то с хабрапарсером не так
          а не работало у меня из-за невнимательности
        +9
        Хорошая статья!
        И у меня есть свой «карма чекер» с блэкджеком и шлюхами:

        star.nn.ru/habrakarma.crx

        Отличается только тем, что если пользователь авторизован, то он автоматически узнаёт %username% и ещё раз в минуту обновляет рейтинг.

        Да, кстати, сначала забыл про API хабры и выпарсивал значения из html-кода страницы профиля…
          0
          супер!
          Вот то, что я хотел автору предложить ;) сделать инсталятор и чекать сессию ;)
            0
            Сделаю мб + надо бы добавить возможность обновления
              0
              Да, обновление бы. А еще хорошо, чтобы выводило позицию в рейтинге.
              А еще можно прикрутить max и min значения кармы, как в кармографе.
              Слова «карма» и «рейтинг», привычнее читать на русском, но это можно и самому поправить, без всяких знаний. :)
            +3
            Starrow, вам однозначно кармический зачёт. ИМХО, это идеальное расширение — само встаёт, вопросов никаких не задаёт, сразу показывает что должно.

            Хотя я им вряд ли буду пользоваться, т.к. смотреть постоянно карму как-то… хм… странно в общем. Но сам продукт получился добротный, за что и плюс :)

            Пишите ещё! :)
              +3
              с блэкджеком и шлюхами
              Нашёл и то и другое :) Вы ещё и пасхалки не забыли вложить :)
                0
                и как я не додумался сделать такой интерфейс цветной ))
                  0
                  Спасибо.
                  +1
                  лучше бы ratio checker сделали для торрентов.
                    0
                    это было бы действительно полезно!
                      +2
                      Я считаю, что рейтинг на торрентах — это не круто :)
                      • UFO just landed and posted this here
                          –1
                          Ну ээ… Смысл не в том, чтобы постоянно смотреть на карму, а в том, чтобы изредка глянуть и испытать гордость или не испытать ;)
                      0
                      Есть уже для torrents.ru https://chrome.google.com/extensions/detail/llgkaiogcofeeaogliggldkbcfiocmin
                    +2
                    если писать что-то более сложное с проверкой по таймеру, нужно не забывать о Background Pages.
                    не комильфо для каждой копии toolstrip'а (читай — окна GH) вешать по таймеру и отдельному js'у.
                      +1
                      Начало положено :)
                        0
                        поставил, классно, спасибо вам
                          +4
                          Было бы правильней назвать расширение не карма чекер, а карма-дрочер. Не дрочерам такое не нужно.
                          Хотя автору за небольшой мануал по созданию расширений спасибо.
                            0
                            Кто отважится сделать подобную хабрапанельку для лисы?
                              +1
                              Че там делать то? Jetpack в руки и все в общем. Мой код легко переносится туда.
                                0
                                я видимо, слишком упорот, чтобы понять, как в jetpack сваять extension
                                  0
                                  я этим занимался как-то
                                  Месяца три назад. мож как нибудь потом напишу мануальчик и для jetpack
                              0
                              Взял на себя смелость немного изменить расширение.
                              Добавил позицию и написал по-русски все названия.
                              Скачать расширение
                                0
                                попробовал тоже наваять плагин, вот тут можно найти — github.com/itrelease/chrome.twitit/tree/master. Позволяет отпарвлять сообщения в твиттер =)
                                  0
                                  спасибо за пример и пояснения.
                                    –1
                                    спасибо хабрачеловеку xolvo за мануал.
                                    разобрался и сделал свою скромную версию хабра-кармо-чекера

                                    Only users with full accounts can post comments. Log in, please.