크롬 익스텐션으로 현재 프레임에만 스크립트 로드하기

발생일: 2011.09.24

문제:
이번에 작은 크롬 익스텐션을 만들어봤다. (네이버 영어사전 크롬 익스텐션)

현재 보고 있는 페이지에 스크립트를 추가하고,
검색을 요청하면 크롬 익스텐션에서 비동기로 데이터를 가져와 출력하는 방식이다.

이를 위해 페이지가 로드되면, 스크립트가 head 태그에 삽입되고,
결과를 보여줄 레이어 엘리먼트를 만들어서 document.body에 추가되도록 했는데,..
특정 페이지에서 레이어가 나오지 않는다.

프레임셋으로 나뉘어진 페이지의 경우엔 body가 존재하지 않아,
엘리먼트를 추가할 수 없는 것이 원인이었다.

웁쓰. 우째해야 할까?
좋은 꼼수를 찾아내서 메모해둔다.


해결책:
익스텐션에서 content_script 를 추가할 때,
top 프레임에만 추가할 것인지, 모든 프레임에 추가할 것인지에 대한 옵션이 있었다.

all_frames 옵션을 true로 주면 스크립트가 모든 프레임에 추가된다.
(참고: http://code.google.com/chrome/extensions/content_scripts.html)


이제 프레임셋으로 나뉘어진 페이지에도 정상적으로 결과 레이어가 표시된다.
헌데,.. 익스텐션에서 content script로 메세지를 보내면 프레임의 모든 스크립트가 동작한다.

광고와 로그인 영역의 iframe을 포함해, 모든 프레임에 결과 레이어가 뜬다. -_-


현재 활성화되어 있는 메인 프레임을 찾아내야 했다.

메인 URL과 프레임의 URL을 체크해서 크로스 도메인인가를 체크해보기도 하고,
현재 프레임이 iframe 인지 여부를 체크하는 방법도 시도해봤지만,
딱히 해답이 없었다.

그러다 좋은 꼼수를 찾아냈다.ㅎ
마우스 이벤트가 발생한 프레임을 현재 활성화된 프레임으로 인식하도록 구현해봤다.
서비스 특성 상, 단어를 검색하려면 어떻게든 마우스 이벤트가 한 번은 발생하기 때문이다.


페이지의 빈 영역을 클릭하면 레이어가 닫기도록 구현했는데,
이번에는 레이어가 잘 닫기질 않는다.
결과 레이어가 A프레임에 열렸다가, B프레임의 빈 영역을 클릭하게 되는 상황이었다.

이 문제는, content script 에서 익스텐션으로 close 에 대한 요청 메세지를 보내고,
다시 익스텐션에서 모든 프레임의 content script 로 close 명령 메세지를 던지는 식으로 해결했다.


현재 페이지의 스크립트(content script)와 익스텐션의 스크립트가 통신하는 방법이,
HTML5의 웹워커가 메시지 통신하는 것과 거의 비슷하다.

뭐 여튼, 크롬 익스텐션 꽤 재밌다.ㅎ
구현도 간단하고, 잘 만들면 굉장히 유용할 듯 싶다.^^


참고)
* 크롬 익스텐션 시작해보기

  - http://code.google.com/chrome/extensions/index.html
    API를 굉장히 잘 만들어 놓아서, Getting started tutorial부터 천천히 따라해보시면 쉽게 만드실 수 있을 거예요!