파이어폭스 부가기능 개발 - ADD-ON builder (firefox plugin 개발)

파이어 폭스에서 ADD-ON을 개발하려고 한다. plug-in이랑 뭐가 다른지 정의는 잘 모르겠으나 한국말로는 부가기능이라 써있다. 
일단 browser plugin에 대해서는 개털도 모르는데 mozilla에서 ADD-ON SDK를 제공해서 가봤다.

신기한게 ;; web상에서 부가기능(ADD-ON)을 개발 할 수 있다는 것이다.
그럼, 모질라의 개발자 허브로 들어가 보자
https://addons.mozilla.org/ko/developers/

여기에는 부가기능(ADD-ON) 제작 방법이 나와있다.
그러다가 add-on builder라는 것을 찾았는데 내용인 즉슨 web상으로 add-on을 개발하는 것

https://builder.addons.mozilla.org/
가입하고 로그인 해보면 아래와 같은 페이지가 나온다.

< 그림 1 >

How to Get Started 버튼을 눌러서 들어가면 tutorial이 나온다.
주소 : https://builder.addons.mozilla.org/tutorial/

내용은 이렇다. add-on을 생성하고 아래 예제를 넣어보라는 것이다.

< 그림 2 >


저기서 녹색 Create Add-on 버튼을 누르면 개발 환경을 마련해 준다.
실제로 해보면 바로 이렇게 생겼다.

< 그림 3 >

저기 export.main 머시기 써있는 곳에서 이제 coding을 하시면 되겠다.
< 그림 2 >에서  설명해준 것 처럼

exports.main = function() { };
밑에

require("widget").Widget({
    id: "widgetID1",
    label: "My Mozilla Widget",
    contentURL: "http://www.mozilla.org/favicon.ico"
});


코드를 붙여 넣어본다. 




< 그림 4 > 

그림에서 보면 브라우저의 오른쪽 맨 아래에 아래 파이어폭스 아이콘이 생겨나는 것을 볼 수 있다.

코드의 내용은 대충 이렇다.
widget 모듈을 로딩한다.
label은 "My Mozilla Widget"으로 하여 위젯 위에 마우스를 올리면 글씨를 띄워준다.
플러그인의 아이콘 모양은 http://www.mozilla.org/favicon.ico 를 사용한다.



내가 관심있어하는 부분은 HTML소스를 변경하는 부분, dom 위치 정보를 활용해 선택되었던 element를 highlighting해보려고 한다.
HTML 변경을 위해서 이 부분을 참고 하면 된다.

https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/packages/addon-kit/docs/page-mod.html