Chrome を使用して AdBlock/UBlock ルールを作成する

Question

Chrome 開発ツールを使用して、Ublock/Adblock 構文に従って独自のカスタム広告ブロック ルールを作成する方法を学習したいと思います。まず、Chrome の開発ツールがどのように機能するかを理解する必要があります。

画像をよく見てください。この div 要素全体をブロックしたいのですが、残念ながらこの div 要素には ID が付いています。この ID は、ページをリロードするたびに変わる数字と文字のランダムな組み合わせです。

特定の名前を持つ特定の ID 専用のブロック ルールを作成できるように、「ID」が実際に何と呼ばれているかを把握するにはどうすればよいでしょうか。

ルールの作成方法を教えてくれたらボーナスポイントをあげます :P

Answer 1

が毎回ランダムに生成される場合はId、その DOM 要素にフックする固有の他のプロパティを見つける必要があります。テキスト プロパティは、フィルタリングするテキストを他のノードが使用しないこと、およびロケールに基づく翻訳がないことを期待するため、あまり適していません。

そうは言っても、あなたが使用しているこの AllMusic サイトでこれより良いものが見つからないため、この例ではこれを使用しました。

使用アンダースコアのfind関数を使用すると、子ノードを選択しdocument.body、テキストに「ad block」が含まれる最初のノードを返すことができます。

var blockElem = _.find(document.body.childNodes, function (elem) { 
    return elem.innerText && elem.innerText.toLowerCase().indexOf("ad block") != -1 }
);

これで、操作（削除、非表示など）できる DOM 要素が作成されました。

代替手段としてjQueryのfilter機能は次のとおりです。

var blockElem = $("body div").filter(function() {
    return $(this).text().toLowerCase().indexOf("ad block") != -1;
}).first();

追伸これは StackOverflow のような質問のような気がします。

Answer 2

Adblock Plus 非表示フィルターは 2 つの部分で構成されます。<domain>##<selector>

• ドメイン部分は、要素を非表示にするドメインのコンマ区切りリストです。

• セレクター部分はどの要素を非表示にするかを定義し、CSSセレクタ標準したがって、フィルターの書き方を学ぶ代わりに、CSS セレクターを学ぶことをお勧めします。なぜなら、フィルターの書き方に関する役立つリソースがたくさんあるからです。

たとえば、この場合、ドキュメント内の位置に基づいて要素を選択できることを知っておくと役立つかもしれません。たとえば、body > :nth-child(1)本文の最初の要素が選択されます。より具体的なセレクターの場合は、その特性のどれが一定のままで、どれが変化するかを確認する必要があります。