로그인 | 회원가입 (뉴스레터신청) | SITEMAP
   
  개발   플랫폼   시스템   매니지먼트   전체기사  
인기검색어:   비스타 | 블로그 | IPTV | UCC |
자바
닷넷
C/C++
DB
모델링
웹개발
기타
유닉스/리눅스
윈도우
기타
서버
네트워크
보안
기타
BM
PM
기타
 
기사저장
0
 
마이 스크랩
Home > 빌더 > 플랫폼 > 기타
[파이어폭스의 대항해] ④ 실전! 확장기능 개발

김고명 (영문학도)   2005/04/27
연재순서
1. 웹 브라우저 혁명군, 파이어폭스
2. IE 개발자 시각으로 본 파이어폭스 개발 플랫폼
3. 파이어폭스, 그 안에 숨은 더 큰 가능성
4. LiveLines로 시작하는 파이어폭스 확장기능 개발
5. 파이어폭스 확장기능 베스트 5
6. 최후의 미션! 액티브X를 넘어라
[지디넷코리아]파이어폭스의 가장 큰 장점 가운데 하나는 ‘확장기능’이다. 여기서는 이 확장기능이 어떻게 만들어지는지 구조와 제작 방법을 간략하게 살펴 보고, LiveLines라는 파이어폭스용 RSS 확장기능을 직접 개발해 본다. 또한 웹 표준 기술에 충실한 개발 플랫폼에서 실행되는 독립적인 경량 애플리케이션으로서 확장기능을 재조명해 본다.

흔히 사용하는 노트 패드, 계산기 같은 프로그램을 개발하려면 C/C++를 익히거나 어려운 개발 도구를 사용해야 하는 경우가 많다. 특히 웹 브라우저의 부가 기능 개발에 사용되는 응용 애플리케이션(rich internet application)은 인터넷 익스플로러 중심의 액티브X 기술에 국한돼 전문 프로그래머가 아니면 개발하기가 만만치 않았다.

반면 파이어폭스에서 부가 기능을 제공할 수 있는 확장기능(extensions)은 웹을 구성하는 기본 지식과 표준 웹 기술 몇 가지만 익히면 간단하게 만들 수 있다. 확장기능의 소스는 압축만 풀면 텍스트 에디터로 바로 열어 볼 수 있고, 가볍고 크기가 작아 쉽게 다운로드해 설치, 사용할 수 있고, 버전이 업그레이드되면 업데이트도 자동으로 지원한다.

실제로 HTML, CSS, 자바 스크립트 등 텍스트 기반의 간결하면서도 이해하기 쉬운 웹 저작 방법은 웹을 성장시키는 데 원동력이었다. 간편한 개발과 사용법에 비해 매우 강력한 기능을 지원해 응용 범위가 툴바와 검색 기능, 웹 사이트 지원 등을 모두 망라하고 있다.

확장기능의 구조 뜯어보기
확장기능을 구성하는 요소는 <리스트 1>과 같다. 일반적으로 CSS, 자바 스크립트를 비롯해 XML 기반 유저 인터페이스 구현 언어인 XUL, 자료와 내용 구조를 설명하는 웹 표준인 RDF로 구성되며, 여기에 외부 라이브러리와 연결을 담당하는 XPCOM과 네트워크 연결을 위한 SOAP, XML-RPC, XMLHTTP 등을 지원한다. 심지어 파이썬(Python), 펄(Perl), 루비(Ruby)같은 스크립트 언어에 대한 바인딩도 지원한다.
 <리스트 1> 확장 기능의 기본 구조

확장기능의 디렉토리 구조는 모질라나 파이어폭스 브라우저의 것과 거의 똑같다. 브라우저 내에 있는 것처럼 UI 요소(content), 스킨 혹은 테마와 같은 외양(skin), 다국어 지원(locale) 등으로 나눠지는 디렉토리에 있는 파일들을 모아서 XPI라는 압축 파일 형태로 제공된다. 여기에 확장기능의 각 디렉토리 내용을 설명하는 RDF 파일과 설치 파일 등이 추가돼 있다. 실제로 파이어폭스 프로그램 폴더의 chrome/browser.xpi 같은 프로그램을 윈집 등으로 풀어보면 이러한 구조와 똑같이 구성되어 있음을 확인할 수 있다. 이것은 확장기능도 모질라의 공통 개발 플랫폼을 기초로 하고 있기 때문이다.

확장기능의 전체 구조를 설명하는 RDF
확장기능을 만드는 첫번째 단계는 <리스트 1>과 같은 디렉토리 구조를 구성하는 것이다. (마지막에 만들기도 하지만) 이를 설명하는 것이 바로 <리스트 2>의 install.rdf 파일이다

 <리스트 2> 확장기능의 전체 구조를 설명하는 RDF

