隠したいものが隠せて便利！ | Google Chrome機能拡張CustomBlockerでTwitterのWho to followを消す

みんな大好き @MaripoGoda さんがGoogle Chrome用の拡張CustomBlockerをリリース。

これが非常に便利なので紹介します。ページの中で見たくないものを隠す拡張です。

Google Chromeにロックインされてしまう理由が、また一つできてしまうじゃないですか。

コーヒーサーバは香炉である » Google Chrome 用機能拡張 “CustomBlocker” をリリースしました

ただしWho to follow、てめーはダメだ

「ユーザーが自分で隠したいものを指定→指定したものが隠れる」ということで、早速やってみます。

隠したいもの、何かあったかな？　と考えて最初に思いつくのは、多くは語りませんがTwitterのWho to follow。

Stylish用のWho to followを隠す定義ファイルがあることは知っています。

だがしかし、折角なのでCustomBlockerでやりたいのです！

どうやって隠すんでしょうか？

CustomBlockerチュートリアル

▼まずはTwitterを表示。そして、ツールバーからCustomBlockerを起動。

「[+] このサイト用のルールを新規作成」をクリックして、設定画面を呼び出します。

サイトのURLの正規表現は「twitter\.com/?(#!/)?(i/connect)?」に。「http://twitter.com」、「http://twitter.com/」、「http://twitter.com/#!/」、「http://twitter.com/#!/i/connect」どれが来てもいいようにします。部分一致なので、「twitter\.com」だけでいい気もしますが（続きは[Read More]から）
▼そして、検索する要素のグループの「XPathを取得」ボタンを押して、

▼「Who to follow」の文字の上をクリック。

▼すると、Who to followを検索するXPath (1.3からはCSSpathも)（検索式のようなもの）の候補がポップアップします。今回は「//DIV[@class=”module”]//H3」の方を選択。

意図しないものまで隠してしまわないために、できるだけ限定的、選択的なものが望ましいので、「Japan trends」の方もひっかけてしまう「//H3」より、「//DIV[@class=”module”]//H3」の方がいいことになります。頭の赤丸数字は、このXpathでいくつ要素がヒットするかを示していますので、ページ中で一つしか無いものを隠す今回のケースの場合、少ない方がいいのです。

ただし、ヒット数が1の、そのものズバリが無いことを悩む必要はありません。なぜなら「検索する要素」で候補をノミネートして、「NGワード」で確定させる二段構えだからです。「//DIV[@class=”module”]//H3」のうち、「Who to follow」を含むのは一つしかありません。

今度は、隠す要素の指定です。「Who to follow」のエリアを特定するのに有効な、NGワード「Who to follow」を含む「//DIV[@class=”module”]//H3」を検索することをさきほど指定しました。しかし、「//DIV[@class=”module”]//H3」を隠すのでは、「Who to follow」エリアのラベルが隠れるだけです。これでは意味がありませんので、「Who to follow」のエリア全体が隠れるよう指定する必要があります。

▼「隠す要素」の「XPathを取得」をクリック。

▼続いて、「Who to follow」のエリアが赤い罫線で囲われるようになったところでクリック。「Who to follow」のエリアを囲う枠線の部分を、ゆっくり内から外にマウスのカーソルを移動していくと、1ドットぐらいの違いで二つの領域が選択できるのが分かります。その外側の方に切り替わったところでクリックします。内側の方を選択してしまうと、隠した後にゴミが残るからです。

▼XPathの候補がポップアップするので、一番上の「//DIV[contains(concat(” “,normalize-space(@class),” “),”pb-toggleable”)]/DIV[contains(concat(” “,normalize-space(@class),” “),”module”)]」を選択します。