블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

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      

'Firefox'에 해당되는 글 2

  1. 2008.09.05 Firefox Extension 배포하기
  2. 2008.04.15 오페라,사파리의 DOM Inspector(6)
2008. 9. 5. 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 초딩입맛제주아재

댓글을 달아 주세요

2008. 4. 15. 15:43 Programing/HTML/JavaScript/CSS
FireFox 확장 기능 중 웹 개발자들이 가장 많이 사용하는 확장 기능은 아마 FirebugWeb Developer가 아닐까 합니다.
웹 개발자의 필수품, Firebug

Web Developer 역시 없어서는 곤란하죠~

두 확장기능은 웹개발시 없어서는 안될 정말 유용한 툴들이죠.
IE에도 IE Developer 이라는 툴이 있어서 어느정도 유용하게 쓸 수 있습니다만 위의 것들에 비해 좀 부실한 면이 없지 않습니다.
반면 OperaSafari에는 저러한 툴이 없어 아쉬웠는데요, 그런 아쉬움은 이제 추억으로 묻어버려도 좋을 것 같습니다.


Opera Inspector

오페라 9.0 이후 버전 부터는 간단한 조작만으로 브라우저에 Inspector를 설치 할 수 있습니다.
설치를 위해서는 오페라 9.0 이후 버전으로 다음 URL의 페이지를 엽니다.
http://dev.opera.com/tools/

오페라 DOM Inspector 설치 버튼

그럼 위와 같은 버튼 두 개가 보이는데요, 저 버튼들을 드래그 하여 오페라 브라우저의 툴바에 드롭하는 것으로 Inspector의 추가는 끝납니다.

버튼을 드래그 하여 이곳에 드롭하면

설치 진행 여부를 확인하는 창이 뜨고, 예를 클릭하면,


새로운 툴바 버튼이 생성이 됩니다

이제 Opera의 DOM Inspector의 위용을 한 번 볼까요?

이쁘게도 생겼네요~

DOM Tree,CSS inspect, HTTP network 정보까지 Firebug와 비교해도 전혀 손색이 없죠? ^^

이번엔 사파리쪽을 살펴볼까요?


Safari Inspector

Safari 3.1 부터는 브라우저에 Inspector를 내장하고 있습니다.
하지만 메뉴속에 꼭꼭 숨어있어서 있는지조차 모르고 있었습니다;;;

메뉴의 편집>기본설정 또는 Ctrl + ,(콤마)를 누르면 아래와 같은 패널이 뜹니다.
Safari의 설정 패널

고급 탭의 하단을 보시면 "메뉴 막대에서 개발자용 메뉴 보기" 라는 항목이 있습니다.
이걸 체크해서 활성화를 시켜주면 메뉴바가 다음과 같이 바뀝니다.

단, Mac용 Safari에서 Inspector를 활성화 하려면 콘솔에서 아래와 같이 해주시면 됩니다.

defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true


사용자 삽입 이미지

개발자용 메뉴가 새로 생겼습니다~ 캬~
메뉴를 클릭해보면 다양한 세부 항목들이 보입니다.

사용자 삽입 이미지

 Inspector의 활용방법은 간단합니다.
웹페이지의 요소에서 마우스의 우측버튼을 클릭하면 컨텍스트 메뉴 하단에 "구성 요소 점검" 이란 항목이 보입니다. 클릭하면 아래와 같은 감개무량한 Safari의 Inspector이 모습을 드러냅니다...

역시 애플 답구나~@.@

이제 Inspector를 쓰기위해 특정 브라우저를 고집할 이유는 없어진듯 합니다.(물론 지극히 주관적인 의견일테지만요~^^)
Opera,Safari도 많이 사랑해주세요~~^^




posted by 초딩입맛제주아재

댓글을 달아 주세요

  1. 달룟 2008.04.16 23:59  Addr Edit/Del Reply

    좋은 정보 감사드립니다. 맥을 쓰고 있어서 주로 사파리만 쓰는데, 이런 기능이 있는지 몰랐네요.

  2. 달룟 2008.04.19 23:42  Addr Edit/Del Reply

    네~ 다음에 또 올께요.

  3. 다람G 2009.10.28 22:06  Addr Edit/Del Reply

    이거 쓰려고 오페라에서 버튼을 드래그 해봤는데, 그냥.. 텍스트가 긁혀요~(블럭) 정말 드래그하면 가지나요??

    • BlogIcon 초딩입맛제주아재 2009.11.10 18:46 신고  Addr Edit/Del

      최근에 나온 오페라에는 Dragonfly 라는 디버깅 툴이 내장되어 있습니다. http://asrada2001.tistory.com/239 요기 참고 하시구요. Dragonfly 를 사용하시는게 훨씬 좋습니다~^^

  4. 마약 2010.10.20 13:28  Addr Edit/Del Reply

    문제점이 하나 있네요...
    오페라, 사파리 테스트 해봤는데, 각각 엘리먼트들 사이에 줄바꿈 공백 노드가 실제로 존재하지만, inspector에서 #text노드를 표시하지 않아요...혹시 따로 어떤 셋팅이 필요한가요?

prev 1 next