웹서비스 개발을 하다보면 HTTP 요청을 내맘대로 설정해서 보내고 싶을 때가 있다. GET 요청은 브라우져를 통해서 하면 간단히 보낼 수 있다. 그러나 POST 요청을 보낼 때는? HTTP Header의 정보를 조작해서 요청을 보내고 싶을 때는? 모두 간단하지 않다.

파이어폭스를 사용하고 있다면 Poster라는 부가기능을 이용해서 다양한 HTTP 요청을 만들 수 있다. 그리고 그 결과도 손쉽게 확인할 수 있다. 설치 및 사용방법도 아주 간단하다.

설치

파이어 폭스의 Poster 부가기능을 설치한다. 설치가 완료되면 파이어폭스의 하단에 Poster 아이콘이 보인다. 작아서 한눈에 찾아지지 않을 지도 모른다. 아마도 이것을 찾는 것이 이 부가기능을 사용하는데 있어서 가장 어려운 일일듯 싶다. 나머지는 그만큼 쉽다.

가운에 있는 P자 아이콘을 클릭하면 Poster의 창이 나타난다.

사용

사용법은 간단하다. 원하는 URL을 입력하고 Actions의 GET 옆의 Go를 누르면 Get 요청이 보내진다. 그리고 다음과 같은 결과를 얻는다.

주요기능

Request 창의 값들을 조절해 다양한 요청을 보낼 수 있다.

File 을 선택해서 파일 업로드 할 때의 요청을 만들 수 있다.
User Auth를 이용해 Basic Authentication 을 설정할 수도 있다.
Actions 탭에서는 HTTP method를 변경할 수 있다.
Header의 값을 변경할 수도 있고, 요청 파라미터를 설정해서 보낼 수도 있다.
그리고, 사용할 것만 같은 복잡한 설정이 있다면 설정을 저장할 수도 있다.

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

시작하기

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

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/ 페이지에 확장기능을 등록한다. 정식으로 공개되기까지는 테스트가 필요하다.

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

파이어폭스에서 프로파일(Profile)은 무엇인가?

• 북마크, 환경설정, 플러그인(부가기능) 같은 모든 정보를 모아 놓은 곳이다. 
• 프로파일은 특정 디렉토리에 위치하고 있는데 윈도우에서는 아마도 "C:\Documents and Settings\...\Application Data\Mozilla\Firefox\Profiles" 일 것이다.
• 파이어폭스가 설치되면 프로파일 디렉토리에 xxx.default 와 같은 기본 프로파일 디렉토리가 생성된다. 그리고 이곳에 추가하는 플러그인, 비밀번호, 북마크 등등이 기록된다.
• 보통의 경우에는 파이어폭스는 기본프로파일로 구동된다. 즉 사용자는 프로파일이 무엇인지 알 필요가 없다.

• 프로파일을 여러 개 생성하고 관리할 수 있는데, 그럼으로써 몇가지 장점을 얻을 수 있다.

  • 파이어폭스를 처음 설치한 상태로 돌아가고 싶을 때 새 프로파일을 생성하고 파아이폭스를 생성한 새 프로파일로 구동하면 된다.
  • 여러가지 환경으로 파이어폭스를 구동시킬 수 있다. 예를 들어 플러그인을 개발중인 경우에는 개발 전용 프로파일을 사용한다면, 개발에 특화된 환경으로 파이어폭스를 구동시킬 수 있고, 개발도중 중요한 프로파일 데이터를 삭제하는 실수를 저질러도 기본 프로파일에는 아무 문제 없다.
  • 프로파일을 다른 곳에 복사함으로써 파이어폭스의 환경을 백업할 수 있다.

프로파일 생성하기

파이어 폭스를 모두 닫은 상태에서 "시작 > 실행(Run)"을 실행시킨 후 다음 명령을 입력한다.

1. firefox -ProfileManager

그러면 프로파일 관리자가 등장하고, 이를 이용해 프로파일을 생성/수정/삭제할 수 있다.

위와 같이 chang이라는 프로파일을 생성하면 프로파일 디렉토리 밑에 xxxx.chang이라는 프로파일 디렉토리가 생기는 것을 확인할 수 있다. xxxx는 파이어폭스가 임의로 생성된 8자리 문자이다. 생성한 프로파일을 선택하고 firefox 시작하기를 누르면 생성한 프로파일로 파이어폭스가 구동된다.

참조

firefox profile tutorial

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

파이어큐는 파이어폭스에서 스토리큐를 사용할 수 있는 파이어폭스 확장기능입니다.

파이어큐를 이용해서 할 수 있는 일들은 다음과 같습니다.

• 스토리큐의 최신 큐들을 조회
• 스토리큐의 베스트 큐들을 조회 : 아직 구현 안됬습니다.
• 내가 올린 큐들을 조회
• 큐를 업로드 하기

파이어큐 사용방법

파이어큐는 여기 에서 다운받을 수 있습니다. 현재 테스트중이기 때문에 다운로드를 위해서는 로그인이 필요합니다. 사용해 보신분은 평가를 부탁드립니다.

파이어큐를 설치하고 파이어폭스를 재시작하면 하단에 파이어큐 아이콘이 보입니다.

이 아이콘을 클릭하면 사이드바에 파이어큐가 보입니다.

