파이어 폭스의 확장기능을 개발하면서 참조할만한 것들, 알게 된 것들을 모아 놓았다. 개발자를 위한 문서들의 한글화가 잘 되어 있어서 좋았다.

시작하기

파이어폭스 확장기능 만들기 에는 개괄적인 설명이 있다.

XUL로 만드는 firefox Extention 도 많은 도움이 된다.

이 슬라이드도 좋은 시작점이 될 것이다.

firefox 확장기능은 .xpi 확장자를 갖는 zip 압축 파일이다. MyExt.zip 를 다운 받아서 압축을 풀어보자. 이 디렉토리 구조가 확장기능의 구조이다.

install.rdf 파일

파이어폭스 확장기능을 설명하는 파일이다. 버젼, 개발자, 이름과 같은 여러 정보들이 포함된다. 자세한 내용은 intall.rdf 를 참조한다.

chrome.manifest 파일

확장기능이 사용하는 chrome과 overlay 에 대한 설정이 있는 파일이다. 자세한 내용은 Manifest files 를 참조.

Chrome 에 대해서

Chrome 에 대한 설명이다. 한글로 설명하기 애매해서 영문 버젼을 인용한다.

Chrome is the user interface parts of the application window that are outside of a window's content area.

Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

• UI 관련한 파일들(xul, css, js, dtd, ...)이 들어 있는 공간(디렉토리)
• 예를 들면 확장기능에서는 UI 관련 파일들이 있는 디렉토리를 chrome package라고 할 수 있음. 이 디렉토리를 chrome으로 이용하기 위해서는 chrome.manifest에 다음 같은 방식으로 선언이 필요함.

1. content sample chrome/chromeFiles/content/

• 종류는 conent, locale, skin 이렇게 세가지가 있다.
• 파이어폭스는 Chrome들을 관리하는 Chrome Manager 라는 컴포넌트를 가지고 있다. Chrome Manager는 등록된 Chrome들의 정보를 이용해 사용자 인터페이스를 설치하고 만들어낸다.