<description> 부분에는 확장기능에 대한 제작자, 배포 URL, 프로그램명, 버전 등 기본 설명이 담기는데, 이 가운데 <em:id> 부분은 확장기능을 고유하게 나타내는 클래스 아이디를 적어야 한다. 이 클래스 아이디는 Guidgen(www.microsoft.com/downloads/details.aspx?FamilyId=94551F58-484F-4A8C-BB39-ADB270833AFC)이라는 프로그램을 사용하면 된다. <em:targetApplication>에는 파이어폭스에 대한 기본 정보가 들어간다. 설치될 프로그램이 파이어폭스인지 썬더버드인지에 따라서 클래스 아이디와 버전 정보를 넣어 주면 된다. 마지막으로 <em:file> 부분에서 설치될 chrome 디렉토리의 jar 파일명을 넣어 준다.

이제 각 디렉토리에 포함될 정보를 기술하는 RDF 파일인 contents.rdf 파일에 대해 알아보자. contents.rdf 파일은 파일이 포함되어 있는 모든 디렉토리에 설치되는 것이 기본이다.

 <리스트 3> 디렉토리에 포함될 정보를 기술하는 contents.rdf

<리스트 3>처럼 프로그램 패키지에 대한 정보와 확장기능에서 처음으로 실행할 사용자 인터페이스를 정의할 수 있다. 이 때 사용하는 chrome:// 프로토콜은 확장기능이 사용할 파일의 위치를 지정하는 역할을 한다. 예를 들어 다음과 같이 기술하면 파일의 실제 경로는 확장기능 파일인 simple.xpi 내의 chrome 디렉토리의 simple.jar에 있는 content/simpleOverlay.xul가 된다.

<RDF:li>chrome://simple/content/simpleOverlay.xul</RDF:li>

유저 인터페이스와 기능 구현
실제 브라우저에서 표현되는 유저 인터페이스는 XUL로 표현한다. XUL과 자바 스크립트의 셋트로 구성되는데, <리스트 4>가 바로 simple.xul 파일 예제이다.

여기에는 <화면 1>처럼 오른쪽 버튼을 클릭했을 때 나타나는 메뉴와 브라우저의 도구(tool) 메뉴에 각각 ‘Hello, wolrd!’라는 메뉴를 추가하는 내용이 들어 있고, 이 메뉴를 클릭하면 simpleOverlay.js 파일 안에 있는 hello() 함수를 실행하도록 돼 있다. Simple.js 파일에는 다음과 같은 간단한 코드가 들어 있다. hello() 함수는 Hello, world!라는 글자를 경고창 형태로 화면에 띄워주는 역할을 한다.

function hello() {
    alert("Hello, world!");
}

<화면 1> simpleOverlay.xul을 실행한 경우의 UI 표시

 <리스트 4> 유저 인터페이스를 구현하는 XUL 파일

만약 XUL 파일 내에 있는 요소에 스타일을 사용하려면 CSS 속성 혹은 CSS 파일을 이용하면 된다. 다음은 skin/classic/simple 밑에서 CSS 파일을 찾는 경우다.

<?xml-stylesheet href="chrome://simple/skin/simple.css"
type="text/css"?>

CSS 파일에 있는 속성을 사용하거나 바로 스타일 속성을 사용하려면 다음과 같이 설정하면 된다. 여기서 볼수 있듯이 class="url"이라는 속성을 simple.css에서 찾을 수 있으며, style="font-weight: bold;"라는 구문을 넣어 직접 스타일을 지정할 수도 있다. 그림을 표현하고 싶으면 skin/classic/simple/hello.png에서 파일을 읽어온다.

<window title="Hello, World Title">
<vbox>
<text value="Created By:" style="font-weight: bold;"/>
    <text value="Tester" class="url"
        onclick="window.open('http://hello.com'); window.close();"/>
</vbox>
<spring flex="1"/>
<image src="chrome://simple/skin/hello.png"/>
</window>

만약 hello, world 같은 문구를 “안녕”, “こんにちは”이라는 다국어로 표현하고자 한다면 locale이라는 디렉토리를 사용한다. locale에 ‘언어코드-국가코드’ 형태의 디렉토리를 만들고 사용하는 것이 일반적이다. 예를 들어 한국은 ko-KR, 미국은 en-US, 일본은 ja-JP 등이다. 이 때 모질라나 파이어 폭스는 브라우저의 언어 버전 혹은 사용자가 설정한 언어 locale에 따라 다른 언어로 메시지를 표시하게 된다.

