uBlock Orign で Medium mode を使う

ブラウザで可能な限り高速にコンテンツを閲覧する方法は、コンテンツに関係ないスクリプトを読み込まないことである。

まず簡単なところでは広告系や追跡系のスクリプトのブロックがある。これは uBlock Origin のフィルターで解決できる。

ここでは加えて 3rd party のスクリプトを読み込まないことを提案する。ウェブアプリやウェブサイトの開発を考えてみる。

このとき、ウェブアプリの根幹となるスクリプトは往々にして Webpackなどのバンドラーで一つに纏められて配信している。

そして、そのスクリプトは通常 index.html と同じサーバーから https://example.com/index.html と https://example.com/script.js のような形で配信される。このようなスクリプトを 1st party のスクリプトと呼ぶ。

次に外部のサービス等を利用する形で埋め込まれるスクリプトを考えてみる。これは X.com や FacebookといったSNSのポストを表示したり、共有機能を提供するために読み込まれる。他にもGoogle Analytics のようなアクセス解析もウェブサイトにスクリプトを注入する形で読み込まれる。当然外部のサービスを使うためのものであるので、そのスクリプトは https://x.com/fda90fa/share.js のような外部のドメインをルートにして配信される。このスクリプトを 3rd party のスクリプトと呼ぶ。

このような 3rd party スクリプトはコンテンツに関係しづらいという観察に基づく投機的なブロックである。これは通常 NoScript などの拡張機能で実行されるが、同様の機能が uBlock にも実装されている。これを Medium mode と呼ぶ。

この Medium mode を使うには以下の3つを有効化する必要がある。

1. 設定画面で "I am an advanced user" を有効化する

2. 以下のフィルターを追加する

uBlock Originが提供している全てのフィルターを有効化する

EasyList フィルターを有効化する

Peter Lowe’s Ad server list フィルターを有効化する

EasyPrivacy フィルターを有効化する

Online Malicious URL Blocklist‎ フィルターを有効化する

3. My rules 画面に移動して以下のルールを追加する

* * 3p-script block 3rd party のスクリプトをブロックする

* * 3p-script block 3rd party のフレーム (iframe, framelist)をブロックする

この Medium mode を有効化すると以下のパネルが表示される

https://scrapbox.io/files/6745b072732c9f0effe11653.png

左端 (1番目)のカラムに検出対象の種類が表示されている

2番目のカラムはグローバル設定の状態が表示されている

赤色はブロック状態 block を示している

濃い灰色はブロック無効化状態 noop を示している

灰色は設定はそれ以外の有効化と無効化が混在している状態である

- はブロックされているスクリプト (- の数が、スクリプトの量)

+ はブロックされていないスクリクプト (+ の数が、スクリプトの量)

このカラムをクリックすると状態が外される

https://scrapbox.io/files/6745b5652a27b2042ee86ab2.png

カラムにマウスを合せると2つのコンポーネントがある

2つのコンポーネントのうち左側はブロックを無効化 noop

https://scrapbox.io/files/6745b5ad8e5a12e2704d2877.png

2つのコンポーネントのうち右側はブロックを有効化 block

https://scrapbox.io/files/6745b637f28b37649aaafd61.png

同様に3番目のカラムはサイトローカルの設定である

2つのコンポーネントのうち左側はブロックを無効化 noop

https://scrapbox.io/files/6745b6a7f996c875f2049605.png

2つのコンポーネントのうち右側はブロックを有効化 block

https://scrapbox.io/files/6745b6f4dc495e30f9881cd3.png

https://scrapbox.io/files/6745b887b269ba5efdcb9f59.png は設定を保存

https://scrapbox.io/files/6745b8c2dc495e30f988261f.png は設定をリセット

基本的な使い方は以下の通り

1. ウェブサイトを開いてみる。普通に表示されたら、そのまま。高速で嬉しい。

2. ウェブサイトが壊れて表示されら、3番目のカラム(サイトローカルな設定) 3rd party scripts を有効化する。

上手く動いたらhttps://scrapbox.io/files/6745b887b269ba5efdcb9f59.png で保存

3. もしこだわるならドメインごとに設定するのもアリ。

とくにもしフォントとかCDNで配信される jsスクリプト系で重要そうならグローバルで有効化するのも検討する

基本的にはサイトローカルな設定で有効化する