DOM에서 특정 element를 제거하는 크롬 확장 프로그램

2015. 2. 28. 12:48

아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 dom element를 문서에서 제거하는 것이다. 설정 페이지 등 일반적인 형태로 사용할 수 있는 기능들을 빼고 dom element를 제거하는 기능 구현에 집중했더니 개발 시간은 길지 않았다. 소스 코드는 다음과 같다.


// manifest.json

{

  "manifest_version": 2,


  "name": "Dom Element Remover",

  "description": "This extension removes pre-specific elements from HTML document.",

  "version": "1.0",


  "content_scripts": [

    {

      "matches": ["http://*.daum.net/*"],

      "js": ["jquery.js", "bg.js"],

      "run_at": "document_end"

    }

  ],

  "permissions": ["http://*.daum.net/"]

}


// bg.js

var $target = $('#banner');


if ($target.length) {

$target.remove();

}


두 개의 파일이면 충분하다. manifest.json에서 선언한 것과 같이 사용자가 다음 사이트에 접근하면(matches) dom의 구성이 끝난 시점에(run_at) 파일(js)을 삽입한다. 그러면 bg.js 파일이 실행되고 문서에서 id가 banner인 엘리먼트를 찾아 해당 엘리먼트가 존재할 때 엘리먼트를 제거한다.


다음 사이트 이외의 곳에서는 확장 프로그램의 기능이 실행되지 않기를 원하므로 permissions에도 도메인을 추가했다.


이 프로그램을 더 개선한다면 사용자에게 지울 엘리먼트를 선택하는 방법을 제공할 수 있을 것이다. 지금은 bg.js 파일에 직접 선택자를 지정했지만 사용자가 변경할 수 있게 한다면 더 편리한 프로그램이 될 것이다. 그리고 다음 사이트에만 적용되는 기능을 다른 사이트 혹은 임의의 사이트에서도 동작하도록 변경할 수 있을 것이다.

nundefined ETC , , ,