파이어큐 아이콘은 도구모음에도 있습니다. 도구모음은 메뉴바에서 마우스 오른쪽 버튼을 클릭한 후 사용자 지정을 눌러서 확인할 수 있습니다. 도구모음에서 파이어큐 아이콘을 꺼내서 툴바 상단에 아이콘을 위치시킬 수도 있습니다.(드래그앤 드롭)

큐 목록 조회

인증을 하지 않고도 최근 탭과 인기 탭은 사용할 수 있습니다.

최근 탭은 최근 등록된 큐들의 목록을 보여줍니다.

인기 탭은 가장 인기가 많은 큐들의 목록을 보여줍니다.

큐의 이미지 혹은 제목을 클릭하면 큐의 상세보기 페이지로 이동합니다.

상단의 최근 등록된 큐들 에 마우스를 올리면 새로고침 으로 글이 바뀝니다. 새로고침을 눌러서 목록들을 다시 가져올 수 있습니다.

인증하기

큐를 업로드하기 위해서는 인증이 필요합니다.

1. 인증하기를 누릅니다. 그러면 파이어폭스의 탭이 하나 열리면서 스토리큐의 로그인 페이지가 보입니다. 로그인합시다. 버튼은 인증완료 로 바뀝니다.
2. 로그인을 마치면 파이어큐를 스토리큐에서 사용허가할 것인지 물어봅니다. 허가해 줍시다.
3. 허가를 마친 후 파이어큐의 인증완료를 누릅니다. 이제 인증이 완료되었습니다.

혹 어떤 이유에서든지 다음과 같은 창이 나온다면 인증을 다시시작해야 합니다. 일단 창의 내용은 무시해 줍니다. 그리고 위 방법에 따라 인증을 수행합니다.

인증 완료 버튼을 눌렀을 때 다음과 같은 알림창이 나온다면 알림창에서 지시하는 대로  http://www.storyq.net/oauth/... 페이지에 접속합니다. 그리고 인증하기 2번의 과정으로~.  

파일 업로드

선택하기를 눌러서 파일을 선택할 수 있습니다. 혹은 업로드 하고자 하는 파일을 드래그 앤 드롭으로  파이어큐에 어딘가에 놓아도 됩니다.

제목과 설명, 태그를 넣고 확인을 눌러서 업로드를 할 수 있습니다.

앞으로 해야 할일 및 버그들

버그 혹은 개선해야 할 점을 발견하면 댓글 혹은 aproxacs@gmail.com으로 알려 주세요. 

• 인증완료 버튼이 혼란스럽다. : 좀 더 자세한 설명 필요함.
• 인증 토큰을 해지해도 로그인 된 것처럼 동작할 때가 있음.
• 파일 형식에 pptx 추가해야 함.
• 큐를 누를 때 새창으로 열리지 않도록 할 수 있을까? 이미 열려 있는 창이 있다면 그것을 이용하도록.
• 새로고침이 너무 숨겨져 있음.
• 업로드 파일이 선택될 때 제목이 파일이름으로 채워지는데, 확장자는 없애도 좋다.
• 스토리큐 인증 페이지 : 글씨가 짤리기도 하고, link 가 이상하고.. 왜 이렇게 됬지?
• 스토리큐 로그인 페이지에 어떤 매시업 애플리케이션 때문에 로그인 하려 한다고 알려주기.
• 10 MB 이상 파일 업로드 안됨
• 인기 탭 구현

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

웹페이지를 캡춰하고 싶을 때 :

프린트스크린 버튼을 눌러서 그림판/포토샵을 실행시킨 후 원하는 부분을 잘라서 적절히 편집하는 것도 한 가지 방법이다. 매우 번거로운 방법이다.

firefox를 사용하고 있다면 fireshot 을 사용해서 이 번거로움을 크게 단축할 수 있다.

fireshot를 설치하면 브라우져의 오른쪽 상단에 'S' 아이콘이 생긴다. 눌러보자.

"챨칵" 소리와 함께 새로운 창이 하나 더 뜨는데, 이 창이 웹페이지를 캡춰한 창이다.

선택을 하면 오른쪽에 메뉴가 생긴다. 선택 영역을 자를 수 있고, 간단한 효과를 줄 수도 있다.

네모 박스를 그려서 설명을 달 수도 있고, 민감한 정보는 선으로 지울 수도 있다.

매우 좋다!

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

explore에서 clipboard로 복사하기는 쉽다. 그것은 다음 코드를 이용하면 된다.

1. var range = inElement.createTextRange();   
   range.execCommand('Copy');

firefox에서는 이것이 쉽지 않은데.. flashf를 이용하면 이 문제를 해결 할 수 있다.

플래시 (clipboard.swf) 를 다운받아 {RAILS_ROOT}/public/swf에 저장한다.

그리고 다음 javascript code를 application.js에 붙여넣는다.

1. function copy_value(inElement) {
  var browserName = navigator.appName;
  if ( browserName.search("Explorer") > 0 ) {
    var range = inElement.createTextRange();   
    range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="/swf/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
  alert ("다음 소스가 복사되었습니다.\n" + inElement.value );
}

그리고 copy하고 싶은 textarea를 파라미터로로 호출한다.

1. <textarea id="box_text_url">some text</textarea>
2. ...
3. copy_value($("box_text_url"));

reference

http://www.jeffothy.com/weblog/clipboard-copy/

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