Rev. 2.73

얼마전에 출시한 파이어버그(firebug) 1.2 베타의 라인 출력 오류를 수정하려고 삽질하다가 그만... 파이어폭스의 확장기능 작동원리에 대하여 너무 많은 것을 알아버렸어요. 그래서, 파이어폭스의 확장기능을 하나 만들어 보기로 마음 먹었습니다. 먼저 XUL(XML User Interface Language) '주울(zool)'이라 불리우는 녀석을 이해해야 했는데요. 이 언어는 XML에 기반하며, 자바스크립트와 스타일시트 등을 버무려 크로스 플랫폼 응용프로그램을 매우 쉽게 만들 수 있도록 설계된 언어라고 합니다. 입문하고자 하시는 분은 MDC의 XUL 튜토리얼을 마스터 하시면 되겠습니다.

만들고자 하는 확장기능은 "알리미"입니다. 블로그에 새로운 댓글이나 트랙백이 있는 경우 알려주는 기능을 가진 확장기능이지요. 속전속결하기 위해 아래와 같은 명세를 작성했습니다.

1. 비슷한 특징을 가진 다른 확장기능들 찾기
2. 파일 구조 및 작동방식 분석하기
3. 재사용 가능한 코드로 수정하면서 만들기

xul.png

푸핫! 명세가 아니라 거의 도적질이네요. 어찌됐건 날로먹기(?) 신공을 발휘하여 낼름 만들어 버릴 예정입니다. 참조한 확장기능은 Google Reader Notifierwhos.amung.us Counter입니다. 우선, 블로그로부터 최신 자료를 요청하기 위한 URI를 생성하고, 받은 결과물을 출력하는 XUL을 만들면 되겠습니다. 부가적으로는 옵션창에서 블로그 주소와 알림 방법 등 몇가지 환경변수를 사용자가 입력할 수 있게 하는 것과 작업표시줄 위로 메세지 다이얼로그(메신저와 같은)를 디스플레이하는 것을 추가하여 완성도를 높이도록 합니다.
주로 사용하는 웹에디터(Aptana)외에 추가적인 도구는 사용하지 않았습니다만, 제작에 도움 주는 보조도구들이 여럿 있으니 참고 하시기 바랍니다. 패키징을 쉽게하는 웹서비스도 있더군요. 좌측에 보이는 그림은 앞으로 만들어질 확장기능의 패키지 구조입니다. 대부분의 확장기능들이 이와 비슷하거나 같은 구조로 되어있습니다.(로컬라이징과 관련된 'locale' 폴더는 생략합니다.)

"/addon/notify.php"로 접근하면 아래와 같은 JSON이 파싱되도록 했습니다. 헤더의 Content-Type만 "text/javascript; charset=utf-8"로 뿌려지게 한 것 빼고 별 특별한 것은 없습니다.

{
    comment: {
        date: 1211967695000, /* 밀리세컨드 단위 시간 */
        name: '파이어준', /* 댓글단 사람의 이름 */
        link: 'http://firejune.com/1258#r5555' /* 링크 */
    },
    trackback: {
        date: 1206954946000,
        name: '사이트 타이틀', /* 트랙백 받은 곳의 타이틀 */
        link: 'http://firejune.com/1304#t1900'
    }
}

다음으로는 패키지의 주요 파일들에 대하여 알아보겠습니다. 그 첫 번 째로 install.rdf의 내용입니다. 이 파일은 확장기능이 브라우저에 설치될 때 필요한 것으로서 설치 유효성을 판단하고 담겨진 정보를 토대로 설치하게 됩니다. 보다 자세한 내용은 MDC의 install.rdf 문서를 참고하시기 바랍니다.

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 xmlns:em="http://www.mozilla.org/2004/em-rdf#">
   
  <Description about="urn:mozilla:install-manifest">
    <em:id>feedback_notifier@firejune.com</em:id>
    <em:version>1.0a</em:version>
    <em:type>2</em:type>
    <em:iconURL>chrome://feedback_notifier/skin/firejune32.png</em:iconURL>
    <em:optionsURL>chrome://feedback_notifier/content/options.xul</em:optionsURL>

    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <em:name>Feedback Notifier</em:name>
    <em:description>새로운 코멘트와 트랙백을 확인합니다.</em:description>
    <em:creator>firejune</em:creator>
    <em:homepageURL>http://firejune.com</em:homepageURL>
  </Description>
</RDF>

