Qiita のメンションなどにユーザのアイコンを表示する。

qiita-icons.user.js

// ==UserScript==
// @name Qiita Icons
// @description Qiita のメンションなどにそのユーザのアイコンを表示する。
// @version 1.0.2
// @match http://qiita.com/*
// @match https://*.qiita.com/*
// ==/UserScript==

// アイコンのサイズ
var ICON_SIZE = 18; // px

// -----------------------------------------

var ICON_URL_CACHE_NAME = 'kuiQiitaIconCache';
var ICON_URL_CACHE = sessionStorage[ICON_URL_CACHE_NAME] ?
  JSON.parse(sessionStorage[ICON_URL_CACHE_NAME]) : {};
var VERBOSE = /kui_debug_output/.test(location.href);

function main() {
  log('Qiita Icons');

  var mentions =
    toArray(document.querySelectorAll('a[class="user-mention"]'));
  insertUserIcons(mentions).then(function() {
    // save caches
    sessionStorage[ICON_URL_CACHE_NAME] = JSON.stringify(ICON_URL_CACHE);
  }).catch(function(e) {
    err(e.stack);
  });
}

var log = VERBOSE ? console.log.bind(console) : function(){};
var err = console.error.bind(console);

function insertUserIcons(mentions) {
  if (mentions.length === 0) {
    return Promise.resolve();
  } else {
    return insertUserIcon(mentions[0]).then(function() {
      return insertUserIcons(mentions.slice(1));
    });
  }
}

function insertUserIcon(mention) {
  return new Promise(function(resolve, reject) {
    if (!mention.firstChild ||
        mention.firstChild.nodeType !== Element.TEXT_NODE) {
      // 既にアイコンが追加されているので中断
      resolve();
      return;
    }

    getIconURL(mention.href).then(function(url) {
      insertIcon(mention, url);
      resolve();
    }).catch(function(e) {
      reject(userName + ': ' + e.message);
    });
  });
}

function insertIcon(mention, iconURL) {
  var i = document.createElement('img');
  i.src = iconURL;
  i.height = ICON_SIZE.toString(10);
  i.width  = ICON_SIZE.toString(10);
  mention.insertBefore(i, mention.firstChild);
}

function toArray(iterable) {
  return [].slice.apply(iterable);
}

function getIconURL(profileURL) {
  if (ICON_URL_CACHE[profileURL]) {
    var c = ICON_URL_CACHE[profileURL];
    log('use cache ' + profileURL + ' -> ' + c);
    return Promise.resolve(c);
  }

  log('request ' + profileURL);
  var parser = new DOMParser();
  return request('GET', profileURL).then(function(html, req) {
    var d = parser.parseFromString(event.target.responseText, 'text/html');
    var img = d.querySelector('#user-info-box img[class="user-icon"]');
    ICON_URL_CACHE[profileURL] = img.src;
    return img.src;
  });
}

function request(method, url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open(method, url, true);
    req.onload = function () {
      if (req.status === 200) {
        try {
          resolve(req.responseText, req);
        } catch(e) {
          reject(e);
        }
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function () {
      reject('Network Error');
    };
    req.send();
  });
}

main();