Google Chrome 확장 기능 만들기

아내가 egloos 육아 밸리에 누군가(…) 계속 보기 싫은 글 올린다고 불평을 하길래, 주말을 맞이해서 간단한(?) 플러그 인을 짜봤다. 그렇게 완성 시킨 걸 구글 크롬 확장 기능 페이지에 올려놨다.

Google Chrome 확장 기능은 개념적으로 매우 단순한 구조를 가지고 있다. 다만 보안 상의 이유로 몇 가지 제약 사항이 있어서 짜는데 삽질을 해야 했지만;;

전체적으로는 몇 개의 파일을 묶어서 플러그 인이 되게 한다. manifest.json라는 파일을 포함해야 하는데, 여기에 구글에서 정의한 기능 단위로 어느 파일이 어떤 기능을 하는지 정의 한다. 예를 들어, 이 아이콘을 쓰고, 옵션 페이지는 이 html 을, “~~한 URI”에는 이 javascript 를 … 하는 식으로 정의 한다.

내가 짠 스크립트는 이글루스 밸리에서 특정 블로그를 차단하면 되는 거라, 특정 URI에 해당하는¹ 페이지를 만나면, 여기에 동작하는 content_scripts를 짜는 걸로 했다. 일단 시작 자체는 튜토리얼만 따라 해도 돼서 편하게 갔음.

옵션을 표현하는 페이지를 manifest에 options_page 로 주고, 여기에서 localStorage² 에 어느 블로그를 차단할지 저장하게 했다.

다만 작성하는 동안 최대 문제는, 내가 사용한 content_scripts 가 “페이지를 변환”하는 기능을 하기 때문에, 당연히 XSS 위험이 있을 수 밖에 없고, 이거 때문에 chrome 확장 API 들을 거의 접근할 수 없었다. 그래서 localStorage 도 직접 접근할 수 없었고, background.html 이라고 플러그 인을 위해 계속 떠 있는 페이지³를 이용해서 데이터를 읽으려 해도, 역시 보안 상의 이유로 실패 Orz.

좀 더 API 문서를 읽어보니, background.html 에 asynchronous query 하는 건 되더라. 그래서 여기에 옵션 값 내놓으라는 요청을 보내고, 이걸 받는 후에야 특정 블로그 내용이 나올지 말지 결정하게 했다. 그랬더니 어찌 어찌 동작하게 되더라; 그리고 플러그 인 페이지에 한 번 낚였는데.

구글 크롬 자체의 플러그 인 페이지에 개발 중이 플러그 인을 배포용으로 묶어 주는 기능이 있는데, 구글의 공식 확장 기능 페이지에는 이 파일을 업로드 하는 게 아니었음. 개인키로 서명까지 하게 해 놓고 이게 무슨 삽질인지 사실 구글 계정과 플러그 인 업로드가 묶이기 때문에 그런 거 같긴 하다.

Mozilla FireFox 플러그 인은 XUL 배우기가 귀찮아서 전혀 손도 안 대보고 있었는데, 나중에 기회가 나면 그쪽으로 포팅하는 걸 고려 중이다. 아내가 주로 쓰는 브라우저가 그거라서…

여하튼 감상:

• json, javascript, html + 약간의 데이터(이미지 등등)를 통해 금방 플러그 인을 작성할 수 있더라
• 특정 기능(content_script) 사용의 경우 Java Applet이나 Adobe ActionScript 처럼 상당한 제약이 걸린다. 우회해야 하는 게 한 무더기.
• 특정 시나리오, 예를 들어 플리커에서 사진을 가져온다거나 하는 일은 매우 쉽다. 로컬 연결이 아닌 웹의 각 open API를 쓰긴 쉬워 보였다. 기본 예제도 그렇고.
• npapi도 지원하긴 하더라. 별로 쓰고 싶진 않다.