Chrome을 사용하여 AdBlock/UBlock 규칙 만들기

Question

Chrome 개발자 도구를 사용하여 Ublock/Adblock 구문에 따라 나만의 맞춤 광고 차단 규칙을 만드는 방법을 배우고 싶습니다. 이제 그 전에 Chrome의 개발 도구가 어떻게 작동하는지 알아야 합니다.

그림을 관찰해 주세요. 이 전체 div 요소가 내가 차단하고 싶은 요소입니다. 불행하게도 이 div 요소에는 ID가 함께 제공됩니다. ID는 페이지를 다시 로드할 때마다 변경되는 임의의 숫자와 문자 샐러드입니다.

특정 이름을 가진 특정 ID에 대해서만 차단 규칙을 만들 수 있도록 "id"가 실제로 무엇인지 알아낼 수 있습니까?

규칙을 만드는 방법을 알려주시면 보너스 포인트를 드립니다 :P

Answer 1

매번 무작위로 생성되는 경우 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();

추신.나는 이것이 StackOverflow 종류의 질문에 더 가깝다고 생각합니다.

Answer 2

Adblock Plus 숨김 필터는 두 부분으로 구성됩니다:<domain>##<selector>

• 도메인 부분은 요소를 숨겨야 하는 쉼표로 구분된 도메인 목록입니다.

• 선택기 부분은 숨겨야 할 요소를 정의하고 다음을 따릅니다.CSS 선택기 표준. 따라서 필터 작성 방법을 배우는 대신 CSS 선택기를 작성하는 방법에 대한 유용한 리소스가 많이 있기 때문에 CSS 선택기를 배우는 것이 좋습니다.

예를 들어, 이 경우 문서 내 위치에 따라 요소를 선택할 수 있다는 것을 아는 것이 도움이 될 수 있습니다. 예를 들어 body > :nth-child(1)본문의 첫 번째 요소를 선택합니다. 보다 구체적인 선택기의 경우 어떤 특성이 그대로 유지되고 어떤 특성이 변경되는지 확인해야 합니다.