overlay.xul의 내용입니다. XUL 오버레이는 확장기능의 주요 UI를 담고 있습니다. 마치 HTML을 작성하는 것과 비슷한데요. 스타일시트와 자바스크립트를 불러오고 다양한 목적을 가진 노드를 작성할 수 있습니다. '알리미'는 상태 표시줄에 상주하는 모습으로써 이미지와 레이블로 구성된 간단한 코드만으로 작성할 수 있었습니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://feedback_notifier/skin/overlay.css" type="text/css"?>

<overlay id="fn" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="overlay.js" />
  <statusbar id="status-bar">

    <hbox id="feedback_notifier" tooltip="fn-tooltip">
      <statusbarpanel id="fn-statusbar-panel" onclick="fn.mouseClick(event)">
        <image id="fn-icon" />
        <label id="fn-count" value="?" />
      </statusbarpanel>
      <tooltip id="fn-tooltip" orient="vertical" noautohide="true" value="?" />
    </hbox>

  </statusbar>
</overlay>

그리고 options.xul 의 내용입니다. overlay.xul 작성법과 동일하며, 옵션창과 관련된 XUL을 작성합니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<prefwindow id="fnPreferences" title="알림이 설정"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <prefpane id="pane1" label="알림이 패널">

    <preferences>
      <preference id="boolpref1" name="extensions.fn.boolpref" type="bool" />
      <preference id="stringpref1" name="extensions.fn.stringpref" type="string" />
    </preferences>

    <checkbox id="checkboolpref" preference="boolpref1" label="알림창을 보입니다." />
    <label control="textstringpref">홈페이지 주소를 입력해 주세요.</label>
    <textbox id="textstringpref" preference="stringpref1" />
  
  </prefpane>
</prefwindow>

그외 자바스크립트와 스타일시트 등은 아래 첨부된 파일을 참조해 주세요. 확장자를 "zip"으로 변경하여 압축을 해제하고 확인 할 수 있습니다. 이 확장기능을 테스트 하려면 환경설정 창에서 주소란에 "http://firejune.com/addon/notify.php "를 입력하세요. 물론, 자신의 블로그에서 직접 파싱한 JSON 주소를 입력하셔도 됩니다. 설치된 확장기능의 경로는 윈도XP의 경우 "C:\Documents and Settings\{계정}\Application Data\Mozilla\Firefox\Profiles\{해시}.default\tensions\"이고 윈도 비스타는 "C:\Users\{계정}\AppData\Roaming\Mozilla\Firefox\Profiles\{해시}.defaultex\tensions\"입니다. 자바스크립트 또는 XUL을 수정한 후 결과확인을 위해서는 파이어폭스 브라우저를 재시작 해야 합니다.

FeedbackNotifier.xpi FeedbackNotifier.xpi (7.6 KB)
notifier.png

자바스크립트(overlay.js)는 꼭 한 번 열어보시기를 권합니다. 이 파일에는 XUL을 컨트롤하는 함수와 통신관련 코드 그리고 XPCOM을 통한 환경변수 호출 등에 대한 자바스크립트 코드들이 있습니다. 좌측 그림은 새로운 코멘트 또는 트랙백이 있는 경우에 실시간으로 알려주는 알림성 다이얼로그입니다. 이 컴포넌트 역시 XPCOM을 이용한 것입니다.

tooltip.png

우측 그림은 파이어폭스의 상태 표시줄에 위치한 "알리미"입니다. 스타일시트에서 지정한 이미지와 누적된 피드백 수를 디스플레이 하고 마우스를 가져가면 툴팁으로 현재 상황을 간략하게 디스플레이하는 모습입니다. 블로그와 통신 중에는 spiner.gif로 이미지를 대체하여 통신 중인 상황을 즉시 알리며, 마우스 이벤트는 왼쪽, 오른쪽, 중앙 버튼을 구분하여 각각 열기, 갱신, 환경설정 행동을 취합니다. 오른쪽 버튼은 SHIFT키 + 클릭과 동일하고 중앙버튼은 CTRL키 + 클릭과 동일합니다.

만들어 놓고보니 욕심이 생기네요. 추가 옵션으로 등록된 특정인의 댓글은 알리지 않게 하는 것을 만들어야겠습니다. 직접 작성한 답글까지 알려주는 부작용이 있어요. 이상으로 허접한 구축기를 마칩니다. 한 포스트에 장황한 내용을 모두 작성하기에는 무리가 있군요. 차후 내용을 보강하거나 연제하도록 하겠습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar