From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../your_first_webextension/index.html | 154 +++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html (limited to 'files/ko/mozilla/add-ons/webextensions/your_first_webextension') diff --git a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..e7de79a4d0 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,154 @@ +--- +title: Your first extension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +tags: + - WebExtensions + - 가이드 +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

이 글에서 우리는 "mozilla.org"와 그 하위 도메인 페이지에서 불러온 페이지에 붉은 테두리를 추가하는 확장 기능을 만들게 됩니다. 이를 통해 어떻게 Firefox를 위한 확장 기능을 만들 수 있는지 알아보고자 합니다.

+ +

이 예제의 소스코드는 GitHub에서 받을 수 있습니다.
+ https://github.com/mdn/webextensions-examples/tree/master/borderify

+ +

우선, 파이어폭스의 버전이 45 이상이여야 합니다.

+ +

확장기능 만들기

+ +

새 디렉토리를 만들고 그 디렉토리 안으로 들어갑니다.

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

이제 "borderify" 폴더 안에 "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"]
+    }
+  ]
+
+}
+ + + +

가장 재밌는 키는 content_scripts 입니다. 이 키는 URL이 패턴과 일치하는 페이지에 스크립트를 주입하도록 Firefox에 요청하는 역할을 합니다. 이 예제의 경우, "mozilla.org"와 그 하위 도메인에서 제공되는 모든 HTTP와 HTTPS 페이지에 "borderify.js" 스크립트를 주입하도록 Firefox에 요청합니다.

+ + + +
+

확장에 ID를 지정해야 할 수도 있습니다. 애드온 ID를 지정해야 한다면, manifest.json 파일에 application 키를 작성한 다음 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 라이선스로 배포되는 Google Material Design 아이콘 세트에서 골라도 좋습니다.

+ +

사용할 아이콘은 48픽셀 정사각형이여야 합니다. 원한다면 고해상도 디스플레이를 위해서 96x96 픽셀의 아이콘과 같이 제공할 수도 있습니다. 만약 그렇게 한다면 manifest.json의 icons 객체에 96 프로퍼티로 지정해줘야 합니다.

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

대신 SVG 파일을 사용할 수도 있습니다. 그러면 자동으로 딱 맞게 조절되어 적용됩니다. (만약 SVG에 텍스트가 포함되어 있다면 사용하는 툴에서 "패스로 변환하기" 기능을 사용해 텍스트를 패스로 변경해주세요. 그래야 원하는 위치와 크기로 확대/축소가 이뤄집니다.)

+ + + +

borderify.js

+ +

마지막으로 borderify.js 파일을 borderify 디렉토리에 만들고 아래 내용으로 저장해주세요.

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

이 스크립트는 manifest.json의 content_scripts키로 주어진 패턴에 매칭 될 때 페이지에 삽입됩니다. 스크립트는 원래 페이지에 포함되어 있던 스크립트처럼, 문서 자체에 직접 접근할 수 있게 됩니다.

+ + + +

사용해보기

+ +

우선 파일들이 원하는 위치에 있는지 다시 확인 해보세요.

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

설치

+ +

Firefox로 "about:debugging" 페이지에 들어갑니다. "임시 확장기능 로드"를 클릭해 확장기능 디렉토리를 선택합니다.

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

이제 확장기능이 설치될 것이고, Firefox가 재시작 되더라도 유지될 것입니다.

+ +

대신 web-ext 툴을 사용해 커맨드라인에서 확장기능을 실행할 수도 있습니다.

+ +

테스트

+ +

이제 "mozilla.org" 페이지에 들어가 봅시다. 페이지 전체를 둘러싸고 있는 붉은 색의 테두리를 볼 수 있습니다.

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

addons.mozilla.org에 들어가서 테스트 하지 마세요! Content script는 현재 이 도메인에 사용할 수 없도록 차단됩니다.

+
+ +

좀 더 파고들어 봅시다. 테두리의 색을 변경하거나, 페이지 컨텐츠에 다른 것들을 해볼 수 있겠죠. content script를 저장하고 about:debugging 페이지에서 Reload 버튼을 눌러 확장기능 파일을 새로고침 할 수 있습니다. 그리고 나서는 곧바로 변경된 기능을 확인할 수 있죠.

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

패키징과 배포

+ +

다른 사람들이 확장기능을 사용할 수 있게 하려면, 확장을 패키징하고 Mozilla에 제출해 서명을 받아야 합니다. 확장기능 배포에 대해 더 알아보기.

+ +

다음으로

+ +

이제 어떻게 Firefox용 WebExtension을 개발해야 하는지 알게 되었습니다. 다음 글들을 읽고 시도해 보세요.

+ + -- cgit v1.2.3-54-g00ecf