ublock-origin-filters - uBlock Originフィルターで気を散らす要素を除去
(github.com/mig4ng)- 一部のウェブサイトで不要な気を散らす要素を取り除くための個人用 uBlock Originフィルター 集
- 各ウェブサイトで行う特定の作業だけを許可し、それ以外の注意をそらす可能性のある要素を無効化する方式
0-include-all.txtを uBlock Origin のFilter Lists > Import...に追加してフィルターを取り込む使用方法- 対象別フィルターの目的
- Googleアカウントのポップアップ: 複数のウェブサイトに表示される煩わしいGoogleポップアップを無効化
- YouTube: おすすめ動画、自動再生、提案、Shorts などの気を散らす要素を除去し、動画の視聴・検索・アップロードを中心に利用
- Twitter: フィード、サイドバーなどの気を散らす要素を除去し、特定プロフィールのツイートフィード閲覧・ツイート内容とコメント閲覧・ツイート作成を中心に利用
- LinkedIn: フィード、サイドバーなどの気を散らす要素を除去し、プロフィール・会社の閲覧、特定投稿の読了、メッセージ返信、投稿作成を中心に利用
- Stack Overflow および Stack Exchange: スコア、プロフィール写真、インタラクション通知を除去し、質問の最上位回答を読むことを中心に利用
- YouTube では現在 Firefox 拡張機能 Unhook を使用しており、フィルターで置き換えられる可能性があるというメモを含む
1件のコメント
Hacker News の意見
広告やサイドバーを大量にブロックした後は、残ったテキスト要素を広げて空いたスペースを再利用するのも便利
例えば
:xpath(//main/div):style(min-width: 80% !important)のような形さらに一部のサイトには
column-count:ルールを入れて、画面を新聞のように見せようとしたが、思った以上に調整が多く、最近のWebサイトの DOMレイアウト はほとんど汚染地帯のようなものhttps://developer.mozilla.org/en-US/docs/Web/CSS/column-coun...
uBlockで
column-count:を注入した最小例はこちら: https://i.ibb.co/k3bRwhP/example-1.webptheguardian.com###maincontent:style(margin-left: -28vw !important; min-width: 90vw !important; column-count: 4 !important)theguardian.com##div:style(border: none !important)カラム方式が気に入っていて、定期的に読むものは複数のスマートフィルターと併用しつつ、RSS中心に戻ろうとしている。そもそもRSSを手放すべきではなかったと感じる
常に可能というわけではないが、かなり頻繁に使える
uBlock Originで Options > Filter Lists > Annoyances に移動し、次の項目を有効にすればよい
"AdGuard – Annoyances""EasyList – Annoyances""uBlock filters – Annoyances"こうすると、Webサイトの うっとうしい要素の99.9% を主要機能を壊さずに消せる。ここ数年、Chromeを新規インストールするたびにこうしてきたが、効果はとても高い
休暇中に母のノートPCを使っていて、訪問したサイトがなぜこんなに違って見えるのか一瞬戸惑ったが、ほとんどすべてのサイトが広告だらけだった。段落の間のバナー、広告で埋まったサイドバー、物を売る背景画像まであり、見慣れた姿とはまったく違っていた
uBlock Originを使っているなら、このプロジェクトを始める前に該当フィルターを uBlock Annoyances や EasyList Annoyances のリストへ提出してみたのか気になる
別のAnnoyancesリストを新しく作るより、はるかに多くの人の役に立つ可能性がある
https://github.com/uBlockOrigin/uAssets
個人的には、仕事用のコンピューターでは Stack Exchange のトレンド質問を非表示にする必要がある。自分にとっては、ほとんど猫にとってのキャットニップみたいな存在なので
askubuntu.com###hot-network-questionsserverfault.com###hot-network-questionsstackexchange.com###hot-network-questionsstackoverflow.com###hot-network-questionssuperuser.com###hot-network-questionsそれに、多くのサイトが
prefers-reduced-motionを無視するので、終わりのないカルーセルやかわいい装飾アニメーションのような視覚的な気散じもよく非表示にしているある日、実際にいくつか質問を読んでみたらかなり面白い内容で驚き、なぜキャットニップみたいだと言うのか完全に理解した。幸い、自分でオフにできるスイッチがあるので中毒は避けられる
stackoverflow.com##.c-pointer.js-quack-btnstackoverflow.com##.js-step01.js-step.step.ws-nowrapstackoverflow.com##.js-step02.js-step.step.has-width.ta-centerstackoverflow.com##.quack-popover--arrowstackoverflow.com###overlay-headerstackoverflow.com###feed-linkstackoverflow.com##.mb16.s-anchors__default.s-anchors.s-sidebarwidget__yellow.s-sidebarwidgetstackoverflow.com##.grid--cell.js-reactionsstackoverflow.com##.mb16.s-anchors__grayscale.s-anchors.s-sidebarwidget__yellow.s-sidebarwidget残念ながら、それぞれが何のためのものかコメントを付けていなかった。1つは投票を促すようなバナーかもしれず、別のものは「Featured on Meta」ボックスと、まったく使わない左サイドバーだと思う。上にはないが、最近はうっとうしい「New Search AI Experience」ポップアップも追加でブロックした
Cookie バナーには別のルールセットがあるので助かるが、そのルールが一番問題を起こす。Cookie バナーとやり取りしないと、一部のサイトが正常に動かなかったり、そもそも読み込まれなかったりする。uBlock のない現代のインターネットは本当に嫌だ
似たような方法を使っているが、自分の目的はプライバシー保護とアルゴリズムフィードの回避だ
Firefox の Redirector 拡張機能で、YouTube、Twitter、StackOverflow のリンクをそれぞれ Piped、Nitter、AnonymousOverflow のような代替フロントエンドにリダイレクトしている。こうしたプロジェクトやインスタンスの、メンテナンスされている一覧もある
ほとんどが自由なオープンソースでプライバシーを尊重しており、倫理的なソフトウェアという性質のおかげで、偶然にも気が散らないフロントエンドも提供している
https://github.com/digitalblossom/alternative-frontends
https://farside.link
同じことを考えた人がいて、すでにオンラインに実装されたバージョンがあると分かってうれしい
以前、Reddit と Twitter で課金誘導型の装飾を消す方法をまとめた
reddit.com##.awarding-iconreddit.com##.awardings-barreddit.com##.give-gold-buttontwitter.com##:xpath(//div[contains(@style, "hex-hw-shapeclip-clipconfig")]):style(clip-path: circle(50%) !important)インターネット中に広がっている Login With Google ポップアップを消すルール
accounts.google.com/gsi/iframeGoogle ログインボタン自体は壊さないので、どうしても必要なら Google アカウントでログインできる
Hacker News向けのuBlock Originフィルターをこのように使っている
news.ycombinator.com##.comment:style(max-width: 70ch !important; overflow: hidden !important;)news.ycombinator.com##.c00:style(color: #3f3f3f !important;)news.ycombinator.com##.comhead:style(background: #e6e6df; font-weight: italic; color: #686868 !important;)news.ycombinator.com##.hnuser:style(background: #e6e6df; font-style: italic; color: #575757 !important;)news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg); background: white)コメント幅を約10語程度に制限して読みやすくし、色も一部変えている。改善点があれば教えてほしい
可読性とデバッグのしやすさから、依然としてStylusのほうを好むと思うが、知っておくとよさそう
それと
font-weight: italic;はタイプミスのように見えるuBlockを似たように使っている。過去8年間でカスタムフィルターを数百個ためてきて、直近ではIMDbでネタバレを隠すためのルールを追加した
! 2023-09-05 Hide episode's description and image (+ watchlist for not breaking the layout) [new experimental IMDb layout]imdb.com##article.episode-item-wrapper .ipc-slateimdb.com##article.episode-item-wrapper .ipc-html-contentimdb.com##article.episode-item-wrapper .ipc-watchlist-ribbon! 2023-09-05 Hide top rated episode's description both on a TV page and an episode pageimdb.com##[data-testid="episodes-top-rated-card"] ul + divArcには見た目の改善のための標準機能がある。Boostsと呼ばれていて、数回クリックするだけで自分で作成でき、必要ならカスタムCSS/JSも追加できる
Facebook、Twitter、Reddit、Medium、Gmail、YouTubeなど、ほとんどのサイトで気が散る要素を取り除くのによく使っていて、実際に生活が変わるほどだ
他のユーザーが共有したBoostsはここで見られる: https://arc.net/boosts
あるトピックを深掘りするときに発生するタブの沼を1つのグループ内に閉じ込められるのが素晴らしい。終わったらグループを閉じて、もともと残しておきたかったタブだけを残せたし、それが懐かしい
今は設定に時間がかかったうえ、デバイス間共有や長期保存のために宣言的にコードのように管理する簡単な方法がないので使っていない。方法が見つかればまた使ってみるかもしれない
Arcは試したが、いくつか気に入らない点があった。オープンソースではなく、Boostsもそうらしい。Chromiumベースなので、Firefoxや他のブラウザーに市場シェアを維持してほしいという立場とは合わない。Googleが嫌いなわけではないが、1社がWebを支配するのは望まない。それにmacOSとiOSでしか使えないようだが、今もそうなのかは分からない