구글애드-가로긴거2



Firefox Plugin (NP Plugin) 만들기


출처 : http://unkyulee.tistory.com/87 











들어는 봤나! Firefox PlugIn (3)

작성자 : 이은규
작성일 : 2006-03-06
홈페이지 : http://unkyulee.net

30줄도 안 되는 PlugIn을 작성해보자.

PlugIn SDK를 다운받으면 샘플 코드가 있습니다. 헌데, 샘플 코드 치고는 워낙 신중을 기했는지 샘플이 약간 어렵게 보입니다. 더 쉽게 작성할 수도 있는데 말 입니다. 그래서 최소한의 조건을 갖춘 Hello World 플러그인을 작성해보려고 합니다.

함수 3개로 이루어진 DLL 프로젝트 입니다. 쉽겠죠? 프로젝트 설정하는 부분의 분량이 좀 많아서 그렇지, 코드 내용은 상당히 가볍습니다. 가벼운 만큼 플러그인 코드를 이해하기 쉽겠죠? 자신만의 플러그인을 만들어 보세요!

Step 1 ) NPTest 프로젝트 생성
- Win32 Dynamic-Link Library를 만듭니다.
- A Simple DLL Project를 선택
- 주의! : FireFox는 파일명이 NP로 시작하는 것만 인식합니다.

Step 2 ) DLLMain 함수 삭제
- NPTest.cpp 에서 DLLMain 함수 삭제
- #include “npplat.h” 추가

Step 3 ) include 디렉토리 설정
- SDK 폴더에서 gecko-sdk와 sdk 폴더를 프로젝트 내에 include 폴더를 생성한 뒤 복사 합니다.
- Project Setting의 C/C++ 탭에서 Project 옵션 창에 다음 정보를 추가합니다.

/I ".\include\sdk\samples\include" 
/I ".\include\gecko-sdk\plugin\include" 
/I ".\include\gecko-sdk\nspr\include" 
/I ".\include\gecko-sdk\java\include"

Step 4 ) 계속해서 Project Setting에서 C++/C 탭에 다음정보를 추가합니다.
- Preprocessor definition에 MOZILLA_STRICT_API,XP_WIN,_X86_ 항목을 추가한다.

Step 5 ) def 파일 생성
- NPTest.def 파일 추가 (파일 -> New -> C++ Source -> NPTest.def )

NPTest.def 파일의 내용을 다음과 같이 정의하세요.
LIBRARY   NPTEST

EXPORTS
NP_GetEntryPoints   @1
NP_Initialize       @2
NP_Shutdown         @3

Step 6 ) NPTest.cpp 에 함수 추가
NP_GetEntryPoints, NP_Initialize, NP_Shutdown 함수를 추가합니다.

NPTest.cpp 파일의 내용에 다음 내용을 추가하세요.
NPError OSCALL NP_Shutdown()
{  
return NPERR_NO_ERROR;
}

NPError OSCALL NP_Initialize(NPNetscapeFuncs* aNPNFuncs)
{  
AfxMessageBox( "hi" ) ;
return NPERR_NO_ERROR;
}

NPError OSCALL NP_GetEntryPoints(NPPluginFuncs* aNPPFuncs)
{
return NPERR_NO_ERROR;
}

Step 7) Version 리소스를 생성합니다.

FireFox가 플러그인을 인식하기 위해서는 정확한 버전 정보를 생성해야 합니다. 이때 버전정보가 지켜야 할 규칙이 있는데 이를 명심하고 작성해야 합니다.

규칙1. 버전 정보는 English (US)로 설정되어야 합니다.
규칙2. Character Type은 Multilingual 로 설정되어야 합니다.
규칙3. FileEntents, MIMEType가 명시되어야 합니다.

리소스 추가 -> Version 을 한 뒤 Property 창에서 버전 정보를 English(US)로 설정합니다. 또한 프로젝트 세팅에서 Resource 탭에서 언어를 영어(미국)으로 설정합니다. 새로운 버전 블록을 추가할 때 English(US)로 설정하고 코드 페이지는 Multilingual로 설정합니다. 이 설정이 올바로 되어있는지 확인하기 위해서는 블록 코드가 "040904e4"로 설정되어 있는지 확인하면 됩니다.

