войти зарегистрироваться

Google Chrome whois

индекс
199,56

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')[].firstChild.nodeValue;
                        document.getElementById('yourrating').innerHTML = req.responseXML.getElementsByTagName('rating')[].firstChild.nodeValue;
                }
        };
        req.send();
}

HTML часть (код из js части вставить между тегами <script></script>):

<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
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru
+27
10 сентября 2009, 23:27
xolvo

комментарии (30)

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

    star.nn.ru/habrakarma.crx

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

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

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

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