파이어폭스 플러그인 개발 방법

1 목적[ | ]

본 문서는 ubuntu 상에서 firefox 웹브라우저에 NPAPI 플러그인 개발 및 적용 방법에 대해 기술한다.

본 문서에 사용되는 소프트웨어의 버전은 다음과 같다.

  • Ubuntu 13.10 64 bit
  • Firefox 25.0.1 (Mozilla Firefox for Ubuntu canonical - 1.0)
  • cc (Ubuntu/Linaro 4.8.1-10ubuntu9) 4.8.1

2 배경 지식[ | ]

브라우저는 특정 디렉토리의 플러그인에 대해 NPAPI 표준에 명시된 API를 호출하여 플러그인의 로드 및 연동을 수행한다.

NPAPI는 넷스케이프 브라우저에 의해 정의된 표준으로 대부분의 브라우저와 호환되며, 웹페이지 내부에서 멀티미디어 컨텐츠 표현이 가능하다. (예: 플래시 플레이어)

NPAPI 플러그인 개발을 위해서는 NPAPI API 표준에 정의된 C 함수를 구현하면 되며, 별도의 개발 툴은 불필요하다. 다만, NPAPI API 표준 함수 구현을 용이하게 하기 위해 미리 작성된 헤더 파일을 이용하는 것이 현명하다.

3 Build sample plugin[ | ]

위에 언급된 대로, NPAPI 플러그인 개발을 위해서는 NPAPI 헤더를 이용하는 것이 현명하다.

본 문서에서는 npapi-sdk 오픈소스 프로젝트를 활용한다. npapi-sdk 오픈소스에는 NPAPI 헤더와 샘플 플러그인이 포함되어 있다.

3.1 npapi-sdk 받기[ | ]

npapi-sdk 소스를 체크아웃 한다.

svn checkout http://npapi-sdk.googlecode.com/svn/trunk/ npapi-sdk

3.2 샘플 빌드[ | ]

체크아웃한 소스 중 샘플 플러그인을 빌드한다.

cd npapi-sdk/samples/unix-basic
make

결과물은 npbasicplugin.so 파일이다. so는 shared object(리눅스 시스템 상의 공유 모듈)를 의미한다.

빌드 시 "No package 'gtk+-2.0' found" 에러가 발생하면 gtk+-2.0 패키지를 설치 후 make를 다시 수행한다.

sudo apt-get install gtk+-2.0

4 Test sample plugin[ | ]

일반적으로 대부분의 브라우저는 브라우저 실행 시 특정 위치의 플러그인 파일들을 로드하여 내부 플러그인 DB를 구축한다.

생성된 플러그인의 테스트를 위해 firefox가 인지할 수 있는 위치에 플러그인을 복사한다. firefox 브라우저의 플러그인 디렉토리를 확인하기 위해서, firefox 실행 후 about:plugins 페이지로 접속한다. 다른 플러그인 들의 설치 정보를 통해 /usr/lib/mozilla/plugins 임을 추측할 수 있다.

4.1 샘플 플러그인 설치[ | ]

빌드된 플러그인을 firefox 플러그인 디렉토리로 복사한다.

sudo cp npbasicplugin.so /usr/lib/mozilla/plugins/

firefox 실행 후 URL 입력창에 "about:plugins" 입력해 플러그인 설치 여부를 확인한다. 아래 그림에서 "Basic Sample Plug-in" 이 추가된 것을 확인할 수 있다. Path에는 플러그인을 복사한 위치가 나타난다.

Firefox about plugins.png

4.2 샘플 플러그인 테스트 페이지[ | ]

실제 플러그인을 동작시키기 위해서는 플러그인을 이용하는 HTML 페이지가 필요하다.

HTML 페이지에서 플러그인의 로드를 위해서 object 태그를 이용하며, 해당 플러그인의 MIME type 정보가 필요하다. 앞서 빌드한 샘플 플러그인의 소스(BasicPlugin.c) 내용 중 아래 부분을 참고하여 플러그인의 MIME type이 "application/basic-plugin" 임을 알 수 있다.

NP_EXPORT(const char*)
NP_GetMIMEDescription()
{
  return "application/basic-plugin:bsc:Basic plugin";
}

아래와 같이 플러그인 테스트를 위한 HTML 코드를 작성한다.

<html>
<body>
<object type="application/basic-plugin" width="300" height="200"></object>
</body>
</html>

firefox 브라우저를 실행한 후 위 HTML 코드를 저장한 페이지를 열 경우, 아래와 같이 동작하게 된다. 플러그인 내부 코드에 의해 브라우저의 User Agent 정보가 출력된다.

Firefox sample plugin.png

만약, 결과 화면이 위와 같이 나타나지 않고 깨져 보일 경우 패치 적용이 필요하다. 패치 페이지 하단의 0001-Fix-unix-sample-plugin-in-newer-browsers.patch 파일을 다운로드 한 후, 아래와 같이 패치를 수행한다.

패치 수행 후 다시 플러그인의 빌드와 복사를 수행해야 한다.

patch < 0001-Fix-unix-sample-plugin-in-newer-browsers.patch

5 같이 보기[ | ]

6 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}