Chrome拡張つくってTwitterのUI変えた
最近TwitterのUIが変更された。
数日使ったものの未だ違和感がある。具体的には右手のカラム(トレンド表示されるとこ)が文字密度高くてごちゃごちゃっとなってるのが気になる。
はやく良くなってほしいがいつになるかわからんので、取り敢えずカラムを消すChrome拡張をつくった。
https://chrome.google.com/webstore/detail/hide-sidebar-column-on-tw/onpngcpnhobjhkdeijngpjbojondnlca
カラムのdomの読み込みを検知してからnode.remove()実行したい。
Reactの生domレンダリングはdomcontentloadedイベントでハンドルできないので、MutationObserverでReactのrootノードを監視するアプローチを取った。
ちなみにdomnodeinsertedというイベントでもハンドルできるけどdeplicatedなのでやめた
(function () {
const remove_column = (function () {
const elements = document.querySelector("div[data-testid="sidebarColumn"]");
if (elements !== null) {
elements.remove();
console.info('delete <div data-testid="sidebarColumn"></div>')
}
})
const observer = new MutationObserver(remove_column);
observer.observe(document.getElementById('react-root'), {
childList: true,
subtree: true
});
})()
やっつけ仕事なのもあり10行程度で済んだ。
