Google Chrome 확장 기능 만들기

일요일에 잠시 짬을 내서, 구글 크롬 확장 기능으로 밸리나 이오공감에서 특정 글을 차단하는 프로그램을 짜봤다. 짜는 동안의 감상을 간단히 정리해본다.

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

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

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

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

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

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

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

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

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

여하튼 감상:

  • json, javascript, html + 약간의 데이터(이미지 등등)를 통해 금방 플러그 인을 작성할 수 있더라
  • 특정 기능(content_script) 사용의 경우 Java Applet이나 Adobe ActionScript 처럼 상당한 제약이 걸린다. 우회해야 하는 게 한 무더기.
  • 특정 시나리오, 예를 들어 플리커에서 사진을 가져온다거나 하는 일은 매우 쉽다. 로컬 연결이 아닌 웹의 각 open API를 쓰긴 쉬워 보였다. 기본 예제도 그렇고.
  • npapi도 지원하긴 하더라. 별로 쓰고 싶진 않지만(…)
  1. valley.egloos.com/* 그리고 www.egloos.com/* 및 비슷한 페이지들 []
  2. 5MiB 까지 데이터를 저장할 수 있는 공간이 있다; 그리고 여기에 의존하다 피 봤음 []
  3. 각 플러그인마다 존재하고 이것도 manifest 에 기술하고 html 파일을 플러그 인에 추가하면 끝. []

Author: rein

나는 ...

4 thoughts on “Google Chrome 확장 기능 만들기”

  1. 단순히 페이지의 내용을 변환하는 작업이라면 그리스몽키 스크립트를 바로 지원하기 때문에 그렇게 해도 됩니다. (파이어폭스 쪽 그리스몽키와 크게 다르지 않고, 브라우저 자체에서 네이티브하게 지원하다는 장점이 있습니다. 대신 동작이 아주 눈꼽만큼 살짝 다릅니다.)

    1. 그리스몽키 스크립트를 안다면 그렇게 했겠지만(사실 파폭 스크립트가 있던데(무심권), 그걸 수정할 수가 없어서;;; ), 제가 아는 범위(…)만 가지고 만들다 보니 이렇게 되었습니다 ~_~

  2. 오눌 이오공감에 뜬 Peaceful Vally가 rein님 작품이었군요. (세상은 넓고도 좁네요.)
    “구리스원숭이였다면 Firefox 및 IE에서도 쓸 수 있었을텐데…”라는 생각이 들었는데, 이런 뒷 사정이 있었군요.

Leave a Reply