늘모자란 :: Firefox Extension(add-on) 개발 - Momentum Fox (1)

늘모자란

블로그도 다 꾸며놓고, 첫 글도 썼는데, 2번째 글을 뭘로 써야하나 고민하게 되었다.
왠지 용두사미가 될 것 같은데 어떻게 유익한 글을 써보나..(믿지 못하겠지만 잡글 없는 클린 블로그를 지향... 첫 글이 좀 그렇지만 일단 목표는 그렇다), 고민하다가 Momentum(이하 모멘텀) 이라는 녀석을 알게 되었다.

모멘텀은 진짜 별 거 없는 'new tab' extension 이다.
새로운 탭을 열면 아래 화면이 뜬다......

구글 크롬 사용자는 여기서 다운로드 받을 수 있다.

크롬에 먼저 설치를 해보고, 사진이 바뀌는거에 꽤 만족했는데, 파이어폭스는 준비하고 있다고만 하고 아직 부가기능탭에 나오지 않았다. 사실 요즘 느끼는건데 파이어폭스 참 어려운 시기인것 같다. 부가기능도 크롬이 이제 더 뛰어난것 같고, 개발자들도 파이어폭스보단 사용자가 많은 크롬의 손을 들어주는 것 같다.

어쨌든, 구현자체는 어려워보이지 않았다. html 소스였으니까.. 그냥 파일 따다가 쓰면 될 것 같았다.
하지만 사람은 귀찮음의 생물, 처음엔 소스보기를 해서 일일히 손크롤을 할까 하다가, github를 뒤지기 시작했다..
덕중의 덕은 양덕 성님이라고 했던가, 역시 있었다. Mcdo - Momentum Flickr
아마 이 프로젝트는 소스를 그대로 사용하는데, 사진이 좀 많이 변하길 원하는 그런 느낌의 프로젝트였다.
어쩄든 이걸 써볼까 했는데, 플리커가 자체가 너무 느려서 ... 써먹진 못할것 같았다.

그래서 그냥 원본을 따기로했다.
역시 손크롤 할 수 있지만 왜 그러지 않느냐? 귀찮으니까..
파이어폭스는 xpi라는걸로 관리되는데, 크롬도 그런게 있을 것 같아서 보니 crx로 관리된다고 한다.
crx는 어떻게 얻는지 아직은 잘 모르겠고, 그냥 따주는데가 있다.

crx를 얻고 확장자를 zip으로 변경 후에 압축을 풀면 압축이 풀린다.
근데 놀라운 사실은, 알집으로는 안풀린다.. 7zip으론 풀리는데.. 알약의 기술력에 혀를 한번 내둘렀다.
이렇게 momentum의 소스를 얻었고 이제 xpi로 옮기면 될터.

그런데........xpi는 어떻게 만들지?
구글에 어떻게 만들지? 입력해보니 여러개가 검색되는데, github에서는 어떻게 개발하고 있을까 궁금했다.
사실 구글에 나와있는 한글 블로그들 보면 거의 2009년글들이고 깃헙에서 공유되고 있는 소스와 그냥 구조자체가 완전히 판이했다.
그래서, 뭔가 다른 방법이 있을거라 생각했고, 다른 방법은 있었다.

http://stackoverflow.com/questions/20409349/what-is-the-easiest-way-to-develop-firefox-extension
이 스택 오버 플로우 글을 보면, 자세히 소개되어 있다.
mozila-build 라는 툴을 제공하고 이를 이용해서 쉽게 만들 수 있다는 것 이다.
눈뒤집히는 소리가 아닐 수 없다. install.rdf 를 바꿔야된다느니, guid 를 따로 적어야된다느니 소개한 블로그들 글을 왜 보고 따라하고 있었나 이런 생각이 들었다.

답글에 너무 잘 설명이 되어있기때문에, 설치과정을 따로 설명하진 않겠다.
리눅스, 윈도우 둘다 mozila-build를 제공해주는데, 개인적인 느낌으로는 리눅스쪽에 훨씬 더 친숙하게 되어 있는것 같다.
세팅이랄것도 없는 세팅을 하고나고, cfx init을 하니 github에서 본 extension의 뼈대들이 생성되었다.



생성된 구조는 역시 대세를 따르듯이 js였다.
프로젝트를 생성했으니, 튜토리얼을 따르면 될 터, 튜토리얼을 켜고 만들어 보기 시작했다.
리눅스 운영체제에서 사용하는 사람은 cfx run이나 test는 좀 어려울것 같고, packing을 위해서 cfx xpi 를 하면 알아서 다 패킹된다는것에 너무너무 편안함을 느꼈다 -_-;

테스트를 순조로히 마치고 data에 모두 우겨넣고 xpi를 깔아봤는데 이게 왠일, 하나도 안보인다..
이상해서 이것저것 확인해보니 크롬에선 잘 돌아가는데, 파이어폭스에서는 안돌아가는 기이한 현상 발생..
opacity 이슈인가해서 css를 훑어보니 임의로 수정해주니 나오긴하는데, 중앙정렬도 제대로 안되고 엉망이었다.

쉽게 갈 수 있을 줄 알았던 것에서 터지니까, 괜히 파이어폭스 익스텐션이 없던게 아니구나 하는 생각이 들어서 아차 싶었다.
여기까지 했는데 물러날 순 없지 했으나..
너무 늦은 시간 시작했던터라 시간이 5시를 가까이 가리키는 것을 보고 블로그에 (1)을 붙이고, 2편에서 다시 써보기로 한다..
아마 어떤 점을 수정하고, 어떻게 변경하겠다는 js 변경이 주가 되지 않을까 하는데..

글이 너무 길어지는 감이 있으니, 적당히 분량조절하는 것 같아 괜찮은 기분이다.
2편에서 계속!!
2014/12/26 02:04 2014/12/26 02:04