• 파이어폭스에서 Chrome 의 파일에 접근하기 위해서는 Chrome URL를 사용한다. (예: chrome://sample/content/browser.xul)

• Chrome URL는 다음과 같이 구성된다.

  • "URI_scheme://package_name/parts/path_to_file"
  • chrome://sample/content/browser.xul

locale 사용하기

locale을 사용해서 다양한 언어를 지원하도록 할 수 있다. 자세한 내용은 http://developer.mozilla.org/index.php?title=Ko/Localization 참조.

다음은 한국어와 영어를 지원하는 확장기능을 만드는 과정이다.

ROOT/chrome/locale/en-US/sample.dtd,

ROOT/chrome/locale/ko-KR/sample.dtd 파일을 생성한다.

그리고 chrome.manifest에 등록한다.

1. locale  sample en-US  chrome/locale/en-US/
2. locale  sample ko-KR  chrome/locale/ko-KR/

이제 Chrome URL(chrome://sample/locale/sample.dtd)를 통해서 dtd 파일에 접근할 수 있다.

locale을 사용하는 XUL 파일, sample.xul에 다음과 같이 선언을 해 준다.

1. <!DOCTYPE window SYSTEM "chrome://sample/locale/sample.dtd">

sample.dtd에 필요한 locale 정보를 작성한다.

1. <!ENTITY registerLabel "등록">

sample.xul에서는 이렇게 사용할 수 있다.

1. <caption label="&registerLabel;"/>

xul에 대해서

XUL Tutorial 을 살펴보면 기본적인 것들에 대해서 알 수 있을 것이다.

더 자세한 것을 원한다면 http://developer.mozilla.org/ko/XUL 를 보자.

XUL을 이용해서 간단한 테스트를 하고 싶다면 live XUL editor 를 이용해 보자.

overlays

overlay를 이용하면 이미 존재하고 있는 파이어폭스 UI를 변경할 수 있다. 예를 들면 파이어폭스의 상태바에 확장기능의 아이콘을 추가 및 삭제할 수 있다.

overlay의 예

다음은 help메뉴에 'online' 이라는 항목을 추가하는 overlay

1. <overlay id="sample_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
2.  <menu id="help-menu">
     <menupopup id="help-popup">
      <menuitem id="help-online" label="online"/>
     </menupopup>
    </menu>
   </overlay>

'help-menu' 이라는 id를 갖는 메뉴에 online 이라는 menuitem을 추한다. 만약 'help-menu'라는 id가 없으면 아무것도 하지 않는다.

toolbar 에 넣을 수 있는 아이콘을 추가하고 싶은 경우

1.  <toolbarpalette id="BrowserToolbarPalette">
     <toolbarbutton id="sample-button" image="chrome://sample/content/icons/toolbar-button.png" >
     </toolbarbutton>
    </toolbarpalette>

statusbar에 아이콘을 추가하고 싶은 경우

1. <statusbar id="status-bar">
     <statusbarpanel class="statusbarpanel-iconic" id="sample-status" src="chrome://sample/content/icons/toolbar-button.png" />
   </statusbar>

도구 메뉴에 추가하고 싶은 경우

1. <menupopup id="menu_ToolsPopup">
    <menuitem label="sample" insertafter="devToolsSeparator" oncommand="alert('why?');" />
   </menupopup>

사이드바 만들기

http://developer.mozilla.org/index.php?title=En/Creating_a_Firefox_sidebar

http://developer.mozilla.org/en/Code_snippets/Sidebar

broadcaster 와 observe는 무엇인가?

http://developer.mozilla.org/En/XUL_Tutorial/Broadcasters_and_Observers

browser.js 에 있는 toggleSidebar() 함수를 이용해서 사이드바를 보이고 사라지게 할 수 있다.

Tips

firefox 의 주소창에 about:config을 치면 firefox의 환경설정(preference)를 볼 수 있음.

xpath 사용하기 : http://developer.mozilla.org/Ko/Using_XPath

DOM inspector를 이용하면 XUL 의 DOM 구조를 쉽게 확인할 수 있다.

개발중 테스트하기

기본 프로파일 디렉토리로 이동한다. 윈도우에서는 아마도 "C:\Documents and Settings\...\Application Data\Mozilla\Firefox\Profiles\xxxxx.default" 일 것임.

1. extentions 폴더로 이동해서 파일을 하나 생성한다. 파일 이름은 확장기능의 id로 한다. 파일의 내용은 확장기능이 위치하고 있는 디렉토리 이름이다.
   예) c:\sample\
2. firefox를 재시작하면 개발중인 확장기능을 도구>부가기능 메뉴을 통해서 볼 수 있다.
3. chrome URI를 통해서 개발중인 xul파일에 접근할 수 있다. chrome URI를 이용할 수도 있지만, xul 파일을 드래그 앤 드롭으로 파이어폭스에 가져다 놓아도 된다. chrome URI 보다 드래그 드롭으로 하는 것이 더 좋은데, 왜냐하면 변경된 내용이 새로고침했을 때 바로 적용되기 때문이다.

프로파일에 대해서는 [firefox] profile 이용하기 참조.

배포하기

zip 으로 압축한 후 확장자를 xpi로 바꾼다. 압축할 때는 알집을 사용하지 말고 마우스 오른 버튼 클릭해서 나오는 메뉴의 보내기 > 압축폴더 를 이용하도록 하자. 알집으로 하면 안된다.

.xpi 파일을 부가기능 목록에 드래그 앤 드랍 하면 확장기능이 설치된다. 이렇게 테스트가 마쳐졌으면 http://addons.mozilla.org/developers/ 페이지에 확장기능을 등록한다. 정식으로 공개되기까지는 테스트가 필요하다.

이 글은 스프링노트에서 작성되었습니다.