Google Chromeの開発バージョンは拡張機能をサポート
しており、最近私がそれを
知ったので、この拡張機能を書くことにしました。
アドオンがHabrにどのようなものになるかをすぐに判断して、コードを書き始めました...
このプロセスは、APIのすべての複雑さをすぐに認識しなかったという事実を考慮すると、かなり長いことが判明しました。
Chromeの拡張機能の作成を開始するには、JavaScript / HTML / CSSの知識が少し必要です。いわば、標準セットです。
次のステップは、
チュートリアルのリンクにアクセスすることです。
2番目のステップで、拡張機能を作成するには少なくとも2つのファイルが必要であることがわかります
*.htmlファイルと任意の名前の
*.htmlファイルです。
これらの2つのファイルを作成したら、デスクトップなどにあるランダムな名前のクリーンフォルダーにそれらを配置します。
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/" ]という行
"permissions": [ "http://habrahabr.ru/" ]最も重要なのはXMLHttpRequestであり、これは1つのドメイン（つまりローカルホスト）から別のドメイン（habrahabr.ru）に実行されるため、
方法についてはクロスドメインの問題を解決する必要があります。
この同じ行により、2つのドメイン間のリクエストの禁止を解除できます。
さて、私たちはスムーズにトピックの本質に近づきました。
まだ忘れていない場合、拡張機能の主な機能はカルマとhabrasilaの監視です。 そのため、知らない人のために、habrはhttp://habrahabr.ru/api/profile/%username%/でAPIを急いで持っていました
GETリクエストへの応答として、Habrはこの種類のXMLファイルを提供します。
<?xml version = "1.0" ?>
<habrauser >
<login > xolvo </login >
<karma > 1 </karma >
<rating > 1.61 </rating >
<ratingPosition > 11438 </ratingPosition >
</habrauser >
それでは、すべてが簡単です。 XMLを解析するだけです。 2つの方法があります。
このファイルを文字列として取得してから、文字列を解析する必要がありますが、XMLドキュメントとして取得し、標準のjs関数を使用して必要なものをすべて簡単に取得できます。
JavaScriptパート（
var YOUR_USER_NAME変数
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/その後、「アンパックされたエクステンションをロード」ボタンをクリックして、拡張子が付いたフォルダーを選択します。
この記事全体を読んでおらず、すぐにダウンロードを
var YOUR_USER_NAMEした場合は、
var YOUR_USER_NAME変数
var YOUR_USER_NAMEユーザー名を入力することを忘れないでください。引用符を忘れないでください。
ふう...まあ、それだけです
拡張機能をダウンロードします。