Help us understand the problem. What is going on with this article?

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

uBlacklist

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

demo.gif

Chrome 版
https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=ja

Firefox 版 (Android でも一部制限はありますが動作します)
https://addons.mozilla.org/ja/firefox/addon/ublacklist/

GitHub
https://github.com/iorate/uBlacklist

動機

Personal Blocklist は Google の検索結果から指定したドメインのページを除外する拡張機能です。以前試したことはありましたが、除外したページが最初に一瞬表示されるのが気になってしまい、しばらく使っていませんでした。
最近、ある種のワードで Google 検索したときに現れる大量の低品質なサイトに耐えられなくなってきたので、勉強を兼ねて Personal Blocklist の代替となる拡張機能を作ることにしました。
なおオリジナルの Personal Blocklist は Chrome ウェブストアでの配布が終了しています。

特徴

  1. ブロックしたサイトが一瞬表示されるのを防ぎます。
  2. ドメイン名でなくマッチパターンや正規表現を使うことで、柔軟にブロックするサイトを指定できます。
  3. Google ドライブを使って、ブロックするサイトのリストをデバイス間で同期できます。
  4. 指定した URL からリストを定期的にダウンロード (購読) することもできます。

使い方

検索結果からブロック

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

block1.png

ダイアログが出てくるので、「ブロック」をクリックします。

block2.png

以後、ブロックしたサイトは検索結果に表示されなくなります。

block3.png

出てきたダイアログで「詳細」を押すと、ページのURL、追加されるルール、削除されるルールが確認できます。
追加されるルールはその場で編集できます。マッチパターン正規表現の項を参考にして下さい。サブドメインごとブロックすることもできます。

block4.png

ブロックを解除

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

unblock1.png

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

unblock2.png

出てきたダイアログで「ブロックを解除」をクリックします。

unblock3.png

開いているサイトをブロック

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

popup2.png

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

オプション

ツールバーの uBlacklist のアイコンを右クリックして「オプション」を選ぶと、オプションページが開きます (Chrome の場合)。
オプションページではブロックするサイトのリストを直接編集できます。Google ドライブを使ってリストを同期したり、指定した URL からリストを購読することもできます。

リストの編集

options1.png

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

マッチパターン

マッチパターンはワイルドカードを含んだ URL です。詳細は MDN web docs などにありますが、ここでは例をいくつか示します。

有効なマッチパターンの例

マッチパターン ブロックされる URL の例
*://example.com/*

("example.com" 上の URL)
http://example.com/

https://example.com/hoge
*://*.example.net/*

("example.net" かそのサブドメイン上の URL)
http://example.net/

https://foo.example.net/hoge
*://example.org/hoge/*

("example.org" 上の URL で、パスが "/hoge/" から始まるもの)
http://example.org/hoge/fuga.html

無効なマッチパターンの例

無効なマッチパターン 理由
*://www.qinterest.*/* "*" がホストの先頭以外に置かれています。代わりに正規表現を使って下さい。
<all_urls> サポートされていません。

正規表現

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

有効な正規表現の例

正規表現 ブロックされる URL の例
/^https:\/\/www\.qinterest\./

("https://www.qinterest." から始まる URL)
https://www.qinterest.com/

https://www.qinterest.jp/hoge/
/^https?:\/\/([^/.]+\.)*?xn--/

(日本語など国際化ドメイン名を含む URL)
http://例.テスト/

無効な正規表現の例

無効な正規表現 理由
^https?:\/\/example\.com\/ 正規表現が "/" で囲まれていません。
/^https?://example\.com// 正規表現内の "/" がエスケープされていません。

ブロック解除ルール

マッチパターンまたは正規表現の頭に @ をつけると、そのサイトをブロックしないという意味になります。ブロック解除ルールは通常のルールより優先されます。
購読しているリストによるブロックを解除する場合に使用することを想定しています。

Google ドライブでの同期

Google ドライブを経由して、複数のデバイス間でリストを同期することができます。
オプションページの「同期」セクションにある「同期を有効にする」をクリックします。

options2.png

Firefox 版ではここで www.googleapis.com へのアクセス許可が求められますので、許可します。
表示される画面に従って、Google アカウントを選択し、Google ドライブへのアクセスを許可します。

options3.png

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

購読

指定した URL から定期的にリストをダウンロードして、検索結果に反映させることができます。
オプションページの「購読」セクションにある「購読を追加する」をクリックすると、ダイアログが開きます。
「名前」には任意の名前を、「URL」にはリストが置かれている URL を入力して、「追加」を押して下さい。

options4.png

URL のドメインへのアクセス許可が求められますので、「許可」をクリックします。1

options5.png

追加した購読については、右のボタンから表示、今すぐ更新、削除を行うことができます。

options6.png

購読用のリストを公開する

購読用のリストを公開する場合は、リストを UTF-8 でエンコードしたテキストファイルにして、適当な HTTP/HTTPS サーバー上に置き、その URL を公開して下さい。
GitHub 上でファイルをホストしてその raw URL を公開するようにすれば、更新履歴も見やすくてよいと思います。

Tips

表示件数を増やす

多数のサイトをブロックしていると、検索結果の表示件数が極端に少なくなってしまう場合があります。
Google 検索の設定で表示件数を増やすことができます。また AutoPagerize 系の拡張 (Chrome なら uAutoPagerize、Firefox なら weAutoPagerize など) と併用すれば、検索結果を自動的に継ぎ足すこともできます。

「このサイトをブロックする」リンクを表示しない

最初にいくつかのサイトをブロックし、それ以上追加しない場合など、「このサイトをブロックする」リンクが邪魔になることがあるかもしれません。
その場合は、オプションページに「「このサイトをブロックする」リンクを表示しない」という設定がありますので、有効にして下さい。

技術的な話

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


  1. インストール時には Google へのアクセス許可しか求めていませんので、追加のアクセス許可が必要になります。インストール時に全てのサイトへのアクセス許可を求めれば不要になりますが、それではセキュリティ的にあんまりでしょう。 

iorate
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした