s요즘 디시에서 야한거 많이 나와서 필터링 해주는 크롬 확장 프로그램 만들어 보기로 함.


물론 프로그래밍 좀 친다는 놈들은 다 할 줄 알겠지만 잘 못하는 사람은 이걸 보고 다른 것도 만들어 보삼.


그리고 또 여기서 필터링 해주는건 실시간베스트 글만 대상으로 했음.


먼저 프로젝트 폴더를 하나 만들고(본인은 dc-block-19로 했음)

안에 manifest.json이라는 파일을 만들어야 함.

내용은 아래처럼 하고


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name":"디시인사이드 야한글 차단 확장 프로그램",
  "short_name":"디시 야한글 자단기",
  "description":"디시인사이드의 야한 게시글을 필터링 해 줍니다.",
  "manifest_version": 2,
  "version":"0.9.0",
  "author":"2jun0",
  "homepage_url": "[깃허브주소]",
  "content_scripts":[
    {
      "matches": ["*://*.dcinside.com"],
      "js":["js/filter.js"],
      "run_at": "document_end"
    }
  ]
}
cs


여기서 

version은 말그대로 확장프로그램의 버전이고 

author는 본인 아이디(만든사람)

homepage_url은 프로젝트의 깃허브 주소를 올리면 됨.


matches는 뒤에 만들 js/filter.js가 적용되는 사이트를 말하는 것. (아무데서나 스크립트가 돌아가지 못하게 하기 위함)


이제 js/filter.js를 만들어 보자.

하지만 당장은 구조가 생각 안날 수 있으니 간단하게 구조를 짜보자



"ul.typet_list"는 아래 보이는 리스트 태그이다.


이 태그를 찾고 안에 있는 li에 대해서 키워드 필터링을 적용해 보는 것이다.

일단 페이지 로딩을 기다리는 코드를 작성하자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
function initTimeout() {
  clearTimeout(timeoutId);
 
  if (findUlElements()) {
    return;
  }
 
  timeoutId = setTimeout(() => {
    initTimeout();
  }, 2000);
}
 
initTimeout();
 
cs


그리고 이어서 ul를 찾는다.


1
2
3
4
5
6
7
8
9
10
11
function findUlElements() {
  var ulElements = document.querySelectorAll('ul.typet_list');
 
  if (!ulElements) {
    return false;
  }
 
  clearTimeout(timeoutId);
 
  return true;
}
cs


다음은 li를 찾고 지운다. 필터링할 문자는 ㅇㅎ, 가슴, ㄱㅅ, 엉덩이, 골반, 섹시, ㅅㅅ, AV로 했다.


1
2
3
4
5
function filterIlElement(el) {
  if(el.querySelector('div.box.besttxt > p').textContent.match(/ㅇㅎ|ㄱㅅ|가슴|엉덩이|골반|섹시|ㅅㅅ|[Aa][Vv]/)) {
    el.remove();
  }
}
cs


이제 3개를 합쳐야 할 시간.


짜잔.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var timeoutId;
 
function filterIlElement(el) {
  console.log(el.querySelector('div.box.besttxt > p').textContent)
  if(el.querySelector('div.box.besttxt > p').textContent.match(/ㅇㅎ|ㄱㅅ|가슴|엉덩이|골반|섹시|ㅅㅅ|[Aa][Vv]/)) {
    el.remove();
  }
}
 
function findUlElements() {
  var ulElements = document.querySelectorAll('ul.typet_list');
 
  if (!ulElements) {
    return false;
  }
 
  ulElements.forEach(ulEl => {
    Array.from(ulEl.children).forEach(ilEl => {
      filterIlElement(ilEl);
    })
  });
 
  clearTimeout(timeoutId);
 
  return true;
}
 
function initTimeout() {
  clearTimeout(timeoutId);
 
  if (findUlElements()) {
    return;
  }
 
  timeoutId = setTimeout(() => {
    initTimeout();
  }, 2000);
}
 
initTimeout();
cs



적용전


적용후