add-column-icon-in-tweetdeck
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 です。