확장기능 한글화, 이렇게 하면 됩니다.

[곰]

이 문서는 Daniel Wang의 How to Localize a Mozilla Extension?을 기초로 작성되었습니다. 편의상 존칭은 생략하겠습니다.

확장기능의 언어 정보는 일반 문서에 저장되어 있기 때문에 프로그래밍을 모르는 사람도 손쉽게 확장기능을 한글화할 수 있다. 한글화 방법을 쉽게 익힐 수 있도록 함께 IE View를 한글화해보자.

준비
① IE View의 설치 파일(ieview.xpi) (그냥 클릭하면 설치가 되므로 오른쪽 버튼을 눌러 저장해야 한다.)
② 유니코드를 지원하는 문서 편집기: 유니코드의 형식을 설정할 수 있는 문서 편집기를 사용하여야 한다. 윈도우즈 사용자는 공개 프로그램인 UniRed를 사용하면 된다. UniRed는 여기를 누르면 내려받을 수 있다.

1. 압축 풀기
xpi 파일은 zip 형식의 압축 파일이기 때문에 일반 압축 프로그램으로 압축을 풀 수 있다. 압축을 풀면 install.rdf와 install.js 파일, chrome 디렉토리가 나온다. 확장기능의 소스는 chrome 디렉토리의 ieview.jar 파일 안에 있는데 jar 파일도 zip 형식의 압축 파일이다. 이 파일의 압축을 풀면 content, skin, locale 디렉토리가 나온다. content는 확장기능의 기능을 구현하는 소스를 담고 있는 디렉토리이고 skin은 말그대로 스킨 정보를 담고 있는 디렉토리이다. 우리가 수정하여야 할 것은 locale 디렉토리에 있는 언어 정보이다.


2. ko-KR 디렉토리 만들기
locale 디렉토리 안에는 en-US라는 디렉토리가 있다. 여기에는 영문 정보가 담겨 있다. 한글 정보는 ko-KR에 넣어야 한다. 영문 파일을 기초로 한글 파일을 작성할 것이니 en-US 디렉토리를 복사하여 이름을 ko-KR로 바꾸자. 이 때 대소문자를 꼭 구분하여야 한다.


3. contents.rdf
ko-KR/ieview에는 세 개의 파일이 있는데 이 파일을 모두 수정해야 한다. 먼저 이 디렉토리에 대한 정보를 담고 있는 contents.rdf 파일을 수정하자.

먼저 en-US라고 되어 있는 것을 모두 ko-KR로 바꾸고 English(US)를 Korean(KR)로, Paul Roub(작성자 이름)도 자기 이름으로 바꾸자. 아래는 변경된 내용이다.

코드: 모두 선택

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <!-- list all the packages being supplied by this jar -->
  <RDF:Seq about="urn:mozilla:locale:root">
   <RDF:li resource="urn:mozilla:locale:ko-KR"/>
  </RDF:Seq>

  <!-- locale information -->
  <RDF:Description about="urn:mozilla:locale:ko-KR"
      chrome:displayName="Korean(KR)"
      chrome:author="Gom Kim"
      chrome:name="ko-KR">
   <chrome:packages>
    <RDF:Seq about="urn:mozilla:locale:ko-KR:packages">
      <RDF:li resource="urn:mozilla:locale:ko-KR:ieview"/>
    </RDF:Seq>
   </chrome:packages>
  </RDF:Description>

</RDF:RDF>

4. ieview.dtd
.dtd 파일에는 창이나 메뉴 등에 표시될 문구들이 저장되어 있는데 아래와 같은 구조로 작성되어 있다.

<!ENTITY ieview.popup-ieview-do-view "View This Page in IE">