locale에 메시지를 표현하는 파일은 각국 언어를 제대로 표현하기 위해 유니코드를 사용해야 한다. XUL에서 사용되는 메시지 표준인 .dtd 파일은 문자 인코딩을 BOM 코드가 들어 있지 않는 UTF-8로 설정해야 하며, properties 파일은 유니코드 표현방식을 \uXXXX로 설정한 후 저장해야 한다(윈도우의 노트 패드는 UTF-8 인코딩에 BOM이 포함되므로 주의해야 한다. Unired 문서 편집기를 사용하는 것을 권한다).

<!ENTITY hello.title "Hello, World Title">
<!ENTITY hello.createdby "Created By">

예를 들어 다음과 같이 simple.dtd 파일이 존재한다고 가정해 보자.

<!DOCTYPE dialog SYSTEM "chrome://simple/locale/simple.dtd">
<window title="&hello.title;">
<vbox>
<text value="&hello.createby" style="font-weight: bold;"/>
</vbox>
</window>

이제 Contents 폴더 아래의 contents, skin, locale 등의 파일들을 simple.jar로 묶고 install.rdf와 압축해 simpe.xpi로 만드는 것으로, 오른쪽 클릭 메뉴에 Hello world 창을 띄우는 간단한 확장기능을 완성할 수 있다.

마지막 과정은 설치 스크립트다. 모질라 1.x 버전과 파이어폭스 0.8 이하 버전은 RDF 기반의 설치 스크립트를 이용하지 않고 <리스트 4>와 같이 자바 스크립트 기반의 XPInstall 기능을 사용한다.

 <리스트 5> 자바 스크립트 기반의 XPInstall

확장기능을 위한 몇 가지 팁  
확장기능을 잘 만들기 위한 가장 최적의 방법은 기존의 확장기능을 잘 분석해 나만의 비법을 쌓아 가는 것이다. 모질라 업데이트(update.mozilla.org)나 한글 확장기능 사이트 (update.mozilla.or.kr)를 참조하면 좋은 확장기능을 찾을 수 있다. 여기서는 확장기능을 만들 때 알아 두면 좋은 몇 가지 팁을 소개한다.

◆ 만들어진 확장기능을 배포할 때 XPI라는 파일 포맷을 가지고 있기 때문에 다른 이름으로 저장을 하는 다운로드 창이 뜰 때가 있다. 이럴 때는 사용하는 웹 서버에 XPI에 대한 mime-type을 정해 줄 필요가 있다. 만약 웹 서버가 아파치라면 다음과 같다.

AddType application/x-xpinstall .xpi

◆ 확장기능을 일부 수정한 후 계속해서 XPI를 만드는 것은 매우 번거로운 일이다. 이 때는 7-zip(www.7-zip.org)이라는 압축 프로그램을 기초로 하는 배치 파일을 이용하면 편리하다. 아래는 makexpi.bat 파일의 내용이다.

set x=%cd%
md build\chrome
cd chrome
7z a -tzip "%x%.jar" * -r -mx=0
move "%x%.jar" ..\build\chrome
cd ..
copy install.* build
cd build
7z a -tzip "%x%.xpi" * -r -mx=9
move "%x%.xpi" ..\
cd ..
rd build /s/q

◆ install.rdf를 만드는 작업 역시 번거롭다. 자동으로 install.rdf를 만들어 주는 웹 사이트 (ted.mielczarek.org/code/mozilla/ffinstall/index.html)를 이용하면 편리하다.

◆ 확장기능을 개발하는데 편리한 확장기능(?)도 있다. Extension Developer's Extension들을 이용하면 실시간으로 XUL을 편집해 확인할 수 있고 자바 스크립트 기능을 구현하거나 install.rdf를 자동으로 생성하는 기능 등 다양한 확장기능을 만나 볼 수 있다(ted.mielczarek.org/code/mozilla/extensiondev/index.html)

파이어폭스 테마 만들기  
확장기능과 함께 브라우저의 외양을 자유자재로 바꿔주는 테마 기능 역시 파이어폭스의 주요 기능 중 하나이다. 귀여운 일반 테마부터 초기 넷스케이프 테마, 인터넷 익스플로러 테마까지 매우 다양한 종류의 테마들이 모질라 업데이트 사이트에 존재한다.

테마를 개발하는 것도 원리는 확장기능과 동일하다. 그러나 확장기능이 기존 브라우저 기능에 새로운 기능을 추가하는 것이라면 테마는 기존 브라우저의 외양만을 변경하는 것이므로 디렉토리 구조와 외양 변경 방법이 조금 다를 뿐이다.

