Twitterにふぁぼスターを復活させました

細音 希

こんにちは。昼夜逆転生活が直せない細音希です。

実は、しばらく前から自作のChrome拡張機能を使ってプロモーションツイートを非表示にしてたんですよね。

それで最近、せっかくだから昔のTwitterのデザインに少しでも近づけようと思って、Twitterのcssを上書きするような拡張機能を作ってみました。

なにをやったかってぇと、タイトルの通り、ふぁぼスターを復活させました。

あと、ついでにアイコン画像を四角くしてます。

JavaScriptの方は非常に単純。

ページのloadイベントで、linkタグをヘッダに追加するだけ。


	var lnk = document.createElement("link");
	lnk.setAttribute("rel", "stylesheet");
	lnk.setAttribute("href", "https://otft.info/css/twitter.css");
	document.head.appendChild(lnk);

はいオーケー、これで、僕が書いたcssがTwitterに読み込まれます。

cssの中身は、現時点ではこんなかんじ。

* {
	--color1: rgb(244, 144, 12);
	--color2: rgb(255, 217, 131);
}

.r-sdzlij {
	border-radius: 5px;
}

div[data-testid="like"] path {
	d: path('M12 0L15.4 7.7L24 9.2L17.8 15.3L19.2 24L12 19.9L4.8 24L6.2 15.3L0 9.2L8.6 7.7L12 0L12 3.2L9.5 8.9L2.6 10L7.8 14.8L6.7 21.2L12 18L17.3 21.2L16.2 14.8L21.4 10L14.5 8.9L12 3.2 Z');
}

div[data-testid="unlike"] path {
	fill: var(--color1);
	d: path('M5.53 15.37L4.17 24L11.76 19.87L19.3 24L17.85 15.37L24 9.2L15.47 7.7L11.76 0L7.91 7.7L0 9.2L5.53 15.37Z');
}

div[data-testid="like"] .r-daml9f {
	color: var(--color1);
}

div[data-testid="unlike"] .r-daml9f {
	color: var(--color1);
}

article[role="article"] .r-daml9f {
	color: var(--color1);
}

article[role="article"] .r-daml9f path {
	color: var(--color1);
	d: path('M5.53 15.37L4.17 24L11.76 19.87L19.3 24L17.85 15.37L24 9.2L15.47 7.7L11.76 0L7.91 7.7L0 9.2L5.53 15.37Z');
}

.r-wcu338 {
	background-color: var(--color2);
}

.r-q17tgg {
	background-color: var(--color2)
}

デベロッパーツールを使って頑張ってクラス名を調べたりして、それを書き換えてますね。

古いスクショを確認してみると、実はふぁぼスターって黄色じゃなくてオレンジなんですよね。

こりゃびっくりだ

「いいね」ハートマークはSVGだったので、自分で星型のSVGを作って、それをcssで上書きしてます。

cssを使ってpathタグのd属性を変更できるのはどうやらChromeのバグだそうでして、これFirefoxで試すとハートマークのままでした。

Chrome以外でも使いたい場合は、JSでd属性を書き換えてやらんといけませんね。

たとえば、

Array.from(document.querySelectorAll('div[data-testid="like"] path'))
.forEach(elm => {
	elm.setAttribute('d', 'M12 0L15.4 7.7L24 9.2L17.8 15.3L19.2 24L12 19.9L4.8 24L6.2 15.3L0 9.2L8.6 7.7L12 0L12 3.2L9.5 8.9L2.6 10L7.8 14.8L6.7 21.2L12 18L17.3 21.2L16.2 14.8L21.4 10L14.5 8.9L12 3.2 Z');
});

こんな感じですかね。

試してはないけど。

一応そのままChromeに突っ込んで使える状態で、githubにも上げておきました。

よかったら使ってください。

審査通ったので、Chrome ウェブストアからインストールもできます。

まあそういうこって、今はオレンジのふぁぼスターでTwitterを楽しんでます。

ではではﾉｼ

いいなと思ったら応援しよう！