우리가 수정할 부분은 따옴표(") 안의 내용이다. 다른 것은 절대 수정하여서는 안 된다. 이제 따옴표 안의 내용을 모두 우리말로 고쳐 보자. 아래는 수정한 파일 내용이다.

코드: 모두 선택

<!ENTITY ieview.popup-ieview-do-view "현재 문서를 IE로 엽니다">
<!ENTITY ieview.popup-ieview-do-viewlink "링크를 IE로 엽니다">

<!ENTITY ieview.label "IE View 제거">
<!ENTITY ieview.prefdialogtitle "IE View 설정">
<!ENTITY ieview.prefdialogloclabel "IE 위치">
<!ENTITY ieview.prefdialoglocchoose "찾아보기">
<!ENTITY ieview.prefdialoglocdesc1 "IE View가 인터넷 익스플로러를 실행할 때 사용할 주소를 입력하세요.">
<!ENTITY ieview.prefdialoglocdesc2 "주소를 지정하지 않으면 IE View가 자동으로 인터넷 익스플로러를 찾습니다.">

.dtd 파일을 저장할 때는 아래와 같이 Charset은 UTF-8로 지정하고 Unicode representation은 아무 것도 지정하지 않아야 한다. 그리고 Line Separator는 LF로 지정한다.
http://heygom.com/tt/uploaded/localize/savedtd.png


5. ieview.properties
.properties 파일에는 자바스크립트에서 출력할 문구들이 저장되어 있다. ieview.properties의 내용은 아래와 같다.

코드: 모두 선택

# straight text, displayed when we can't find IE to execute it

ieview.cantFindExplorer=Unable to locate Internet Explorer.

#로 시작하는 줄은 주석문이므로 수정할 필요가 없다. 그리고 ieview.cantFindExplorer는 식별자이므로 수정해서는 안 된다. 우리가 수정할 것은 등식(=) 뒤의 문구이다. 아래는 수정한 파일 내용이다.

코드: 모두 선택

# straight text, displayed when we can't find IE to execute it

ieview.cantFindExplorer=인터넷 익스플로러를 찾을 수 없습니다.

.properties 파일을 저장할 때는 Unicode representation을 꼭 \uXXXX로 지정해 주어야 한다.
http://heygom.com/tt/uploaded/localize/ ... erties.png


6. jar 파일로 압축하기
이제 언어 파일의 수정이 모두 끝났으니 소스를 다시 jar 파일로 압축해야 한다. 압축 프로그램을 이용하여 content, skin, locale 디렉토리를 압축한 후 파일 이름을 ieview.jar 파일로 변경하여 chrome 디렉토리에 넣고 작업을 마친 디렉토리와 파일들을 삭제하자.


7. install.rdf
install.rdf에 한글 파일의 경로를 지정해 주어야 한다. 다음과 같이 <em:locale>locale/en-US/ieview/</em:locale> 아래에 <em:locale>locale/ko-KR/ieview/</em:locale>을 추가하자.

코드: 모두 선택

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
 
   <em:id>{6e84150a-d526-41f1-a480-a67d3fed910d}</em:id>
   <em:name>ieview</em:name>
   <em:version>0.83</em:version>
   <em:description>Open pages in IE via Firefox menus</em:description>
   <em:creator>Paul Roub</em:creator>

   <em:homepageURL> http://ieview.mozdev.org/</em:homepageURL> 
<em:optionsURL>chrome://ieview/content/ieviewsettings.xul</em:optionsURL>  

   <em:file>
    <Description about="urn:mozilla:extension:file:ieview.jar">
      <em:package>content/</em:package>

      <em:locale>locale/en-US/ieview/</em:locale>
      <em:locale>locale/ko-KR/ieview/</em:locale>
    </Description>
   </em:file>

   <em:targetApplication>
    <Description>
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>0.8+</em:minVersion>
      <em:maxVersion>0.10</em:maxVersion>
    </Description>
   </em:targetApplication>

  </Description>    
</RDF>

8. install.js
파이어폭스 1.0부터는 install.js를 사용하지 않는다. 하지만 이전 버전 사용자는 이 파일을 수정하여야 한다. registerChrome(LOCALE | chromeFlag, jar, APP_LOCALE_FOLDER); 아래에 registerChrome(LOCALE | chromeFlag, jar, "locale/ko-KR/ieview/");를 추가하자.

코드: 모두 선택

if (err == SUCCESS) 
{ 
    var jar = getFolder(chromef, APP_JAR_FILE);

    registerChrome(CONTENT | chromeFlag, jar, APP_CONTENT_FOLDER);
    registerChrome(LOCALE  | chromeFlag, jar, APP_LOCALE_FOLDER);
    registerChrome(LOCALE  | chromeFlag, jar, "locale/ko-KR/ieview/");

    err = performInstall();

    if(err == SUCCESS || error == 999) 
  {
        alert(APP_NAME + " " + APP_VERSION + " has been succesfully installed.\n"
            +APP_SUCCESS_MESSAGE
            +"Please restart your browser before continuing.");
    } 
  else 
  { 
        alert("Install failed. Error code:" + err);
        cancelInstall(err);
    }
}

9. xpi 파일로 압축하기
이제 작업한 파일을 설치 파일로 만들기만 하면 된다. install.rdf, install.js, chrome 디렉토리를 압축한 후 이름을 ieview.xpi로 바꾸자.


10. 설치와 실행
모든 작업이 끝났다. xpi 파일을 파이어폭스에 끌어 놓거나 [File] - [Open File]에서 파일을 선택하면 확장기능이 설치된다.

한글판 사용자는 파이어폭스를 다시 시작하면 바로 결과물을 볼 수 있다. 하지만 영문판 사용자는 파이어폭스를 실행할 때 사용자 환경 언어(User Interface Locale)를 한글로 지정해 주어야 한다. 방법은 간단하다. 파이어폭스를 실행할 때 "-UILocale ko-KR" 옵션을 주면 된다.

http://heygom.com/tt/uploaded/localize/uilocale.png
[시작] - [실행]에서 "firefox -UILocale ko-KR"을 입력하여 파이어폭스를 실행하거나 바로가기의 등록정보를 위와 같이 고치자.

아래는 우리 작업의 결과이다.
http://heygom.com/tt/uploaded/localize/result1.png
▲문맥 메뉴

http://heygom.com/tt/uploaded/localize/result2.png
▲설정창

[sargescr]

Gmail Notifier 를 한글화 한 게 있는데 어디다 올리면 좋을까요?

http://img69.exs.cx/img69/5560/snap3477.jpg

[곰]

먼저 확장기능 개발자에게 한글화된 자료를 보내어 확장기능에 넣어달라고 하는 것이 좋을 것 같습니다. 그러면 따로 한글판을 제공할 필요가 없으니까요.

그리고 제가 위에 글을 하나 써놓았는데 일단은 이렇게 한 곳에 한글 확장기능을 모아보고 한글화가 활성화되면 다른 방법을 생각해 보는 것이 어떨까요?

[후니미닉]

코드: 모두 선택

const author              = "Ben Basson (Cusser)";
const displayName         = "Translate Page";
const name                = "translatepage";
const version             = "0.1";

const jarName             = name + ".jar";
const existsInApplication = File.exists(getFolder(getFolder("chrome"), jarName));

var contentFlag = CONTENT | PROFILE_CHROME;
var error       = null;
var folder      = getFolder("Current User", "chrome");
var localeFlag  = LOCALE | PROFILE_CHROME;
var skinFlag    = SKIN | PROFILE_CHROME;

const existsInProfile = File.exists(getFolder(folder, jarName));

// If the extension exists in the application folder or it doesn't exist in the profile folder and the user doesn't want it installed to the profile folder
if(existsInApplication || (!existsInProfile && !confirm("Do you want to install the " + displayName + " extension into your profile folder?\n(Cancel will install into the application folder)")))
{
    contentFlag = CONTENT | DELAYED_CHROME;
    folder      = getFolder("chrome");
    localeFlag  = LOCALE | DELAYED_CHROME;
    skinFlag    = SKIN | DELAYED_CHROME;
}

initInstall(displayName, name, version);
setPackageFolder(folder);
error = addFile(name, version, "chrome/" + jarName, folder, null);

// If adding the JAR file succeeded
if(error == SUCCESS)
{
    folder = getFolder(folder, jarName);

    registerChrome(contentFlag, folder, "content/" + name + "/");
    registerChrome(localeFlag, folder, "locale/en-US/" + name + "/");
    registerChrome(skinFlag, folder, "skin/classic/" + name + "/");

    error = performInstall();

    // If the install failed
    if(error != SUCCESS && error != 999 && error != -239)
    {
        displayError(error);
    	cancelInstall(error);
    }
    else
    {
        alert("The installation of the " + displayName + " extension succeeded.");
    }
}
else
{
    displayError(error);
	cancelInstall(error);
}

// Displays the error message to the user
function displayError(error)
{
    // If the error code was -215
    if(error == -215)
    {
        alert("The installation of the " + displayName + " extension failed.\nOne of the files being overwritten is read-only.");
    }
    else if(error == -235)
    {
        alert("The installation of the " + displayName + " extension failed.\nThere is insufficient disk space.");
    }
    else
    {
        alert("The installation of the " + displayName + " extension failed.\nThe error code is: " + error);
    }
}

install.js파일에서 어디다가 한글팩 위치를 지정해야할지 모르겠어요ㅠㅠ
젠장할 확장기능 개발자쉐이... 이런 문서는 양식을 좀 통일하면 어디가 덧나냐?

[빛알갱이]

좋은 글 써 주셔서 감사합니다. 옥에 티라고 할까? 's/한글/한국어/g'를 하셨다면 좋았겠지요? 'Korean'은 '한국어', 'English'는 '영어'.

[후니미닉]

코드: 모두 선택

registerChrome(localeFlag, folder, "locale/en-US/" + name + "/");

아마도 여긴것같습니다....
어제는 왜 이부분을 못ㅤㅂㅘㅅ지???
오늘안으로 한글버젼 올리겟습니다.

[정승원]

chrome.manifest 파일이 있다면 그 파일도 수정해야 됩니다.

locale 확장기능 ko-KR jar:chrome/확장기능.jar!/locale/ko-KR/확장기능/

이런 식으로 말이죠.