Chrome devtoolsを使用して、Ublock / Adblock構文に従って独自のカスタム広告ブロックルールを作成する方法を学びたいです。それを行う前に、Chromeの開発ツールがどのように機能するかを理解する必要があります。
写真をご覧ください。このdiv要素全体がブロックしたいものです。残念ながら、このdiv要素にはidが付いています。上記のidは、ページをリロードするたびに変わる数字と文字のランダムなサラダです。
「id」が実際に何と呼ばれているのかを把握して、その特定の名前を持つ特定のidだけのブロックルールを作成するにはどうすればよいですか。
ルールの作成方法を教えていただければボーナスポイント：P
回答:
がId毎回ランダムに生成される場合、フックするDOM要素に固有の他のプロパティを見つける必要があります。他のノードがフィルタリング対象のテキストを使用しないこと、およびロケールに基づいた翻訳がないことを期待しているため、テキストプロパティは優れていません。
そうは言っても、あなたが使用しているこのAllMusicサイトでこれ以上良いものがわからないので、この例で使用しました。
アンダースコアのfind機能を使用document.bodyして、テキストの「広告ブロック」を含む最初のノードの子ノードを選択して返すことができます。
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();
PS。これはStackOverflowのような質問のようです。
Adblock Plusの非表示フィルターは、2つの部分で構成されています。 <domain>##<selector>
ドメイン部分は、要素を非表示にするドメインのカンマ区切りリストです。
セレクター部分は、非表示にする要素を定義し、CSSセレクター標準に従います。そのため、フィルターの作成方法を学ぶ代わりに、CSSセレクターを学ぶことをお勧めします。CSSセレクターの作成方法に関する役立つリソースがたくさんあるからです。
たとえば、この場合、ドキュメント内の場所に基づいて要素を選択できることを知っておくと役立ちます。たとえばbody > :nth-child(1)、本文の最初の要素を選択します。より具体的なセレクターの場合、どの特性が一定であり、どの特性が変化するかを確認する必要があります。