☰

AtCoder Twitter Avatar

Display Twitter avatar on AtCoder user page

As of 2018-09-24. See the latest version.

  1. // ==UserScript==
  2. // @name         AtCoder Twitter Avatar
  3. // @namespace    https://ciffelia.com/
  4. // @version      1.0.0
  5. // @description  Display Twitter avatar on AtCoder user page
  6. // @author       prince <mc.prince.0203@gmail.com> (https://ciffelia.com/)
  7. // @license      MIT
  8. // @homepage     https://github.com/prince0203/atcoder-twitter-avatar#readme
  9. // @supportURL   https://github.com/prince0203/atcoder-twitter-avatar/issues
  10. // @match        http*://atcoder.jp/user/*
  11. // @match        https://beta.atcoder.jp/users/*
  12. // @run-at       document-end
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.   'use strict';
  17.  
  18.   const twLinkElm = document.querySelector('a[href*="//twitter.com/"]');
  19.  
  20.   const screenName = twLinkElm.innerText;
  21.   const avatarUrl = `https://avatars.io/twitter/${screenName}/small`;
  22.  
  23.   const avatarElm = document.createElement('img');
  24.   avatarElm.src = avatarUrl;
  25.   avatarElm.referrerPolicy = 'no-referrer';
  26.   Object.assign(avatarElm.style, {
  27.     width: '20px',
  28.     height: '20px',
  29.     marginRight: '5px',
  30.     borderRadius: '50%'
  31.   });
  32.  
  33.   twLinkElm.insertAdjacentElement('afterbegin', avatarElm);
  34.  
  35. }());