Karma checker в виде расширения для Google Chrome
Так как dev версии Google Chrome поддерживают расширения и я об этом узнал совсем недавно, я решил написать это самое расширение.
Быстро решив, что аддон будет для хабра я начал писать код...
Процесс этот оказался довольно долгим в виду того, что я не сразу познал все тонкости API.
Чтобы начать писать расширение для Chrome, надо всего лишь чуток знаний Javascript/HTML/CSS — стандартный набор так сказать.
Следующий шаг — это посещение линка с туториалом.
На втором шаге мы выясняем, что для написания нашего расширения нужно минимум два файла:
После создания этих двух файлов, кладем их в произвольно названную чистую папку, расположенную, к примеру, на рабочем столе.
Начнем с файла
Самое главное в этом файле для нашего конкретного расширения, это строка
Так как самое главное это XMLHttpRequest, выполняющегося с одного домена (localhost как бы) на другой (habrahabr.ru), нам нужно что-то сделать с Cross Domain issueо как :).
Так вот эта самая строка разрешает нам снять запрет на запросы между двумя доменами.
Ну вот мы плавно и подошли к сути нашего топика.
Если вы еще не забыли, главной фишкой расширения является мониторинг кармы и хабрасилы. Так вот для тех кто не знал, у хабра есть спешал API по адресу http://habrahabr.ru/api/profile/%username%/
В ответ на GET запрос, хабр отдаст нам XML файл такого вида:
Ну а дальше все просто. Нам нужно всего лишь парсить XML. Тут есть два способа
Мы можем получить этот файл в виде строки и тогда нам надо парсить строку, а можем получить в виде XML документа и легко получить все что нам нужно из него по средствам стандартных js функций.
Javascript часть (вписываем свой юзернейм в кавычки в переменной
HTML часть (код из js части вставить между тегами <script></script>):
Вот и весь код. Теперь это все надо установить.
Для этого в адресной строке Chrome набираем:
После этого нажимаем кнопочку «Load unpacked extention» и выбираем папку с расширением.
Если вы не читали эту статью полность, а сразу перешли к загрузке, то не забудьте вписать свой username в переменную
фух… ну вот вроде и все
Download extention.
Быстро решив, что аддон будет для хабра я начал писать код...
Процесс этот оказался довольно долгим в виду того, что я не сразу познал все тонкости 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.
комментарии (30)