Personal Blocklist の代替になりそうな Chrome 拡張機能を作ってみた


uBlacklist

Google の検索結果から指定したサイトをブロックする拡張機能を作ってみました。Personal Blocklist (by Google) の代替になるかもしれません。

(2019/3/20) Firefox アドオンも作りました。

demo.gif


Chrome ウェブストア

https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe


Firefox アドオン

https://addons.mozilla.org/ja/firefox/addon/ublacklist/


GitHub

https://github.com/iorate/uBlacklist


動機

Personal Blocklist は Google の検索結果から指定したドメインのページを除外する拡張機能です。以前試したことはありましたが、除外したページが最初に一瞬表示されるのが気になってしまい、しばらく使っていませんでした。

最近、話題の人物などで Google 検索したときに現れる大量のトレンドブログに耐えられなくなってきたので、勉強を兼ねて Personal Blocklist の代替となる拡張機能を作ることにしました。

なおオリジナルの Personal Blocklist は長らく更新がなく、最近の Google の仕様に対応できない場合があるようです。


特徴


  1. ブロックしたサイトをできる限り表示しません。

  2. ドメイン名でなくマッチパターン正規表現を使うことで、柔軟にブロックするサイトを指定できます。


使い方

インストールすると、Google の検索結果に「このサイトをブロックする」リンクが表示されるので、ブロックしたいサイトのものを押します。

block1.png

ダイアログが出てくるので、「OK」をクリックします。(ワンクッションあるのは、誤爆の防止と、その場でルールを編集できるようにするためです。)

block2.png

消えました。

block3.png

ブロックを解除する場合は、上部の「表示する」リンクを押すと、

unblock1.png

ブロックしたサイトが赤背景で表示されるので、「このサイトのブロックを解除する」リンクを押して、

unblock2.png

出てきたダイアログで「OK」をクリックします。(またワンクッションあるのは、サイトが複数のルールにマッチしている場合、削除するルールを選択するためです。)

unblock3.png


別の使い方

何かのサイトを見ているときに、そのサイトを Google の検索結果からブロックしたくなった場合は、ツールバーの uBlacklist のアイコンをクリックします。

popup1.png

その場でブロックすることができます。既にブロックされている場合は、ブロックを解除できます。

popup2.png


高度な使い方

オプションページでブロックのルールを直接編集できます。

options1.png

テキストエリアの1行が1ルールになります。マッチパターンあるいは正規表現を使ってルールを書くことができます。無効な行は単に無視されるので、空行やコメント行を挿入できます。

Personal Blocklist からルールをインポートしたり、Google ドライブを使ってルールを同期したりすることもできます。


マッチパターン

マッチパターンはワイルドカードを含んだ URL です。もともと Chrome 拡張や WebExtensions 拡張に使われる仕様ですが、ほぼそのまま流用しました (参考)。


  • スキーム、ホスト、パスにワイルドカードを使用できます。例えば、*://*.example.com/* は、http://example.com/https://a.example.com/b にマッチします。

  • ある種のブログサイトでは、パスのサブディレクトリを指定すると便利でしょう。*://blog.example.com/evil/* は、http://blog.example.com/evil/a.html にマッチしますが、http://blog.example.com/good/b.html にはマッチしません。evil のブログのみをブロックできます。

  • 注意点として、ホストのルートドメインや中間にワイルドカードを使うことはできません。https://www.qinterest.*/* は無効なルールです。正規表現 /^https:\/\/www\.qinterest\./ などを使ってください。


正規表現

JavaScript の正規表現リテラル (参考) を使って、より自由度の高い記述ができます。


  • 先出の正規表現 /^https:\/\/www\.qinterest\./ は、https://www.qinterest.com/https://www.qinterest.jp/foo/ などにマッチします。

  • 他の例として、/^https?:\/\/([^/.]+\.)*?xn--/ は、http://日本語.jp/ など国際化ドメイン名を含む URL にマッチします。


Personal Blocklist からのインポート

Personal Blocklist からエクスポートしたブロックリストや、ウェブで公開されているブロックリストをインポートすることができます。

options2.png


  • 「Personal Blocklist からインポートする」セクションを開き、ブロックリストをテキストエリアに貼り付けて「インポート」をクリックすると、マッチパターンへの変換が行われます。

  • 既存のルールがある場合は、それに追記されます。


Google ドライブでの同期

Google ドライブを経由して、複数のデバイス間でルールを同期することができます。

options3.png


  • 「Google ドライブで同期する」セクションを開き、「許可」をクリックします。表示される画面に従って、Google アカウントを選択し、Google ドライブへのアクセスを許可します。

  • 「同期を有効にする」にチェックを入れ、「OK」をクリックします。

  • 同期が有効になると、Google ドライブのルートフォルダにファイル uBlacklist.txt が作成されます。このファイルを介して、同期を有効にした全てのデバイスに、最新のルールが反映されます。


技術的な話

ブロックするサイトが一瞬表示されるのを防ぐためには、対象となるノードをできるだけ早く非表示にする必要があります。

コンテンツスクリプトの注入タイミング "run_at" は3通り指定できますが、この目的に間に合うのは "document_start" だけで、これは DOM の読み込み開始前にコンテンツスクリプトを注入することを意味します。このタイミングでもルートノードだけは触ることができるので、MutationObserver でルートノードの監視を開始し、その後追加されてくるノードをコールバックで処理するようにしました。これで一応うまくいっているようです。

この MutationObserver を使う方式により、AutoPagerize 系の拡張にも対応できていると思われます。(uAutoPagerize で確認しています。)