아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 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 파일에 직접 선택자를 지정했지만 사용자가 변경할 수 있게 한다면 더 편리한 프로그램이 될 것이다. 그리고 다음 사이트에만 적용되는 기능을 다른 사이트 혹은 임의의 사이트에서도 동작하도록 변경할 수 있을 것이다.