테마 설치를 위한 xpi 파일을 풀어 보면 확장기능과 똑같은 구조로 되어 있고 실제로 확장기능과 같은 형태로 프로필 폴더에 저장된다. 실제 외양 정보가 들어 있는 jar 파일을 열어 보면 browser, communicator, global 같은 디렉토리가 있고 그 안에 주로 css 파일과 그림 파일이 있다. 파이어폭스 브라우저의 모든 메뉴와 항목과 외양은 모두 css로 스타일 정의가 되어 있으며 이를 약간만 변경하면 쉽게 나만의 테마를 만들 수 있다.

실전! LiveLines 확장기능 개발
LiveLines는 파이어폭스의 라이브 북마크(Live Bookmark) 버튼의 기능을 수정해 사용자가 원하는 프로그램에 RSS 피드를 추가할 수 있도록 하는 확장기능이다. 이 확장기능은 이미 발표된 것이지만 여기서 살펴보는 소스는 기존의 소스를 더 다듬은 것이다.

또한 본래 화면에 표시되는 문구들은 다국어 지원을 위해 XUL이나 스크립트 파일과 분리해 locale에 저장해야 하지만 사용하는 문구가 많지 않기 때문에 소스를 더 직관적으로 이해할 수 있도록 소스에 그대로 넣었다(여기에 실린 소스는 www.heygom.com/misc/livelines_src.zip에서 구할 수 있으며, 이 소스로 만들어진 확장기능은 www.heygom.com/misc/livelines_0.3.3_mod.xpi로 설치할 수 있다.)

RSS에 대한 이해  
- RSS : Really Simple Syndicate의 약자로 웹 사이트에 접속하지 않고도 해당 웹 사이트의 내용을 열람할 수 있는 기술이다. 메일 소식지가 진화한 형태라고도 볼 수 있다. 국내외의 언론 사이트와 블로그에서 쉽게 찾아볼 수 있는데, RSS 구독기를 이용해 원하는 사이트의 최신 글들을 쉽게 받아볼 수 있다. RSS는 XML 형식의 파일로 만들어지며 이런 파일 하나하나를 ‘피드’라고 한다.

- 라이브 북마크 : 파이어폭스의 북마크를 통해 RSS를 구독할 수 있게 해주는 기능이다. RSS 피드를 라이브 북마크로 추가하면 파이어폭스의 북마크에 해당 RSS의 내용이 표시된다.

<화면 1> 파이어폭스가 기본으로 제공하는 라이브 북마크

- Sage / Habari Xenu : 파이어폭스에서 사용할 수 있는 RSS 구독기로 RSS 목록을 손쉽게 관리할 수 있고 사용자가 지정한 간격으로 RSS를 자동으로 갱신할 수 있는 등 라이브 북마크보다 강력한 기능을 제공한다. RSS 피드는 사용자가 지정한 북마크 폴더에 북마크 형식으로 저장된다.

<화면 2> 파이어폭스에서 사용하는 RSS 구독기 Sage

- Bloglines(www.bloglines.com) : 웹 기반의 RSS 구독기로 RSS 목록이 웹에 저장되기 때문에 언제 어디서든 사용할 수 있다는 것이 장점이다. 국내에는 비슷한 기능을 하는 RSS넷(rss.daum.net)이 얼마 전에 문을 열었다.

<화면 3> 웹 기반의 RSS 구독기 Bloglines

파이어폭스 1.0부터는 RSS를 제공하는 사이트에 접속하면 상태막대 오른쪽에 라이브 북마크 버튼()이 표시되는데 이것을 클릭하면 해당 사이트가 제공하는 RSS 피드의 목록이 팝업 메뉴로 나타난다. 여기서 원하는 RSS 피드를 선택하면 라이브 북마크로 추가할 수 있다. LiveLines는 이 버튼의 기능을 수정해 라이브 북마크 외에 사용자가 원하는 구독기에 RSS 피드를 추가하는 기능을 갖고 있다.

또한 이 확장기능에는 RSS 피드 찾기 기능이 들어 있다. 파이어폭스는 HTML 문서의 <head> 안에 <link> 태그를 통해 지정된 RSS 피드만을 인식한다. 하지만 <link> 태그를 사용하지 않고 <a> 태그로 RSS 피드를 링크해 놓은 사이트가 많다. 이런 사이트를 위해 LiveLines는 <a> 태그로 연결된 RSS 피드를 찾아낸다.

LiveLines의 기본 정보를 담은 contents.rdf
contents.rdf 파일에는 LiveLines의 기본 정보가 담겨 있다. <리스트 5>에서 눈여겨 볼 것은 굵게 표시된 부분이다. 이것은 브라우저의 소스 파일(browser.xul)에 livelines.xul을 오버레이(overlay)한다는 선언이다. 오버레이는 한 파일에 다른 파일을 적용시킨다는 의미로, 여기서는 라이브 북마크 아이콘에 대한 정보가 browser.xul에 기록돼 있어 이것을 livelines.xul로 제어할 수 있도록 오버레이했다.

 <리스트 6> LiveLines 확장기능의 contents.rdf