FireFox가 플러그인을 인식하도록 하기 위해서는 MIME 타입을 반드시 버전 정보에 포함시켜야 하는데, 이는 NPTest.rc 파일을 직접 수정하는 과정을 거쳐야 합니다.

NPTest.rc 예제
BLOCK "040904e4"
       BEGIN
           VALUE "Comments", "\0"
           VALUE "CompanyName", "ASP\0"
           VALUE "FileDescription", "NPTest\0"
           VALUE "FileExtents", "tst\0"
           VALUE "FileVersion", "1, 0, 0, 1\0"
           VALUE "InternalName", "NPTest\0"
           VALUE "LegalCopyright", "Copyright ⓒ 2006\0"
           VALUE "LegalTrademarks", "\0"
           VALUE "MIMEType", "application/test-plugin\0"
           VALUE "OriginalFilename", "NPTest.dll\0"
           VALUE "PrivateBuild", "\0"
           VALUE "ProductName", "ASP NPTest\0"
           VALUE "ProductVersion", "1, 0, 0, 1\0"
           VALUE "SpecialBuild", "\0"
       END

Step 8) 플러그인을 로드하는 HTML 작성

<embed> 태그를 이용해서 플러그인을 로드 할 수 있습니다. 위 예제에서는 type 속성을 명시해줌으로써 플러그인을 로드 할 수 있습니다.

Test.html 예제
<html>
<body>

<center><h1>Basic Plugin Example for Mozilla Test Case</h1></center>

This test case is to demonstrate the Basic Plugin example. You should see the 
plugin window with the black frame aroung it and the browser user agent string 
which plugin draws inside the window.
<br><br>

<center>
<embed type="application/test-plugin" width=600 height=40>
</center>

</html>
</body>
Embed 태그의 type 속성을 버전에서 정해준 MIME 타입으로 설정해둔 것을 볼 수 있습니다. 위의 HTML 파일을 FireFox로 불러오면 플러그인이 로드된다. 테스트를 위해서 플러그인 로드시 MessageBox를 띄우는 코드를 작성한 후 테스트 합니다.

Step 9) FireFox에서 불러오기

NPTest.cpp 수정 부분
NPError OSCALL NP_Initialize(NPNetscapeFuncs* aNPNFuncs)
{  
AfxMessageBox( "hi" ) ;
return NPERR_NO_ERROR;
}

NP_Initialize에 AfxMessageBox를 불러오는 코드를 작성해봅니다. MFC를 사용하기 위해서는 프로젝트 설정 정보에서 Using MFC로 설정해야 하며, 다음과 같은 헤더 정보를 포함해야 합니다.

MFC를 사용하기 위한 헤더 설정
#include <afxwin.h>         // MFC 핵심 및 표준 구성 요소
#include <afxext.h>         // MFC 익스텐션
#include <afxdisp.h>        // MFC 자동화 클래스

이제 컴파일 한 후 결과 파일인 NPTest.dll 파일을 파이어폭스가 설치된 폴더에서 plugin 폴더에 복사한 후 위에서 작성한 test.html 파일을 불러오세요.

그림 1 Hi?

PlugIn이 실행되는걸 직접 확인하셨나요?

맨땅에서부터 정말로 실행되는 단계까지 직접 해보신 기분이 어떤가요? 플러그인 만드는 거 별거 아닌 것 같습니다. 여기에 자신의 아이디어를 적용시켜보세요!

공유하기 버튼

 

덧글

  • 궁금 2012/12/10 17:54 # 삭제 답글

    죄송하지만 파이어폭스 설치 폴더에 플러그인이라는 폴더가 없는데요.. ㅜㅜ 최근에 바뀐 것인지 다른 곳에 따로 있는 것인지 혹시 아시나요??
댓글 입력 영역


구글애드-세로


정사각디스플레이

통계 위젯 (화이트)

3300
1580
456843

구글애드3