현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이번절에서 우리는 Firefox 용 확장앱을 처음부터 끝까지 작성해 본다. 이 확장앱은 "mozilla.org"나 그 하위 도메인이 로딩된 페이지에 빨간색 테두리를 추가만 한다.

예제 소스 코드
: https://github.com/mdn/webextensions-examples/tree/master/borderify.

먼저, Firefox의 버전이 45이상이어야 한다.

Writing the extension

새 디렉토리를 만들고 그 디렉토리로 이동한다.

mkdir borderify
cd borderify

manifest.json

이제 새로 만든 디렉토리 아래에 "manifest.json" 파일을 만든다.
manifest.json 파일의 내용은 아래와 같다.

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • 위에서부터 3가지 키: manifest_version, name, version필수이며 확장앱의 기본 메타 데이터를 포함합니다.
  • description 은 필수는 아니지만, 권장한다: description은 애드온 매니저에 노출된다.
  • icons 은 필수는 아니지만, 권장한다: 애드온 매니저에 표시 될 확장앱의 아이콘을 지정한다.

가장 흥미로운 키는 content_scripts 이다. 이 키는 URL이 특정 패턴과 일치하는 페이지에 스크립트를 주입하도록 Firefox에 요청한다. 이번 경우 우리는 "mozilla.org"나 그 하위 도메인에서 제공되는 모든 HTTP 또는 HTTPS 페이지에 "borderify.js" 스크립트를 주입하도록 Firefox에 요청합니다.

어떤 경우에는 필요에따라 확장앱의 ID를 지정해야한다. Add-on ID지정이 필요하다면 , manifest.json 파일에 applications 키를 포함시키고 gecko.id 프로퍼티를 셋팅한다:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

확장앱에는 아이콘이 있어야한다. 이 아이콘은 애드온 매니저의 확장앱 목록에 보여진다.
우리 manifest.json은 "icons / border-48.png"에 아이콘이 있다고 정했다.

borderify 디렉토리 아래 icons 디렉토리를 생성한다. border-48.png라는 이름으로 아이콘을 저장한다.  구글 머터리얼 디자인 아이콘 세트에서 가져온 예제를 사용할 수 있고 Creative Commons Attribution-ShareAlike 라이선스의 조건에 따라 사용한다.

아이콘을 선택하려면 반드시 48x48 픽셀이어야한다. 고해상도용인 96x96 픽셀 아이콘 또한 가능하다. 이렇게하면 manifest.json의 icons 객체의 96 개 속성으로 지정된다:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

또 SVG file 제공이 가능하고 적용하면 딱 맞게 적용될 것이다. (Though: if you're using SVG and your icon includes text, you may want to use your SVG editor's "convert to path" tool to flatten the text, so that it scales with a consistent size/position.)

borderify.js

마지막으로 borderify.js라는 파일을 borderify 디렉토리 아래 생성한다.
내용을 아래와 같이 한다:

document.body.style.border = "5px solid red";

이 스크립트는 manifest.json의 content_scripts 키에 주어진 패턴에 매칭되면 웹페이지 삽입된다.
이 스크립트는 페이지 자신의 스크립트처럼 페이지에 직접 접근 가능하다

Trying it out

먼저 가지고 있는 파일들이 제위치에 있는지 다시 체크 해본다:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Installing

Firefox 주소창에 "about:debugging"를 써서 해당페이지로 이동하여, "Load Temporary Add-on"을 클릭하고 확장앱 디렉토리(borderify)를 선택한다:

확장앱이 설치될 것이고, Firefox가 재부팅 되더라도 유지 될것이다.

또한 web-ext 툴을 사용하는 커맨드라인에서도 확장앱을 실행할 수 있다.

Testing

이제 "mozilla.org" 페이지에 방문해서 빨간색 테두리를 볼수 있을 것이다:

addons.mozilla.org에서 시도하지 않는다. Content scripts는 현재 해당 도메인에서 차단되어 있다.

테두리의 색을 변경하거나 페이지 내용에 대해 다른 작업을 수행하기위해 content script를 편집해보자. content script를 저장한후 about:debugging 페이지에서 Reload버튼을 눌러 확장앱 파일을 재로드한다. 
변경 사항을 바로 확인할 수 있다.

Packaging and publishing

다른 사람들이 활장앱을 사용하려면 패키징과 로그인된 모질라에 제출이 필요하다.
활장앱 배포에 대해 더 알아보기.

What's next?

이제 Firefox 용 WebExtension을 개발하는 과정에 방법를 얻었다.:

문서 태그 및 공헌자

 이 페이지의 공헌자: gs.won
 최종 변경: gs.won,