오버레이를 선언할 때는 이처럼 먼저 오버레이의 대상이 되는 파일(browser.xul)을 지정하고 그 다음에 해당 파일에 적용될 파일(livelines.xul)을 지정한다. 참고로 browser.xul은 파이어폭스가 설치된 디렉토리 /chrome/browser.jar/content/browser안에 있는 파일로 브라우저 전체의 뼈대를 담고 있다.

LiveLines의 오버레이 정보를 담은 livelines.xul
livelines.xul는 LiveLines의 오버레이 정보를 담은 파일이다. <overlay> 요소에 오버레이할 요소들이 담겨 있다. 굵은 글씨로 표시된 부분이 라이브 북마크 버튼에 대한 정의이다. <statusbarpanel>에 id가 지정돼 있는데 만약 대상 파일(browser.xul)에 같은 id를 가진 요소가 있다면 거기에 겹쳐질 것이고, 그렇지 않다면 새로운 <statusbarpanel>로 추가될 것이다.

 <리스트 7> 오버레이 정보를 담은 livelines.xul

browser.xul에는 라이브 북마크 버튼에 해당하는 부분이 다음과 같이 정의되어 있다.

<statusbarpanel id="livemark-button" type="menu" class="statusbarpanel-menu-iconic" chromedir="&locale.dir;">
    <menupopup onpopupshowing="return livemarkFillPopup(this);"
        oncommand="livemarkAddMark(window._content, event.target.getAttribute('data'));" />
</statusbarpanel>

livelines.xul과 browser.xul의 내용을 비교해 보면, <statusbarpanel>은 id가 같으므로 겹쳐지지만 <menupopup>은 id가 지정돼 있지 않아 서로 영향을 주고 받지 않고 별개의 요소로 추가된다. 따라서 겹쳐진(overlay) 후에는 기존의 <statusbarpanel id="livemark-button">이 다음과 같이 변경된다. 굵은 글씨로 된 부분이 livelines.xul의 영향을 받은 것이다.

<statusbarpanel id="livemark-button" type="menu" class="statusbarpanel-menu-iconic" chromedir="&locale.dir;" onclick="objLiveLines.doPopup(window._content);">
    <menupopup position="1" onpopupshowing="livemarkFillPopup(this);"
        oncommand="objLiveLines.addWithLiveLines(window._content, event.target.getAttribute('data'));" />
    <menupopup onpopupshowing="return livemarkFillPopup(this);"
        oncommand="livemarkAddMark(window._content, event.target.getAttribute('data'));" />
</statusbarpanel>

원래 새롭게 추가되는 요소는 기존 요소의 뒤에 추가되지만 position 속성을 지정해 livelines.xul의 <menupopup>이 기존의 <menupopup>보다 앞에 위치하도록 했다. 이는 사용자가 <statusbarpanel id="livemark-button">을 클릭하였을 때 livelines.xul의 <menupopup>이 나타나도록 하기 위해서다. 기존의 <menupopup>에 id가 지정돼 있지 않아 livelines.xul가 제어할 수 없기 때문에 이런 편법을 사용했다.

각 요소의 이벤트에 지정된 함수의 기능은 다음과 같다.

◆ objLiveLines.doPopup : 사용자가 라이브 북마크 버튼(<statusbarpanel id="livemark-button">)을 클릭하면 해당 사이트의 RSS 피드 목록이 팝업 메뉴(<menupopup>)로 나타나고, 여기서 사용자가 선택한 피드가 구독기에 등록되는데, 이 과정을 생략하고 목록의 가장 첫 번째 피드가 등록되도록 하는 함수다.

◆ livemarkFillPopup : 이번 소스에는 팝업 메뉴의 내용 즉, 메뉴 항목(<menuitem>)이 정의되어 있지 않다. 서로 다른 사이트에 접속할 때마다 RSS 피드의 정보가 달라지기 때문이다. 이 함수는 팝업 메뉴가 표시될 때 해당 사이트의 RSS 피드 정보를 담은 메뉴 항목(<menuitem>)을 만든다. 해당 RSS 피드의 주소는 <menuitem>의 data 속성에 저장된다. 이 함수는 파이어폭스가 제공하는 것으로 browser.js(browser.xul과 같은 경로에 위치)에 정의돼 있다.

◆ objLiveLines.addWithLiveLines : 사용자가 RSS 피드를 선택하면(즉 <menuitem> 요소를 클릭하면) 호출되는 함수로 함수명에서 알 수 있듯 사용자가 선택한 RSS 피드를 사용자가 지정한 구독기에 등록한다.


 <리스트 8> livelines_setting.xul

