블로그 이미지
물결(Wave)
하고 싶은 것만 하며 살고 싶다

calendar

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

'Programing/XUL'에 해당되는 글 3

  1. 2008.09.05 Firefox Extension 배포하기
  2. 2007.12.02 웹페이지를 데스크탑 어플리케이션으로...
  3. 2007.11.16 XUL - Firefox ectention 만들기(2)
2008.09.05 13:37 Programing/XUL

Firefox Extension을 배포하기 위해서는 몇 가지 간단한(?) 절차를 거쳐야 합니다.

1.install.rdf 자동 업데이트 설정

install.rdf파일은 익스텐션의 기본 정보를 갖고 있는 파일이고 이 파일을 통해서 브라우저는 새로운 버전이 있는지를 확인 할 수 있게 됩니다.

install.rdf

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<RDF:RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
    <RDF:Description about="urn:mozilla:install-manifest">
        <em:aboutURL>chrome://myextension/content/about.xul</em:aboutURL>
        <em:creator>작성자</em:creator>
        <em:description>익스텐션 설명</em:description>
        <em:homepageURL>작성자 홈페이지 URL</em:homepageURL>
        <em:iconURL/>
        <em:id>익스텐션 ID(예: asrada@asrada.net)</em:id>
        <em:name>익스텐션 이름</em:name>
        <em:version>0.1.0</em:version>
        <em:updateURL>익스텐션 업데이트를 확인할 URL(예: http://asrada2001.tistory.net/myextension/update.php</em:updateURL>
        <em:type>2</em:type>
        <em:targetApplication>
            <RDF:Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:maxVersion>2.0.*</em:maxVersion>
                <em:minVersion>1.5</em:minVersion>
            </RDF:Description>
        </em:targetApplication>
    <em:optionsURL/></RDF:Description>
</RDF:RDF>

위와 같이 <updateURL>속성을 써주면 브라우저가 시작될때 자동으로 익스텐션의 업데이트 정보를 확인합니다.

보다 자세한 내용을 원하시는 여기를 보세요.

일단 install.rdf파일을 만들어 두고 update.rdf파일을 만듭니다.

update.rdf 파일은 아래와 같이 간단하게 만들 수 있습니다.

(저는 update.rdf로 통계 값을 확인 하기 위해 php로 작성하였으나 일반 rdf 파일로 작성하셔도 됩니다.)


update.rdf - text/rdf 형태로 전송

<?php
header('Content-Type: text/rdf');

echo <<<heredoc
<?xml version="1.0"?>

<r:RDF xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns="http://www.mozilla.org/2004/em-rdf#">

<r:Description about="urn:mozilla:extension:익스텐션 ID(install.rdf 에 있는 것과 동일)">
<updates>
<r:Seq>
<r:li>
    <r:Description>
        <version>0.1.1</version>
        <targetApplication>
            <r:Description>
                <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id>
                <minVersion>1.5</minVersion>
                <maxVersion>2.0.0.*</maxVersion>
                <updateLink>
새로 업데이트 된 확장기능의 URL(예: http://asrada2001.tistory.com/myextension/new_extension.xpi)</updateLink>
            </r:Description>
        </targetApplication>
    </r:Description>

</r:li>
</r:Seq>
</updates>

<version>상동</version>
<updateLink>상동</updateLink>

</r:Description>
</r:RDF>
heredoc;
?>


Firefox3를 위한 설정

Firefox3부터는 익스텐션 관리에 있어 보안이 한층 두터워 졌습니다.

updateLink가 https 프로토콜을 사용하지 않는다면 무조건 아래의 절차를 밟아야 합니다.


우선 익스텐션 패키지에 대한 updateHash를 얻어야 합니다.

이때 사용되는 해싱알고리즘은 sha1, sha256, sha384 , sha512 중에 아무거나 쓰시면 됩니다.

많이 사용하는 openSSL 을 예로 들어보겠습니다.

openssl sha1 FILE

간단하죠?

명령이 실행되면 콘솔에 해시가 출력됩니다. 이것을 잘 복사 하셔서 update.rdf에 추가하면 됩니다.

이때 주의 하실 점은 아래와 같이 해시 코드 앞에 꼭 해싱 알고리즘을 명시해야 한다는 것입니다.

<em:updateHash>sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em:updateHash>

다음으로 익스텐션의 updateKey를 만들어야 하는데 McCoy라는 툴을 이용하면 자동으로 이루어집니다.

McCoy의 Create버튼을 클릭해서 공개키를 만듭니다. 그리고 Install버튼을 클릭하고 install.rdf 파일을 선택하면 자동으로 install.rdf에 updateKey가 추가됩니다.

그리고 Sign버튼을 클릭해서 update.rdf 파일을 선택합니다. 역시 자동으로 McCoy가 update.rdf파일을 변경해줍니다.

패키지 생성

zip형식으로 압축 -> 확장자를 xpi 로 변경

이제 패키징을 할 차례입니다.

install.rdf를 익스텐션 소스파일의 루트에 넣고 zip 형식으로 압축합니다.

그리고 확장자를 xpi 로 변경해주면 익스텐션 패키지가 완성됩니다.

이제 진짜 배포하는 일만 남았는데 한 가지 아주 간단한 작업이 남았습니다....


Apache httpd.conf 수정

자신의 서버에서 익스텐션을 배포하려면 Apache가 xpi 파일을 허용하도록 아래의 내용을 httpd.conf에 추가해야 합니다.

AddType application/x-xpinstall .xpi

이제 다 됐습니다. 이제 위 설정 파일에서 지정해 준대로 update.rdf파일과 익스텐션 패키지 파일을 두시고 익스텐션 다운로드 링크를 생성해서 배포 하시면 됩니다.

이후 익스텐션을 수정하여 버전업이 이루어지면 위 순서대로 반복하시면 됩니다. 그럼 이전 버전의 익스텐션을 사용하는 브라우저가 시동될 때 자동으로 업데이트 된 익스텐션을 확인하고 사용자에게 알려줍니다.


보다 자세한 정보는 여기에서 확인 하실 수 있습니다.

신고

'Programing > XUL' 카테고리의 다른 글

Firefox Extension 배포하기  (0) 2008.09.05
웹페이지를 데스크탑 어플리케이션으로...  (0) 2007.12.02
XUL - Firefox ectention 만들기  (2) 2007.11.16
posted by 물결(Wave)
2007.12.02 00:09 Programing/XUL
Prism

이러한 가운데 새로이 발표된 것이 Mozilla Lab의 Prism이다.(많은 사람들은 - 구글이 Mozilla의 중요한 sponsor라는 점이 아니더라도 - 정서적으로 구글과 Mozilla를 한 묶음으로 보는 경향이 강하다. 해서 Prism이 구글에 차용될 것이라는 의견도 많다.) 현재 Prism은 스스로 표방하는 많은 기능 중에서 일부만이 구현되어 그리 감동적인 것은 되지 못하나 웹 어플리케이션을 데스크탑처럼 보이게(!) 하는데에는 성공 하였다.

여기서 몇 가지 프리즘 관련 정보들


Prism(for Windows) Download here
Mozilla Lab Prism page here
Mark Finkle's blog here
Mitchell Baker's post here

신고

'Programing > XUL' 카테고리의 다른 글

Firefox Extension 배포하기  (0) 2008.09.05
웹페이지를 데스크탑 어플리케이션으로...  (0) 2007.12.02
XUL - Firefox ectention 만들기  (2) 2007.11.16
posted by 물결(Wave)
2007.11.16 14:50 Programing/XUL

XUL((XML User-interface Language)



<xul로 만드는 Firefox extention>

작성자: 유시형   
작성일: 2007.11.12


I. XUL이란?

XUL Mozilla browser를 쉽고 빠르게 만들기 위한 목적으로 만들어진 XML기반의 마크업 언어로서 실제로 Firefox Thunderbird UI를 만드는데 사용되었습니다. 통상 zool()이라고 발음하며 XUL이라는 이름에서 알 수 있 듯 XML로 할 수 있는 모든 것을 제공하고 인터넷과 연결되거나 또는 연결되지 않은 채로 동작하는 풍부한 기능을 제공하는 크로스 플랫폼 응용프로그램을 만들 수 있게 해줍니다.

XUL로 만들 수 있는 어플리케이션의 유형을 몇가지 살펴보면 다음과 같습니다.

  • Firefox extention
  • Standalone XULRunner application
  • XUL package
  • Remote XUL application


XUL
XML의 문법을 그대로 사용하고 있기 때문에 DHTML에 친숙한 웹 개발자들은 XUL을 금방 배워서 바로 응용프로그램을 만들어 볼 수 있습니다. namespace 를 사용하여 HTML엘리먼트를 XUL문서에 삽입 할 수도 있습니다.(, <html:textarea value="hello"></html:textarea>)

 

II. Firefox extention 만들기

Firefox extention은 두 개 이상의 각각 독립적인 XUL어플리케이션을 묶어 하나의 어플리케이션처럼 사용 할 수 있게 해주는 XUL <overlay>엘리먼트를 사용하여 만들 수 있습니다.

예 제의 extention Firefox의 메뉴바에 "다음" 이라는 메뉴항목을 추가 하고 해당 메뉴에 Firefox의 새 탭 혹은 현재 탭에서 다음 서비스 페이지로 이동시키는 몇 개의 메뉴아이템을 추가하는 기능을 같습니다. extention 개발에 필요한 도구는 단지 간단한 텍스트 에디터와 Firefox뿐입니다.

개발순서는 다음과 같습니다.

1.      디렉토리 생성 및 설정파일 작성

2.      extention  개발 정보를 담고 있는 about.xul 파일 작성

3.      firefox의 메뉴바에 추가할 메뉴와 항목들에 대한 내용을 담고 있는 xul 파일 작성

4.      사용자 행동을 처리할 함수를 갖고 있는 javascript 파일 작성

5.      chrome 시스템에 extention 등록

 

1.개발환경 구성하기

* 한글 표현을 위해서는 소스 파일을 UTF-8로 인코딩 해야 합니다.

l        디렉토리 구조

daummenu(*)/
  + chrome/
     + content
         + main.xul(*)
        + script.js(*)
     + locale/
     + skin/
  + defaults/
     + preferences
        + prefs.js
  +components/
  + install.rdf
   + chrome.manifest

l        install.rdf
XUL
어플리케이션의 기본 정보를 설정하는 파일입니다. 제작자 정보, 프로그램 버전, 실행가능한 어플리케이션의 범위등을 설정 할 수 있으며, 특히 <em:id>엘리먼트의 값은 어플리케이션의 고유 번호와 같은 역할을 하며 어플리케이션을 chrome시스템에 등록 할 때 등록 파일의 이름으로 사용되어집니다.

<?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:aboutURL>chrome://daummenu/content/about.xul</em:aboutURL>
   <em:id>daummenu@asrada.net</em:id>
   <em:version>1.0</em:version>
   <em:type>2</em:type>

   <!-- Target Application this extension can install into, with minimum and maximum supported versions. -->
   <em:targetApplication>
     <Description>
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>1.5+</em:minVersion>
      <em:maxVersion>2.0.0.*</em:maxVersion>
     </Description>
   </em:targetApplication>

   <!-- Front End MetaData -->
   <em:name>Daum Menu</em:name>
   <em:description>extention example</em:description>
   <em:creator>Asrada</em:creator>
   <em:homepageURL>http://asrada2001.tistory.com/</em:homepageURL>
  </Description>
</RDF>

l        chrome.manifest
어플리케이션의 환경 설정 역할을 담당하는 파일입니다. 다른 어플리케이션과의 overlay 를 설정하거나 skin,locale 파일들의 위치 정보를 설정 할 수 있습니다.

content daumment chrome/content/
overlay chrome://browser/content/browser.xul chrome://daummenu/content/main.xul

공백으로 구분 되는 각 컬럼의 의미는 아래와 같습니다.
1.chrome
패키지 안에 material
2.chrome
패키지 이름(overlay의 경우 overlay될 어플리케이션의 경로)
3.chrome
패키지 파일의 위치(overlay의 경우 overlay할 어플리케이션의 경로)

(
복잡한 chrome.manifest 파일의 예)

content       necko                   jar:comm.jar!/content/necko/ xpcnativewrappers=yes
locale               necko       en-US       jar:en-US.jar!/locale/en-US/necko/
content       xbl-marquee             jar:comm.jar!/content/xbl-marquee/

content       pipnss                  jar:pipnss.jar!/content/pipnss/

locale        pipnss      en-US       jar:en-US.jar!/locale/en-US/pipnss/

# Firefox-only
overlay chrome://browser/content/pageInfo.xul          chrome://pippki/content/PageInfoOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}

overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/PrefOverlay.xul

overlay chrome://navigator/content/pageInfo.xul        chrome://pippki/content/PageInfoOverlay.xul application=seamonkey@applications.mozilla.org

content       pippki                  jar:pippki.jar!/content/pippki/ xpcnativewrappers=yes
locale        pippki      en-US       jar:en-US.jar!/locale/en-US/pippki/

content       global-platform        jar:toolkit.jar!/content/global-platform/ platform

skin          global      classic/1.0 jar:classic.jar!/skin/classic/global/

override chrome://global/content/netError.xhtml jar:embedder.jar!/global/content/netError.
토싀

content       inspector              jar:inspector.jar!/content/inspector/ xpcnativewrappers=no

* What is 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.

·        chrome - the browser UI around the web page

·        chrome URLs - the chrome protocol which is the only way to get privileges(ex.chrome://browser/content/browser.xul)

·        chrome directory - the directory where the apps put their UI files

·        chrome command line argument - start and open a file in a top level window

·        chrome argument to window.open - opens a new window top level

·        chrome.rdf - the chrome registry, in install directory and in profile

2.about.xul

<?xml version="1.0" encoding="utf-8"?>

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

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"title="About favdaum" orient="vertical" buttons="accept" width="320" height="240">

<groupbox align="center" flex="1">

<vbox align="center">

<description id="title" value="Daum Menu" />

<description id="version" value="version: 0.1.0" />

<description id="created" value="created by" />

<description id="author" value="Asrada" />

</vbox>

</groupbox>

<description id="made" value="Made with EditPlus" />

</dialog>

3.main.xul

<?xml version="1.0" encoding="utf-8"?>

<overlay id="daummenu" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script src="script.js" />

<menubar id="main-menubar">

<menu id="daumMenu" label="다음" insertbefore="helpMenu" accesskey="D">

<menupopup id="daumMenuPop">

<menu id="entertainment" label="엔터테인먼트" accesskey="E">

<menupopup id="ent_pop">

<menuitem id="cartoon" label="만화·소설" oncommand="openURL('http://comic.daum.net/?nil_profile=g&amp;nil_site=comic',event)" />

<menuitem id="music" label="뮤직" oncommand="openURL('http://52street.daum.net/?nil_profile=g&amp;nil_site=music',event)" />

<menuitem id="movie" label="영화" oncommand="openURL('http://movie.daum.net/?nil_profile=g&amp;nil_site=movie',event)" />

</menupopup>

</menu>

<menuseparator/>

<menuitem id="daumHome" label="Home" oncommand="gBrowser.addTab('http://www.daum.net')" />

<menuitem id="daumYV" label="YouthVoice" oncommand="gBrowser.addTab('http://youthvoice.daum.net')" />

<menuitem id="daumMS" label="MediaSchool" oncommand="gBrowser.addTab('http://mediaschool.daum.net')" />

</menupopup>

</menu>

</menubar>

</overlay>

4.script.js

function openOnCurrentTab(url){

gBrowser.selectedBrowser.setAttribute("src",url);

}

function openURL(url){

if(arguments.length == 2 && arguments[1] instanceof Event && arguments[1].shiftKey == true){

var newTab = gBrowser.addTab(url);

gBrowser.selectedTab = newTab;

}else{

openOnCurrentTab(url);
}

}

5.Chrome 시스템에 등록

만들어진 extention chrome 시스템에 등록을 해야 사용이 가능합니다. firefox의 경우 profile 디렉토리에 등록 파일을 만드는 것으로 간단히 extention을 추가 할 수 있습니다.

* 윈도우 사용자의 경우 실행(윈도우키 + R)메뉴에서 %APPDATA% 를 입력하면 사용자 어플리케이션 데이터 폴더가 열립니다.그 안에서 Mozilla>Firefox>Profiles>bz94kxr2.default(사용자마다 다름)>extensions 폴더가 Firefox chrome시스템 디렉토리입니다

등록 파일의 이름은 install.rdf 파일에서 만든 extention ID와 동일하게 설정하고 내용은 extention의 루트 디렉토리 - 엄밀히 말하면 chrome 디렉토리의 부모 디렉토리 - 입니다.

) 등록파일: daummenu@asrada.net

내 용: E:\workspace\xul\daumment

등 록 과정을 마친 후 Firefox를 실행시켜보면 메뉴바의 help 메뉴 왼쪽에 "다음" 이라는 메뉴가 추가되었음을 확인할 수 있습니다. 그리고 Firefox의 도구 > 부가기능을 보면 우리가 만든 daummenu 라는 확장기능이 표시가 되고 daummenu에서 오른쪽 버튼을 눌러 "daummenu 정보"를 클릭하면 about.xul의 내용이 다이얼로그로 나타납니다.

III.with XPCOM

XPCOM Microsoft COM과 비슷한 Cross Platform Component Object Model로서 Java,Javascript,Python,perl,Ruby 등 다양한 언어로 컴포넌트를 사용하거나 인터페이스를 구현 할 수 있으며 파일과 메모리 관리,쓰레드 제어 등 XUL Javascript로는 불가능한 부분을 구현 할 수 있도록 해줍니다. XPCOM 컴포넌트는 C++ 뿐만 아니라 Javascript로도 구현 할 수 있기 때문에 C++을 다룰줄 몰라도 원하는 컴포넌트를 손 쉽게 만들어 사용할 수 있습니다.

* 작업표시줄 위로 메세지 다이얼로그를 보여주는 예제

var alertsService = Components.classes["@mozilla.org/alerts-service;1"].getService(Components.interfaces.nsIAlertsService);
alertsService.showAlertNotification("chrome://mozapps/skin/downloads/downloadIcon.png", "
업데이트가 있습니다", "확인", false, "", null);

 

* 파일 복사를 구현한 예제

function copyFile(sourcefile,destdir)

{

// get a component for the file to copy

var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);

if (!aFile) return false;

// get a component for the directory to copy to

var aDir = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);

if (!aDir) return false;

// next, assign URLs to the file components

aFile.initWithPath(sourcefile);

aDir.initWithPath(destdir);

// finally, copy the file, without renaming it

aFile.copyTo(aDir,null);

}

copyFile("/mozilla/testfile.txt","/etc");

 

참고문헌

 

신고

'Programing > XUL' 카테고리의 다른 글

Firefox Extension 배포하기  (0) 2008.09.05
웹페이지를 데스크탑 어플리케이션으로...  (0) 2007.12.02
XUL - Firefox ectention 만들기  (2) 2007.11.16
posted by 물결(Wave)
prev 1 next