add-column-icon-in-tweetdeck

hogashi by hogashi 2019-01-20 [2019/01/20 15:02:29]

TweetDeck でカラムに所有者のアイコンを表示する

  • /*
 * @title add-column-icon-in-tweetdeck
 * @description TweetDeck でカラムに所有者のアイコンを表示する
 * @include https://tweetdeck.twitter.com/*
 * @license MIT License
 */
const urlSet = {};
/* アイコンのURLを取得する */
Array.from(document.querySelectorAll('.js-account-list .js-account-item')).forEach(item => {
  const img = item.querySelector('img');
  urlSet[item.title] = img.src;
});
/* アイコンのクラス名 */
const iconClassName = 'column-header-title-icon';
/* アイコンを置く */
Array.from(document.querySelectorAll('.column-header-title')).forEach(title => {
  /* 前のアイコンは消しておく */
  Array.from(title.getElementsByClassName(iconClassName)).forEach(old => {
    title.removeChild(old);
  });
  const name = title.querySelector('.attribution').innerText;
  const iconImg = document.createElement('img');
  iconImg.className = iconClassName;
  iconImg.src = urlSet[name];
  Object.entries({
    width: '25px',
    height: '25px',
    marginRight: '7px',
    borderRadius: '3px',
  }).forEach(([key, value]) => {
    iconImg.style[key] = value;
  });
  title.insertBefore(iconImg, title.children[0]);
});
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2019/01/20 15:02:29 - 2019-01-20