설정창을 구현하는 livelines_setting.xul
livelines_setting.xul은 LiveLines 설정창의 XUL 파일이다. <리스트 7>과 같이 <dialog> 요소의 onload 이벤트에 지정된 함수는 이 창이 열렸을 때 실행되며, ondialogaccept 이벤트에 지정된 함수는 사용자가 확인 버튼을 눌렀을 때 실행된다. 이들 함수는 livelines.js에 정의돼 있다.

setMenu 함수는 사용자가 <groupbox> 안의 항목(<radio>)을 선택했을 때(oncommand) 실행되는데, 사용자가 선택한 항목에 따라 특정 항목의 사용 가능 여부를 변경하는 기능을 한다. 예를 들어 사용자가 ‘Bloglines에 추가합니다’를 선택했을 경우, RSS 추가 화면이 열릴 곳을 선택하는 메뉴(<menulist id="OpenSubPageIn">)를 사용할 수 있게 만든다. 사용자가 선택한 항목이 무엇인지는 <radiogroup id="addto"> 요소의 selectedIndex 값으로 알 수 있다. <화면 4>는 실제 실행 화면이다.

<화면 3> LiveLines 설정창


 <리스트 9> livelines.js

LiveLines의 기본 구조 livelines.js
<리스트 8>은 livelines.js의 기본 구조다. <a>로 링크된 RSS 피드를 찾기 위해서는 웹 페이지가 열릴 때마다 검사를 해야 하므로 load 이벤트에 리스너를 추가했다. LiveLines의 실제 기능은 관리를 쉽게 할 수 있도록 objLiveLines에 넣어 뒀다. objLiveLines 내부를 살펴보면, 먼저 prefService는 다음과 같이 설정 값을 관리하는 역할을 맡는다.

prefService: Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefService).getBranch('livelines.')

LiveLines가 사용하는 설정들은 다음과 같다.

◆ livelines.addto :정수로 기록되며 RSS 피드를 등록할 구독기(라이브 북마크, Bloglines, Sage, Habari Xenu, 클립보드 복사)를 가리킨다.
◆ livelines.OpenSubPageIn : 정수로 기록되며 RSS 피드를 Bloglines에 등록할 경우 피드 등록 페이지를 열 곳(현재 탭, 새 탭, 새 창)을 가리킨다.
◆ livelines.OpenBookmarkWindow_Sage : 값이 참이면 RSS 피드를 Sage로 등록할 때 사용자가 북마크 폴더를 지정할 수 있도록 북마크 대화상자를 연다.
◆ livelines.OpenBookmarkWindow_Xenu : livelines.OpenBookmarkWindow_Sage와 같은 기능을 하며 Sage 대신 Habari Xenu에 적용된다.
◆ livelines.PassPopup: 값이 참이면 RSS 피드를 선택하는 팝업 메뉴를 표시하지 않고 가장 첫 번째 피드를 구독기에 등록한다.
◆ livelines.FindRSS : 값이 참이면 <a>로 연결된 RSS 피드를 검색한다.

이러한 설정 값들은 파이어폭스의 설정 값들과 함께 저장되는데 이를 읽고 기록할 때는 파이어폭스가 제공하는 nsIPrefService를 이용한다. LiveLines의 설정은 모두 ‘livelines.’ 아래에 있으므로 getBranch 메쏘드로 ‘livelines.’로 시작하는 설정들만 읽도록 했다. 이처럼 선언하면 앞으로 prefService를 이용해 손쉽게 설정 값을 관리할 수 있다.

getPrefernces는 필요한 설정 값을 읽어 반환하는 함수이다. <리스트 9>처럼 두 개의 인자를 받는데 pref_name은 설정의 이름, pref_type은 설정 값의 형식(정수형, 문자형, 참거짓형)이다. 설정 값의 형식에 따라 설정 값을 읽는 메쏘드(getIntPref, getCharPref, getBoolPref)가 다르기 때문에 반드시 설정 값이 어떤 형식으로 저장돼 있는지 알아야 한다. 또 존재하지 않는 설정 값을 읽으려 하면 오류가 발생하므로 설정을 읽기 전에는 prefHasUserValue 메쏘드로 설정의 존재 여부를 확인할 필요가 있다.

 <리스트 10> 필요한 설정 값을 읽어 번환하는 getPrefernces 함수

