今日のQiitaハッカソンに参加するにあたり,最初はChrome拡張を作ろうと思ってました(実際は違うものを作った).
卑怯にも昨晩のうちに機能をひとつ実装済みでした.
Qiitaのお勧めユーザ一覧のページには,アクティブユーザもそうでないユーザも表示されますが投稿をしているユーザのみ表示するというボタンを追加する,という機能です.
せっかくなので公開します.
https://github.com/daisy1754/oreore-qiita-extension
主なソースコードはだいたい下の2つ
qiita_util.js
const API_END_POINT = 'https://qiita.com/api/v1';
var qiita = {};
function getToken(onCompletion) {
$.post(API_END_POINT + '/auth',
{url_name:'name',
password:'pass'},
function(data){
qiita.token = data.token;
onCompletion(qiita.token);
});
}
function useGETAPI(api, token, callback) {
var data = {};
if (token)
data.token = token;
$.get(API_END_POINT + api, data, callback);
}
recommended_users.js
getToken(function(token){
var usersManager = new RecommendedUserManager(token);
var activeUserButton = $("<div>");
activeUserButton.addClass('button');
activeUserButton.text("投稿をしているユーザのみ表示する");
activeUserButton.click(function(){usersManager.getUserNames();});
$("body").append(activeUserButton);
});
var RecommendedUserManager = (function () {
function RecommendedUserManager(token) {
this.token = token;
}
RecommendedUserManager.prototype.getUserNames = function () {
$("#user-follow-list-box").find("a").each(
(function(manager) {
return function(){
var userName = $(this).attr('href');
useGETAPI(userName, manager.token, manager.updateRecommend($(this)));
};
})(this));
};
RecommendedUserManager.prototype.updateRecommend = function(targetElement) {
return function(data) {
if (data.items == 0) { // User is read-only
targetElement.parents("li").remove();
}
};
};
return RecommendedUserManager;
})();
今日ハッカソンで出されてたChrome拡張は,どれもQiitaクライアント的な意味合いが強かったように思います.
上のソースのように,Webアプリのインタフェースを勝手に書き換えたりボタンを生やしたりできるのもブラウザ拡張の魅力だと思っていて,こういうChrome拡張も増えてくるとけっこう楽しいんじゃないかと思ってます.