Twitter(X)のタイムラインを整頓するjavascript

Twitter(X)を眺めているときのこと。
ふと気になった画像をクリックしたとき、
それが広告だったことはありませんか？

私はあります。
広告かよと思います。

特にあぁいったものはクリック詐欺とかにも気をつけないといけません。
しからば即判断できるような目印が欲しくなるものです。
(元からそうなっていて欲しいのはそうですが)

そしてもう一点。

自分のタイムラインでフォロワーさんの投稿を眺めるとき、
画像と動画の投稿のみに絞りたい場合があります。

そしてその解決方法としてよく上げられるのは検索機能を使うこと。

これ↓

filter:images

この方法、非常に便利なのですが
シャドウバンされてる人は検索できない問題があります。
よくわからない理由でシャドウバンされることはありますからね。

なので、自分のタイムラインのメディア投稿のみを表示できる方がありがたい。

といった理由で作りましたjavascript

let scroll_num = 0;
window.addEventListener('scroll', function(){
	if(window.location.href.includes('x.com/home') === true && Math.abs(window.scrollY - scroll_num) > 300){
		twxChecker();
		scroll_num = window.scrollY;
	}
});

function twxChecker(){
	let main_tw_container = document.querySelectorAll('h1 + [aria-label^="タイムライン"] article:not([data-twxchecker="1"])');
	let resss = 0;
	for(let mmi=0; mmi<main_tw_container.length; mmi++){
		main_tw_container[mmi].setAttribute('data-twxchecker',1);
		
		setTimeout(function(){
			let kouoku_cont = main_tw_container[mmi].querySelectorAll('[dir="ltr"] span');
			let is_media = {'koukoku':false,'img':false,'video':false,};
			if(0 < kouoku_cont.length){
				for(let kki=0; kki<kouoku_cont.length; kki++){
					if(kouoku_cont[kki].innerText.includes('広告') || kouoku_cont[kki].innerText.includes('有料パートナー')){
						is_media['koukoku'] = true;
					}
				}
			}
			let img_post = main_tw_container[mmi].querySelectorAll('img[draggable="true"]');
			if(typeof img_post[1] !== 'undefined'){
				is_media['img'] = true;
			}
			let video_post = main_tw_container[mmi].querySelector('video');
			if(video_post !== null){
				is_media['video'] = true;
			}
			if(is_media['koukoku'] === true || (is_media['img'] === false && is_media['video'] === false)){
				main_tw_container[mmi].closest('div').style.backgroundColor = '#f00';
				main_tw_container[mmi].closest('div').style.height = main_tw_container[mmi].clientHeight + 'px';
				//main_tw_container[mmi].style.display = 'none';
			}
		},300);
	}
}

プログラムの解説

まずDOMの取得方法は無理やりです。
日本語のタイムラインならこれで行けるだろうと。

というのも恐らくclass名などが固定されてないので、
タグ名と一部の要素で拾った方がいいかなと判断したため。

画像の検出方法

画像の検出もクラス名などを使わないため個数で判断しています。
ただし本文中の絵文字なども画像であるため、
「draggable="true"」指定の画像で2つ目があれば画像投稿という判断。
※1個目はユーザーアイコン

videoタグは言わずもがな。

スクロールによる作動

機能はスクロール量によって作動します。
が、稀にarticle内がロードされてないときに誤判定する場合があるので
300ミリ秒遅らせています。

それでも誤判定するときはありますが。

風の噂

あと風の噂ですが、各投稿の高さが変更されたときは他の投稿の高さが自動調節されるようです。
このため不要と判断してポンポン消していると
再読み込みが頻発して全然スクロールしないという事態に陥ります。

まぁ広告を消すわけではないので、知らなくても良いことですね。