RSS 피드 존재여부를 확인하는 checkAnchors4RSS
checkAnchors4RSS는 웹 문서의 <a>의 href 값을 검사해 RSS 피드가 존재하는지 확인하는 함수이다. <리스트 10>처럼 처음에 document.getElementById(“livemark-button”)를 검사하는 것은 라이브 북마크 버튼(<statusbarpanel id=“livemark-button”>)을 제어할 수 있는지 알아보기 위해서이다. LiveLines는 livemark-button의 기능을 변경하는 역할을 하므로 함수가 실행되는 시점에서 livemark-button 요소를 찾을 수 없다면, 다시 말해 접근할 수 없다면 더 이상 함수를 실행할 필요가 없기 때문이다.

 <리스트 11> checkAnchors4RSS 함수

그 다음에 gBrowser.mCurrentBrowser.livemarkLinks가 존재하는지 검사하는 것은 파이어폭스가 찾은 RSS 피드(<link>로 연결된 RSS 피드)들의 정보가 여기에 저장되기 때문이다. 라이브 북마크 버튼을 눌렀을 때 나타나는 팝업 메뉴의 각 항목(<menuitem>)은 이 개체를 바탕으로 만들어진다. 만약 livemarkLinks가 존재한다면 다시 RSS 피드를 검사할 필요가 없으므로 함수의 실행을 중단한다. 참고로 gBrowser는 탭 막대와 모든 탭을 포함하는 브라우저 창을, gBrowser.mCurrentBrowser는 현재 화면에 표시되는 탭의 브라우저 창을 가리킨다. 모든 탭은 서로 다른 livemarkLinks 개체를 갖고 있다.

LiveLines가 찾아낸 RSS 피드들의 주소는 rssfeeds에 배열로 저장된다. 이들도 파이어폭스가 찾은 RSS 피드와 동일하게 취급되도록 livemarkLinks에 rssfeeds의 값들을 넣어줘야 하지만 탭이 바뀔 때마다 gBrowser.mCurrentBrowser가 가리키는 개체가 바뀌므로, gBrowser.mCurrentBrowser.livemarkLinks에 직접 값을 넣으면 문제가 발생할 수 있다. 파이어폭스는 RSS 피드를 알리는 <link> 요소가 HTML 문서에 추가될 때마다 해당 탭의 livemarkLinks 값을 갱신하므로 rssfeeds의 값을 바탕으로 <link> 요소를 만들어 HTML 문서에 추가하면 LiveLines가 찾은 RSS 피드의 주소를 간접적으로 livemarkLinks에 등록할 수 있다. <리스트 10>의 마지막 부분에 있는 for 구문의 역할이 바로 이것이다.

RSS 피드 선택시 실행되는 addWithLiveLines 함수
addWithLiveLines는 라이브 북마크 버튼을 누르면 나타나는 팝업 메뉴에서, 원하는 RSS 피드(<menuitem>)를 선택했을 때 실행되는 함수로, 사용자가 지정한 구독기에 RSS 피드를 등록하는 함수를 호출한다. 두 개의 인자를 넘겨 받는데 wincontent는 지금 다루고 있는 HTML 문서가 표시되는 창을, data는 사용자가 선택한 RSS 피드의 주소(<menuitem>의 data 속성에 저장된 값)를 가리킨다. 호출되는 함수 중 livemarkAddMark는 RSS 피드를 라이브 북마크로 등록하는 함수이며 browser.js에 정의되어 있다.

addWithLiveLines: function(wincontent,data) {
    switch(this.getPreferences("addto","int")) {
        case LiveLines_AddtoLivemarks: livemarkAddMark(wincontent, data); break;
        case LiveLines_AddtoBloglines: this.addtoBlogLines(wincontent,data); break;
        case LiveLines_AddtoSage: this.addtoSage(wincontent,data); break;
        case LiveLines_AddtoXenu: this.addtoXenu(wincontent,data); break;
        case LiveLines_CopytoClipboard: this.copytoClipboard(data); break;
    }
}

RSS 피드를 Bloglines에 추가하는 addtoBloglines 함수
addtoBloglines는 RSS 피드를 Bloglines에 추가하는 함수이다. Bloglines는 웹 기반의 RSS 구독기이기 때문에 RSS 피드를 추가하려면 피드 추가 페이지를 이용해야 하는데, 그 주소는 http://www.bloglines.com/sub/ + RSS 피드 주소(예: http://www.bloglines.com/sub/http://www.bloglines.com/sub/ http://forums.mozilla.or.kr/rss.php) 형태가 된다.

 <리스트 12> addtoBloglines

