Google ChromeのKarma拡張機能

みなさんこんにちは！







せっかちな人への即時リンク： http : //bit.ly/habrauser



クリックするとポップアップが開きます。中央のボタン（背景タブで開きます）をクリックするか、ポップアップのユーザー名をクリックすると、ユーザーのページに移動できます。



カットの下では、興味のある人のための詳細はほとんどありません。

背景

私は約6年間、非常に長い間habrを読んでいますが、それは常に私にとってそのような何か...最高の社会であり続けています。 私は自分のアカウントを持っていませんでした。登録は招待者のみによるもので、誰も知らなかったため、小さくて取るに足らないと感じました。



しかし、一度Runetで見つけることができないという知識が得られたので、これが幸運をハブで試す良い理由だと判断しました。 熱心ではないが、私は温かく迎えられた。 私は招待に値し、知識を共有し、乾杯しました！ 限られた回数しか投票できないことに少し驚いたので、出てきた数票を慎重に隠しました。



時間が経ち、記事がどんどん増え、Habrがログインしているのをよく読んでいます。 そして、私は私の声が完全になくなっていることに気づきました。 悲しかった。 「人々はどこから声を得るのですか？」 「非常に多くの票がカルマに関するコメントに費やされました！ そして、私はこのストリームの外にいる、私はそれを好むことさえできません！」そして、はい、私はその時にヘルプを読んでいませんでした=）



少し前まで、私は2回目の翻訳後を公開する機会がありました。 彼は人々にいくらか興味があり、私は少し前向きなカルマを得ました。 よろしくお願いします！ tsvetkovpaと一緒に、 私たちはそれがどのように機能するかを考えました、スモークマン、投票数はカルマに依存し、制限は毎日であることに気付きました。 まあ、それはそれを明確にします！



私は、重いhabrasavisimostの兆候を見せ始めました。

依存関係

読むのが著しく熱心になりました 私はコメントのほとんどを読み、トラッカーを見て、投票しました。 しかし、何かが本当に気になりました。 簡単にコメントに投票できるのなら、なぜカルマにも簡単に投票できないのですか？ 別のページに移動する必要がありますか？ 申し訳ありませんが、これはどういうわけか人間ではありません！



私はすべての既存の拡張機能を突っ込んで、似たようなものを見つけましたが、それはカルマ読み取り専用であることが判明し、一般的にはどういうわけか喜ばれませんでした（著者は不快ではありません、これは私見です）。



たぶん私はひどく見ていましたが、自転車の発明への渇望が勝っていました。

自転車

数晩、私は機能するコードを投げました。 Habrahabr API（ahem）はあまりリッチではない（ 私が見つけることができる唯一のもの ）ので、松葉杖を手に入れる必要がありました。 jQuery、 on('click')



、出来上がり！ GETリクエストを介してユーザーのページ全体をプルし（ちなみに、そこから他のどこにもアクセスできませんでした）、自分でhabrain情報の断片をキャッシュして抽出し、スタイルを作成する必要がありました。 ごkarma_vote()



、関数karma_vote()



、 karma_vote()



でのカルマ投票を担当し、ユーザーIDを実際に必要としますが、この関数以外では実際には公開されません。



クラス、メソッド、ajaxを重ね、バックボーンについても考え始めました。



少し後に、私は何かをチェックすることにしました。自転車なしでできるのでしょうか？ 私はそんなに引っ張っているので、なぜユーザーヘッダーを完全に挿入しないのですか？ ああ、なんて素晴らしいことだ！ そして、これと、スタイルとオンクリックで、すべてが自分自身を引き上げました！ レポタ、ジャブがハブに配置されていないだけが残念です。オンデマンドで断片的に引き出され、ユーザーページのスタイル/ロジックはこのページにのみ存在します まあ、大丈夫、問題ありません。 そこには多くのスタイルはありません。私はそれらを陳腐に盗み、コンテンツCSSを介してそれらを接続します。 投票のコードは、ハブからページの最後まで単純に挿入することにしました。

 var script = document.createElement('script'); script.type = "text/javascript"; script.src = src; document.body.appendChild(script);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ハハ いいね！



これにより最適化が開始されました。

最適化

すべてのクラス、すべて自作のレイアウトを見ました。 少ししか判明しなかったので、このためにページにもう一度jQueryコードを実行するように強制しているのを恥ずかしく思いました。 すでにいくつありますか？ くそー、クロムのすべての拡張機能はjQueryを引き付ける必要がありますか？ たぶんある種の明確なものがあるのでしょうか？ もう組み込み済みです！ もちろん、それなしでもできますが、したくありません。



はい、ハブラー自体はjQueryを使用します！ しかし...多分それは何とか使用できますか？



このテーマについてインターネットで少し掘り下げたところ、DOMのみのページでの一般的な拡張機能ではなく、ハブがロードされたスクリプトの裏に乗ってもうまくいかなかったことがわかりました=（



それでは、コンテンツスクリプトから離れましょう。注入についてはどうでしょうか。 私は自分の手でDOMに触れることができるので、なぜ拡張コアをそこにプッシュしないのですか？ そして、ページがそれを起動します。 私が試した：

 script.text = "console.log(jQuery().jquery);";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと、うまくいきました！ パッケージのjQueryを取り除き、ローダーを作成すると、Haberがコードを慎重に実行します！

 (function (chrome) { var request = new XMLHttpRequest(), urlToMain = chrome.extension.getURL('js/main.js'), script; request.open('GET', urlToMain, false); request.send(null); script = document.createElement('script'); script.type = "text/javascript"; script.text = request.responseText; document.body.appendChild(script); }(chrome));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果

スタイルを少しカットし、スタイルと出力コードを絞ると、見たとおりのものが得られました。









読んでくれてありがとう！ この拡張機能が自分以外の誰かに役立つことを願っています=）



スクリーンショットで強調した人に謝罪します。実験的なものが必要です！ =）Habr-国はまだ友好的で自由であると思っていましたが、本当に気になっている場合は見落とすことさえできます。



最後に、habracommunityにいくつか質問をしたいと思います。

• ホバーをやり直すのは理にかなっていますか、それとも選択肢を提供する方が良いでしょうか？
• 強調表示コンテキストを選択する必要がありますか？ たとえば、「コメント内」、「サイドバー内」、「投稿の作成者」
• ユーザーページ全体をドラッグしない方法はありますか？

良い一日を！