참고 사이트

ぇtp // 우ぇbp로g 라메 rs-bぉg. 코 m / 후레 후우 x - 아동 / 후 레후 후 x - 아 - 온 - sdk - 2014 /
또한 위의 페이지에서 링크되어 있는 htps : // v. 모잖아. jp / 2011/08 / 아 d-on-sdk-in s ta-lk 나가토 / 도 참고가 됩니다.

위의 사이트가 상세하기 때문에 참고하면 환경 구축은 할 수 있습니다만, 여기에서는 스크린샷과 함께 작업 순서를 정리해 보았습니다! 자세한 설명은 생략하고 있으므로 양해 바랍니다.

개발 환경 준비

Python2 시스템 설치

후술하는 애드온 개발 환경인 AddOnSdk가 Python으로 쓰여져 있기 때문에, Python2계의 인스톨한다. Python3 시스템은 AddOnSdk에서 아직 지원되지 않습니다.

htps //w w. py 응. rg/

패스를 통한다

C:\Python27에 설치한 경우 Windows 환경 변수에 C:\Python27;를 추가합니다.

명령 프롬프트에서 python -V를 입력하여 설치된 버전을 확인합니다.

AddOnSdk 설치

htps : // 아동 s. 모잖아. rg / 그럼 / ゔぇぺぺrs / 뭉치 l로 r

위 URL에서 다운로드한 zip을 압축해제해 적당한 장소에 배치한다.

기동 확인을 실시한다. C 바로 아래에 배치하면 C:\addon-sdk-1.17로 명령 프롬프트로 이동하고 bin\activate를 실행합니다. 종료할 때는 deactivate 를 실행한다.

부팅을 단순화하기 위해 C:\addon-sdk-1.17\bin\activate.bat 바로 가기 만들기

activate.bat 를 복사하여 바로 가기를 붙여넣습니다.

붙여 넣은 바로 가기의 속성을 엽니 다.

링크를 C:\Windows\System32\cmd.exe /K C:\addon-sdk-1.17\bin\activate.bat 와 같이 변경한다.

작업 폴더는 C:\addon-sdk-1.17 로 한다.

우선 무언가를 움직여 보자.

참고

Hello world 프로젝트 만들기

(C:\addon-sdk-1.17) C:\addon-sdk-1.17>mkdir hello_world

(C:\addon-sdk-1.17) C:\addon-sdk-1.17>cd hello_world

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx init
* lib directory created
* data directory created
* test directory created
* generated jID automatically: jid1-jEpLjcEnpIoIww
* package.json written
* test/test-main.js written
* lib/main.js written

Your sample add-on is now ready.
Do "cfx test" to test it and "cfx run" to try it.  Have fun!

lib/main.js에 샘플 코드 복사

main.js

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
    id: "mozilla-link",
    label: "Visit Mozilla",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});

function handleClick(state) {
    tabs.open("http://www.mozilla.org/");
}

아이콘 이미지를 가져오고 data 폴더에 배치

htps // md. 어쨌든 s. rg/후에 s/7635/이콘-16. pg

htps // md. 어쨌든 s. rg/후이 s/7635/이콘-32. pg

htps : // md. 어쨌든 s. rg/후이 s/7635/이콘-64. pg

편의상 IDE를 사용해 보았습니다.

실행

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx run
Using binary at 'C:\Program Files (x86)\Mozilla Firefox\firefox.exe'.
Using profile at 'c:\users\daichi\appdata\local\temp\tmpeuwlsh.mozrunner'.

Firefox가 시작! 추가된 Firefox 아이콘을 클릭하면 Mozilla 페이지가 열립니다.

애드온 패키징

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx xpi
Exporting extension to hello_world.xpi.

hello_world.xpi 가 생성되었습니다. 이것을 좋아하는 Firefox에 드래그 앤 드롭하여 설치합니다.



설치에 성공!

이제 한 가지 흐름을 확인할 수 있었습니다.

하고 싶은 일 구현

이번에는 특정 URL 페이지를 열 때 HTML을 다시 작성하고 스크립트를 삽입하고 싶었으므로 아래 링크의 샘플 코드를 사용했습니다.
htps : //로 ゔぇぺぺr. 모잖아. rg / an-u S / ad-on s / SDK / thoto ls / moe fy in g_u b_page s_base d_on_u RL

main.js

// Import the page-mod API
var pageMod = require("sdk/page-mod");
// Import the self API
var self = require("sdk/self");

// Create a page mod
// It will run a script whenever a ".org" URL is loaded
// The script replaces the page contents with a message
pageMod.PageMod({
    include: "*.org",
    contentScriptFile: [
        self.data.url("jquery-1.11.1.js"),
        self.data.url("my-script.js")
    ]
});

이제 URL이 *.org와 일치하면 data 이하인 jquery-1.11.1.js 및 my-script.js가 로드됩니다.

jQuery는 편리하기 때문에 파일 이름 등은 바꾸어 샘플 코드를 거의 그대로 이용했습니다.

jQuery 얻기 htp://j 쿠에 ry. 코m/

data 폴더에 jQuery (jquery-1.11.1.js)를 배치

data 폴더에 my-script.js 만들기

my-script.js에 실행하고 싶은 처리를 기재

이런 느낌

my-script.js

$(document).ready(function(){
    $("html").html("<h1>Hello World!</h1>");
});

이것으로 움직였습니다!

아직 모르는 일도 많습니다만, 버전마다 개발 방법도 바뀌는 것 같아 정보가 적은 것 같았습니다.
만약 그 밖에도 편리한 개발 방법이 있으면 가르쳐 주시면 다행입니다!