피드 추가 페이지는 설정에 따라 현재 탭, 새 탭, 새 창에 열린다. 현재 탭에 여는 것은 HTML과 마찬가지로 document.location.href 값을 바꾸어 주면 된다. 새 창에 여는 것도 HTML에서처럼 window.open을 사용한다. 새 탭을 만들 때는 브라우저(gBrowser)의 addTab을 이용한다. getBrowser는 gBrowser를 반환하는 함수로 browser.js에 정의돼 있다. 이렇게 열린 탭이 선택되도록 하려면 브라우저의 selectedTab 값에 새로 연 탭의 인덱스를 지정해 주면 된다.

북마크로 추가하는 addtoSage 함수
Sage는 RSS 피드 목록을 북마크의 특정 폴더(기본 값은 Sage Feeds)에 북마크의 형태로 보관한다. addtoSage 함수의 역할은 그 폴더를 찾아내 RSS 피드를 북마크로 추가하는 것이다. 북마크를 추가할 때는 nsIBookmarksService의 createBookmarkInContainer 메쏘드를 이용한다.

createBookmarkInContainer가 받는 인자는 7가지인데 북마크의 이름, 주소, 키워드, 설명, 문자설정(charset), 폴더, 인덱스 순이다. 북마크의 이름은 현재 문서의 제목을 쓰고, 주소는 data에 RSS 피드의 URL이 저장되어 있으니 이 값을 바로 쓰면 된다.

 <리스트 13> RSS 피드를 북마크로 추가하는 sage addtoSage

문제는 Sage 폴더의 ID이다. 이것은 sage.folder_id 설정에 보관돼 있지만 일반 문자열로 되어 있어 nsIRDFService의 GetResource 메쏘드를 이용해 북마크에서 사용하는 RDF 리소스 형식으로 변환한 후 createBookmarkInContainer에 넘겨 줘야 한다. 나머지 값들은 null을 넘겨도 상관없다. 참고로 BMSVC와 RDF는 각각 nsIBookmarksService와 nsIRDFResource의 개체로, bookmarks.js(파이어폭스 설치 디렉토리/chrome/browser.jar/content/browser/bookmarks /bookmarks.js)에 정의되어 있다.

Habari Xenu에 추가하는 addtoXenu 함수
addtoXenu는 Habari Xenu에 RSS 피드를 추가하는 함수로 extensions. habarixenu.feeds_folder 값을 이용하는 것을 빼면 addtoSage와 차이가 없다.

 <리스트 14> Habari Xenu에 RSS 피드를 추가하는 addtoXenu 함수

RSS 피드 주소를 복사하는 copytoClipboard
copytoClipboard는 RSS 피드의 주소를 클립보드에 복사하는 함수이다. 이것은 XulPlanet(www.xulplanet.com)의 Using the Clipboard(www.xulplanet.com/tutorials/xultu/clipboard.html)에 소개된 코드를 그대로 사용한 것으로 이에 대한 자세한 설명은 위 문서에 잘 나타나 있다.

 <리스트 15> copytoClipboard

doPopup와 DirectAdd 함수
원래 라이브 북마크 버튼을 누르면 등록할 RSS 피드를 사용자가 선택할 수 있도록 팝업 메뉴가 나타난다. 다음과 같은 doPopup 함수는 사용자가 라이브 북마크 버튼을 클릭했을 때 호출되는데 livelines.PassPopup이 참일 때 팝업 메뉴를 숨기고 RSS 피드 목록의 가장 첫 번째 항목이 바로 구독기에 등록되도록 한다.

doPopup: function(wincontent)    {
    if (this.getPreferences("PassPopup","bool"))    {
        // 요소를 감춘다.
        gLivemarksButton.firstChild.hidePopup();
        this.DirectAdd(wincontent);
    }
}

여기서 gLivemarksButton은 요소를 가리키는 것으로, browser.js에 선언돼 있다. gLivemarksButton의 첫 번째 자녀(firstChild) 요소는 livelines.xul의 에서 정의한 요소이다. 이는 hidePopup 메쏘드로 간단히 감출 수 있다.
DirectAdd 함수는 다음과 같이 livemarkLinks에 저장된 RSS 피드 중 가장 첫 번째 주소를 addWithLiveLines 함수로 넘긴다.

DirectAdd: function(wincontent) {
    LivemarkLinks = gBrowser.mCurrentBrowser.livemarkLinks;
    data    = LivemarkLinks[0].href;
    this.addWithLiveLines(wincontent,data);
}

설정 값에 따라 상태를 변경하는 updateOptionDialog
updateOptionDialog 함수는 LiveLines 설정창(livelines_setting.xul)이 열릴 때 설정 값에 따라 각 요소들의 상태를 변경하는 역할을 한다. getPreferences 함수로 설정 값을 읽어오는 것을 빼면 앞에서 설명한 setMenu 함수와 기능이 비슷하다.

 <리스트 16> 설정 값에 따라 각 요소들의 상태를 변경하는 updateOptionDialog