recursal/MDN huggingface dataset:
MDN Web Docs 프로젝트
=================

**MDN Web Docs**는 저희가 작성하는 무료 웹 플랫폼 리소스입니다. 저희의 임무는 개발자들이 웹 플랫폼 위에 프로젝트를 쉽게 만들 수 있도록 필요한 정보들을 제공하기 위함입니다.

이 문서는 MDN Web Docs 프로젝트 그 자체에 대한 랜딩 페이지입니다. 여기서는 이 사이트가 어떻게 동작하는지, 저희가 어떻게 문서를 작성하는지, 지켜야 하는 가이드라인과 규칙에는 어떤 게 있는지, 그리고 여러분께서 어떻게 도와주실 수 있는지를 설명하는 안내서들이 있습니다.

모두의 도움을 환영합니다! MDN Web Docs는 오픈 소스 프로젝트로서 기여를 받고 있습니다. 여러분께서는, 간단한 오탈자 수정부터 새로운 문서 추가까지, 다양한 방법으로 참여하실 수 있습니다.

시작하기 페이지에서 방법을 확인해 주세요. 대화가 필요하시거나 질문이 있으시면 MDN Web Docs 채팅에 참여해 주세요.

커뮤니티 가이드라인

이 안내서들은 MDN Web Docs 기여에 필요한 정보들을 제공합니다. 작업과 이슈, 토론 시작, 콘텐츠 제안 등을 하는 법 또한 다룹니다. 도움이 필요하시거나, 저희에게 연락하셔야 하는 경우에도 여기서 창구를 확인하실 수 있습니다.

작성 가이드라인

이 안내서들은 MDN Web Docs의 문서를 작성하실 때 필요한 정보들을 제공합니다. 저희가 다루는 종류와 다루지 않는 종류를 설명하고, 문서 스타일 가이드, 콘텐츠 작업을 완수하기 위한 안내, 여러 페이지 구조에 대한 정보들도 다룹니다.

MDN Product Advisory Board (en-US)

MDN Product Advisory Board의 임무는 MDN Web Docs 커뮤니티를 지원하는 Mozilla, Mozilla 문서화 팀, 중요 협력 조직들 사이를 조정하는 것입니다.
개발자를 위한 웹 기술
============

웹의 개방성은 개발자들에게 많은 기회를 제공합니다. 하지만 웹 기술을 잘 활용하려면 우선 그 사용 방법을 잘 알아야 합니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.

웹 개발자를 위한 문서
------------

웹 개발자 안내서

웹 개발자 안내서는 원하는 것과 필요한 것을 웹으로 만들 때 유용한 도움말을 제공합니다.

웹 개발자를 위한 자습서

HTML, CSS, JavaScript, Web API에 대한 단계별 학습을 제공하는 문서 목록입니다.

접근성

가능한 한 많은 사람들이 웹사이트를 사용할 수 있게 합니다. 비록 이러한 사람들의 능력이 어떤 식으로든 제한되어 있는 경우에도 말이죠.

성능

가능한 한 빠르게 콘텐츠를 사용 가능하게 하고 가능하면 상호작용이 기능하게 만듭니다.

보안

데이터 유출 및 도난, 부채널 공격(side-channel attacks) 및 크로스 사이트 스크립팅, 콘텐츠 주입 및 클릭 재킹과 같은 공격으로부터 사용자를 보호합니다.

웹 기술 참고서
--------

웹 API

웹에서 앱을 만들기 위해 사용하는 JavaScript 프로그래밍 API입니다.

HTML

HTML은 웹 문서와 앱을 구조화하는데 필요한 기본적인 구성 요소를 제공합니다.

CSS

Cascading Style Sheets는 웹 문서와 앱의 외형을 만드는데 사용됩니다.

JavaScript

JavaScript는 웹의 기본 프로그래밍 언어입니다.

WebAssembly

WebAssembly는 C, C++, Rust, Swift, C#, Go 등으로 작성한 프로그램을 웹에서 구동할 수 있도록 합니다.

Events (en-US)

이벤트는 웹 페이지 로드가 완료되거나 사용자가 무언가를 선택하거나 키를 누르거나 창 크기를 조정하거나 양식을 제출하거나 비디오를 일시 중지할 때 여러분이 만든 웹 앱이 반응해야하는 것 입니다.

HTTP

HTTP는 웹을 통해 문서, 스타일시트, 스크립트, 이미지, 비디오, 글꼴 및 기타 리소스를 가져오고 웹 서버로 다시 보내기 위한 기본적인 인터넷 프로토콜입니다.

Media

웹 문서 및 앱에 비디오, 오디오 및 이미지 콘텐츠를 내장하고 스트리밍하기 위한 형식, 코덱, 프로토콜, API 및 기술.

SVG

Scalable Vector Graphics(SVG)는 어떠한 크기로 확대해도 부드러운 이미지를 만들수 있습니다.

MathML

MathML은 복잡한 수학 표기법을 웹에 표시할 수 있습니다.

웹 컴포넌트

웹 컴포넌트는 개발자가 직접 정의하고 재사용할 수 있는 사용자 정의 요소입니다.

WebDriver (en-US)

웹드라이버(WebDriver)는 브라우저를 사용하는 실제 사람의 행위를 모방하여 원격으로 브라우저를 제어하는 브라우저-자동화 메커니즘입니다. 웹 앱의 브라우저간 테스트를 위해 폭넓게 사용합니다.

Web Extensions

웹 확장 기능(Web Extensions)은 브라우저에서 사용자에게 향상된 기능을 제공합니다. 광고 및 기타 컨텐츠 차단, 페이지 모양 사용자 지정 등을 수행할 수 있습니다.

Web App Manifests

웹 앱 매니페스트(Web App Manifest)를 사용하면 사용자가 세로/가로 화면 방향과 디스플레이 모드(예: 전체 화면)를 미리 설정하여 장치의 홈 스크린에 웹 앱을 설치할 수 있습니다.

프로그레시브 웹 앱(PWAs)

프로그레시브 웹 앱(Progressive Web App)은 네이티브 모바일 앱과 유사한 사용자 경험을 제공합니다.

개발자 도구 문서
---------

Firefox Developer Tools

Firefox에 내장된 웹 개발자 도구 집합에 대한 설명서입니다.

Chrome DevTools

Chrome에 내장된 웹 개발자 도구 집합에 대한 설명서입니다.

Safari Web Inspector

Safari에 내장된 웹 개발자 도구 집합에 대한 설명서입니다.

Edge DevTools

Edge에 내장된 웹 개발자 도구 집합에 대한 설명서입니다.
MDN Web Docs 용어 사전: 웹 용어 정의
===========================

웹 기술은 문서화 또는 코딩에서 사용되는 전문 용어 및 약어를 많이 포함하고 있습니다. 이 용어 사전은 웹을 성공적으로 이해하고 구축하기 위해 알아야 하는 단어와 약어의 정의를 제공합니다.

사이드바에서 용어 사전의 용어를 골라볼 수 있습니다.

**참고:** 용어 사전은 끝없이 진행 중인 작업입니다. 새 항목을 작성 (en-US)하거나 기존 항목을 개선하여 도움을 줄 수 있습니다.
게임 개발
=====

게임은 가장 인기있는 컴퓨터 활동 중 하나입니다. 어떠한 표준 웹 브라우저에서도 작동하는 더욱 좋고 강력한 게임을 개발할 수 있는 새로운 기술들이 끊임없이 나타나고 있습니다.

웹 게임 개발하기
---------

웹 게임 개발 센터에 온 것을 환영합니다! 이 사이트에서는 게임 개발을 원하는 웹 개발자들에게 리소스를 제공합니다. 왼쪽의 기본 메뉴에서 유용한 자습서 및 기술 관련 기사를 찾을 수 있습니다. 자유롭게 탐색하시기 바랍니다.

우리는 게임 개발에 필요한 가장 대중적인 API에 대한 모든 정보를 쉽게 찾아볼 수 있는 참고 자료를 포함하고 있습니다.

**참고:** 웹 게임을 개발하기 전에 적어도 HTML과 CSS, JavaScript같은 핵심 웹 기술에 익숙해져야 합니다. 기초부터 배워보고 싶으시다면 Web 개발 학습하기를 둘러보세요.

네이티브 언어로 개발된 게임을 웹으로 포팅하기
-------------------------

만약 네이티브 개발자이고(예를 들어 C++로 게임을 만들 수 있는 경우) 게임을 웹에 복사하는 것에 흥미가 있다면 Emscripten에 대해 배워보세요. 이것은 LLVM을 JavaScript로 변환하는 컴파일러로 LLVM 바이트코드(예를 들어, Clang을 사용해 C/C++ 혹은 다른 언어에서 생성된 코드)를 웹에서 실행 가능한 형태인 asm.js (en-US)로 컴파일합니다.

시작하고 싶다면, 아래 링크를 참조해보세요.

* Emscripten에 대하여 고급 세부사항을 포함한 소개.
* 다운로드 및 설치 툴체인 설치하기.
* Emscripten 튜토리얼 어디서부터 시작해야 하는지 알려주는 튜토리얼.
예제
--

웹 게임들의 예시 목록을 보고싶으시면 예제 페이지에서 확인해보세요. 또 더욱 쓸만한 리소스를 보고싶다면 games.mozilla.org를 확인해보세요!

같이 보기
-----

Build New Games

수많은 오픈 웹 게임 개발 튜토리얼을 가지고 있는 협업 사이트입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.

Creative JS

게임만 있는 것은 아니지만 꽤 인상적인 JavaScript 기술과 실험들의 모음집입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.

Game Programming Patterns

Bob Nystrom이 작성한 책으로, 더욱 효과적이고 효율적인 코드를 개발하는 게임 개발자들에게 도움이 되도록 게임 개발에서의 프로그래밍 패턴에 대해 논하는 이북입니다.

Gamedev.js Weekly

HTML5 게임 개발을 주제로 하는 뉴스레터로, 매주 금요일에 보내줍니다. 최신 기사들과 튜토리얼, 툴 및 자료들을 담고 있습니다.

HTML5 Game Engine

평가, 기능 및 샘플을 기준으로 인기있는 HTML5 게임 프레임워크들의 목록입니다.

JSBreakouts

여러 프레임워크에서의 JavaScript Breakout 클론들을 비교하여 본인에게 맞는 프레임워크를 골라보세요.

Tuts+ Game Development

일반적인 게임 개발에 대한 튜토리얼과 글이 올라옵니다.

HTML5 Gamedev Starter

새로운 게임 개발자들을 위한 웹 주변의 다양하고 유용한 자료들에 대한 링크의 큐레이터 목록인 스타터입니다.

js13kGames

개발자들의 13 킬로바이트짜리 JavaScript 코딩 공모전입니다. 제출된 게임들은 GitHub에 읽을 수 있는 형태로 올라옵니다.

Mozilla Hacks Blog

Mozilla Hack 블로그의 게임 카테고리는 게임 개발과 관련된 흥미로운 기사들이 올라와 있습니다.

Games section on wiki.mozilla.org

플랫폼 게임에 대한 Mozilla의 참여에 대한 정보가 있는 위키 페이지입니다.
Mozilla
=======

아래 목록에는 Mozilla 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, Mozilla 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다.

FirefoxFirefox는 Mozilla 재단의 유명한 웹브라우저로서 윈도우, OS X, 리눅스, 솔라리스(비공식), 안드로이드 기기 등의 다양한 플랫폼을 지원합니다. 호환성과 최신 웹기술, 그리고 강력한 개발 도구로서 Firefox는 웹 개발자들과 사용자들에겐 최고의 선택입니다.

부가 기능들애드온들은 개발자들에게 Firefox의 기능을 변형하거나 확장하게 해 줍니다. 그것들은 표준 웹 기술인 JavaScript, HTML, CSS 또는 몇가지 전용 JavaScript API들을 사용하여 만들어집니다. 이러한 것들 사이에서, 애드온은 다음과 같은 일들을 할 수 있습니다 :
Firefox
=======

Firefox는 Mozilla 재단의 유명한 웹브라우저로서 윈도우, OS X, 리눅스, 솔라리스(비공식), 안드로이드 기기 등의 다양한 플랫폼을 지원합니다. 호환성과 최신 웹기술, 그리고 강력한 개발 도구로서 Firefox는 웹 개발자들과 사용자들에겐 최고의 선택입니다.

Firefox는 오픈소스 프로젝트이기 때문에 대부분의 코드가 커뮤니티의 봉사자들에 의해 작성됩니다. 여기서 당신은 Firefox 프로젝트에 어떻게 봉사하는지 배우거나 Firefox 애드온이나 개발툴의 사용법 또는 다른 것에 대한 정보를 얻을 수 있습니다.

Firefox를 위한 애드온을 어떻게 만드는 지, 어떻게 Firefox를 스스로 빌드하고 개발하는 지, Firefox와 그 하위 프로젝트들이 어떻게 이루어 지는 지 알아보세요.

* 개발자 릴리즈노트 개발자를 위한 릴리즈 노트 읽기 어떤 기능이나 애드온이 Firefox에 추가되었는지, 웹사이트에 대한 지원이 어떻게 바뀌었는지 알아보세요.
* 프로젝트 문서 Firefox의 내부 구성물에서 더 자세한 정보를 알아보세요. 그 다음에는 빌드시스템에 대한 정보를 알아내어 코드를 어떻게 작성할 지 알아보세요.
* 개발자 가이드 개발자 가이드는 어떻게 Firefox 소스코드를 얻고 컴파일 하는지에 대한 가이드를 제공합니다. 또한 이를 통해 어떻게 프로젝트에 기여하는 지 알 수 있습니다.
Firefox 채널
----------

Firefox는 네 가지 **채널**로 이루어져 있습니다.

### Firefox Nightly

우리는 매일 밤마다 mozilla-central 저장소의 최신 코드를 기반으로 Firefox를 빌드합니다. 이 빌드들은 Firefox 개발자들이나 새로운 기능을 미리 체험해보고 싶은 사람들에게 제공되며 언제나 활성화된 개발환경에서 개발될 것입니다.

Firefox Nightly 내려받기

### Firefox 개발자 에디션

이 버전은 오직 개발자들을 위해 만들어진 Firefox입니다. 6주마다, 저희는 Firefox Nightly에서 안정화된 기능을 Firefox 개발자 에디션에 넣어 빌드합니다. 저희는 또한 몇가지 개발자들만을 위한 이 에디션에서만 사용할 수 있는 기능을 추가합니다.

Firefox 개발자 에디션에 대하여 더 자세히 알아보기

### Firefox Beta

Firefox 개발자 에디션이 출시된지 6주가 지난 후, 저희는 충분히 안정적인 기능들을 넣고, 새 버전의 Firefox Beta를 빌드합니다. Firefox 베타 빌드는 Firefox의 다음버전을 미리 보고 싶은 얼리어답터에게 적합합니다.

Firefox Beta 내려받기

### Firefox

Beta 버전에서의 6주가 지나고, 우리는 새 기능을 1억명 이상의 사용자들에게 새 버전에 담아 선보입니다.

Firefox 내려받기

콘텐츠
---

Firefox 프로파일
------------

만일 당신이 규칙적으로 다양한 Firefox의 채널들을 같이 사용하고 있거나 다양한 설정을 같이 사용하고 있다면 당신은 사전에 파이어 폭스의 프로필 매니저나 다른 프로필 관리 도구를 이용하여 멀티 Firefox 프로파일 사용하기 를 읽으셔야 합니다.

바깥 고리
-----

* Mailing list
* Release schedule
WebExtensions
=============

Extension(이하 확장기능)은 브라우저의 기능을 확장하고 수정할 수 있습니다. Firefox 를 위한 확장기능은 확장 기능 개발을 위한 크로스 브라우저 시스템인 WebExtension API를 이용하여 만들어졌습니다. 이 시스템은 Google Chrome, Opera 및 W3C Draft Community Group에서 지원하는 extension API 와 대부분 호환됩니다. 그러므로 Google Chrome과 Opera를 대상으로 만들어진 확장기능은 조금만 수정하면 대부분 Firefox나 Microsoft Edge에서도 동작합니다. 또한 extension API는 멀티프로세스 Firefox와도 완벽하게 호환됩니다.

질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면 dev-addons 메일링 리스트나 IRC의 #webextensions를 통해 알려주세요.

시작하기
----

* 확장기능이란 무엇인가?
* 첫번째 확장기능
* 두번째 확장기능
* 확장기능의 구조
* Firefox 개발 로드맵 (en-US)
* 확장기능의 예시
* 그 다음은? (en-US)
개념
--

* JavaScript API 일람 (en-US)
* Content scripts
* 주소패턴
* 파일과 상호작용하기 (en-US)
* 여러 언어로 제공하기 (en-US)
* 보안 유의사항들
* 보안 정책 (en-US)
* 다른 프로그램과 상호작용하기 (en-US)
* 개발자 도구 API 사용하기 (en-US)
* 상호작용 명세 만들기
* 사용자와 상호작용하기
* 확장기능의 생애주기
사용자 인터페이스
---------

* 개괄 (en-US)
* 도구모음 버튼 (en-US)
* 도구모음 버튼과 팝업 (en-US)
* 주소창 버튼
* 주소창 버튼과 팝업 (en-US)
* 상세 메뉴 항목 (en-US)
* 사이드바 (en-US)
* 설정 페이지 (en-US)
* 확장기능 페이지 (en-US)
* 알림 (en-US)
* 주소창 자동추천 (en-US)
* 개발자 도구 패널 (en-US)
* 브라우저 스타일 (en-US)
기능 구현
-----

* HTTP 요청 가로채기 (en-US)
* 웹 페이지 수정하기 (en-US)
* 도구모음에 버튼 추가하기 (en-US)
* 설정 페이지 구성하기 (en-US)
* 클립보드와 상호작용하기 (en-US)
* Tabs API 사용하기 (en-US)
* Bookmarks API 사용하기 (en-US)
* Cookies API 사용하기 (en-US)
* contextual identities 사용하기 (en-US)
* 외부 요소 삽입하기 (en-US)

다른 브라우저에서 옮겨오기
--------------

* Firefox의 특성 (en-US)
* 구글 크롬의 확장기능 가져오기
* 오래된 Firefox 확장기능 변환하기
* 안드로이드용 Firefox로 개발하기
* 썬더볼트로 개발하기
* 섭입된 확장기능
* Add-on SDK와의 비교
* XUL/XPCOM 확장기능과의 비교
* 크롬과의 차이점 (en-US)
* 안드로이드와 PC의 차이점
* API 구현의 차이점
Firefox 생애주기
------------

* 사용자 경험
* 설치
* 디버깅
* 지속적인 테스트와 특성
* web-ext 와 작업하기
* web-ext 명령어 일람
* 확장기능과 애드온 ID
* 배포 옵션
* 올바른 권한 요청
* 페이지 스크립트와 개체 공유하기 (en-US)
* 확장기능 폐기하기 (en-US)
* 팁과 트릭 (en-US)
* 확장기능 개발 도구
Reference
---------

### JavaScript APIs

* JavaScript API 일람 (en-US)
* JavaScript API 브라우저 호환성
* action
* alarms
* bookmarks
* browserAction
* browserSettings
* browsingData
* captivePortal
* clipboard
* commands
* contentScripts
* contextualIdentities
* cookies
* declarativeNetRequest
* devtools
* dns
* dom
* downloads
* events
* extension
* extensionTypes
* find
* history
* i18n
* identity
* idle
* management
* menus
* notifications
* omnibox
* pageAction
* permissions
* pkcs11
* privacy
* proxy
* runtime
* scripting
* search
* sessions
* sidebarAction
* storage
* tabs
* theme
* topSites
* types
* userScripts
* webNavigation
* webRequest
* windows
### Manifest keys

* manifest.json 일람
* manifest.json 브라우저 호환성 (en-US)
* action
* author
* background
* browser\_action
* browser\_specific\_settings
* chrome\_settings\_overrides
* chrome\_url\_overrides
* commands
* content\_scripts
* content\_security\_policy
* declarative\_net\_request
* default\_locale
* description
* developer
* devtools\_page
* dictionaries
* externally\_connectable
* homepage\_url
* host\_permissions
* icons
* incognito
* manifest\_version
* name
* offline\_enabled
* omnibox
* optional\_permissions
* options\_page
* options\_ui
* page\_action
* permissions
* protocol\_handlers
* short\_name
* sidebar\_action
* storage
* theme
* theme\_experiment
* user\_scripts
* version
* version\_name
* web\_accessible\_resources
What are extensions?
====================

**참고:** 만약 브라우저 확장 기능의 기본적인 개념은 이미 익숙하다면, 이 섹션을 스킵하고 확장 기능 파일이 어떻게 구성되는지 읽어보세요. 그 다음, 참고 문서와 함께 확장 기능을 개발해 보세요. Firefox Extension Workshop을 방문하여 Firefox용 테스트, 게시 및 확장 기능에 대한 작업 흐름에 대해 자세히 알아보세요.

확장 기능은 브라우저에 기능을 추가합니다. 확장 기능은 표준 웹 기술(HTML, CSS, JavaScript)을 이용해 만들어집니다. 확장 기능은 JavaScript에서 사용되는 웹 API 뿐만이 아니라 전용 JavaScript API에도 접근할 수 있어 웹페이지의 코드가 할 수 있는 것보다 더 많은 일을 할 수 있습니다. 다음은 수행할 수 있는 작업의 몇 가지 예시입니다.

**웹사이트를 개선하거나 보완**: 애드온을 사용하여 웹사이트에서 추가 기능이나 정보를 제공할 수 있습니다. 서비스의 향상을 위해 사용자가 방문한 페이지에서 세부 정보를 수집하도록 허용할 수 있습니다.

![가격 비교 기능을 제공하는 Amazon 애드온 예제](/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/amazon_add_on.png)

예제: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox.

**사용자의 개성 표현**: 브라우저 확장 기능은 웹페이지의 콘텐츠를 조작할 수 있습니다. 예를 들어, 사용자가 방문하는 모든 페이지에 좋아하는 로고나 사진을 배경으로 추가하거나, 독립형 테마 애드온과 동일한 방식으로 Firefox UI을 업데이트할 수 있습니다.

![배트맨 테마를 보여주는 나의 웹 새 탭 애드온](/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/myweb_new_tab_add_on.png)

Examples: MyWeb New Tab, Tabliss, and VivaldiFox.

**웹페이지에 컨텐츠를 추가 또는 제거**: 사용자를 위해 웹페이지에서 방해가 되는 광고를 차단하도록 돕거나, 웹 페이지에서 국가 또는 도시가 언급될 때마다 여행 가이드에 대한 접근을 제공하거나, 일관된 읽기 경험을 제공하기 위해 페이지 컨텐츠를 재구성하는 작업을 하고 싶을 수 있습니다. 웹페이지의 HTML과 CSS에 접근하고 업데이트함으로써 확장 기능은 사용자가 원하는 방식으로 웹을 볼 수 있도록 돕습니다.

![트래커 통계를 차단하는 uBlock origin 애드온 예제](/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/ublock_origin_add_on.png)

Examples: uBlock Origin, Reader, and Toolbox for Google Play Store™.

**도구 및 새로운 브라우징 기능 추가**: 작업 보드에 새로운 기능을 추가하거나, URL, 하이퍼링크, 화면의 글자로부터 QR코드 이미지를 생성합니다. WebExtensions APIs가 제공하는 유연한 UI 옵션들과 강력한 기능을 통해 브라우저에 새로운 기능을 쉽게 추가할 수 있습니다. 그리고 당신의 웹사이트가 아니더라도, 거의 모든 웹사이트의 기능을 향상시킬 수 있습니다.

![QR코드 생성기 애드온 예제](/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/qr_code_image_generator_add_on.png)

Examples: Swimlanes for Trello and Tomato Clock.

**게임**: 전통적인 오프라인 컴퓨터 게임뿐만 아니라 새로운 게임을 만들어 볼 수 있습니다. 가령 일상적인 브라우징에 게임플레이를 포함시키는 방식처럼 말이죠.

Examples: Solitaire Card Game, and 2048 Prime.

**개발 도구 추가**: 웹 개발 도구를 비즈니스로 제공하거나 공유하고 싶은 웹 개발에 대한 유용한 기술 또는 접근 방식을 개발했을 수 있습니다. 어느 쪽이든 간에, 개발자 도구 모음에 새 탭을 추가하여 내장 Firefox 개발자 도구를 향상시킬 수 있습니다.

![Axe 접근성 테스팅 애드온 예제](/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/axe_developer_tools_add_on.png)

Examples: Web Developer, Web React Developer Tools, and aXe Developer Tools.

Firefox 용 확장 프로그램은 확장 기능 개발을 위한 크로스 브라우저 시스템인 WebExtensions APIs를 사용하여 만들어집니다. 대부분의 경우 API는 Google 크롬 및 Opera에서 지원하는 extension API와 호환됩니다. 대부분의 경우 이러한 브라우저 용으로 작성된 확장 프로그램은 Firefox 또는 Microsoft Edge에서 몇 가지 변경 사항만으로 실행됩니다. API는 멀티프로세스 Firefox와도 완벽하게 호환됩니다.

질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면 Add-ons Discourse나 Matrix의 Add-ons room로 요청해주세요.

What's next?
------------

* 간단한 확장 기능을 만들어보려면 Your first extension 참조.
* 확장 기능의 구조에 대한 내용은 Anatomy of an extension 참조
* 확장 기능 예시를 확인하려면 Example extensions 참조.
manifest.json
=============

manifest.json 파일은 json 포맷 파일로서, 모든 웹 익스텐션이 포함하고 있어야 하는 파일입니다.

manifest.json을 사용함으로써, 당신은 당신의 익스텐션의 이름, 버젼과 같은 기본 정보를 명시하며, 또한 당신의 익스텐션의 기능, 예를 들어 기본 스크립트, 내용 스크립트, 브라우져 활동 등과 같은 측면을 명시합니다.

manifest.json에 지원되는 키들은 아래와 같습니다.

* action
* author
* background
* browser\_action
* browser\_specific\_settings
* chrome\_settings\_overrides
* chrome\_url\_overrides
* commands
* content\_scripts
* content\_security\_policy
* declarative\_net\_request
* default\_locale
* description
* developer
* devtools\_page
* dictionaries
* externally\_connectable
* homepage\_url
* host\_permissions
* icons
* incognito
* manifest\_version
* name
* offline\_enabled
* omnibox
* optional\_permissions
* options\_page
* options\_ui
* page\_action
* permissions
* protocol\_handlers
* short\_name
* sidebar\_action
* storage
* theme
* theme\_experiment
* user\_scripts
* version
* version\_name
* web\_accessible\_resources

`"manifest_version"`, `"version"`, `"name" 키들은 반드시 있어야 합니다.`

"\_locales" 경로가 있다면, `"default_locale"` 은 반드시 있어야 하며, `"_locales"` 경로가 없다면, `"default_locale"` 은 없어야 합니다.`

`"applications"는 구글 크롬에서는 지원되지 않고, Firefox 48 이전 버젼에는 의무적으로 있어야 합니다.`

간단한 manifest.json 구문은 다음과 같습니다:


```json
{
  "applications": {
    "gecko": {
      "id": "addon@example.com",
      "strict\_min\_version": "42.0",
      "strict\_max\_version": "50.\*",
      "update\_url": "https://example.com/updates.json"
    }
  },

  "background": {
    "scripts": ["jquery.js", "my-background.js"],
    "page": "my-background.html"
  },

  "browser\_action": {
    "default\_icon": {
      "19": "button/geo-19.png",
      "38": "button/geo-38.png"
    },
    "default\_title": "Whereami?",
    "default\_popup": "popup/geo.html"
  },

  "commands": {
    "toggle-feature": {
      "suggested\_key": {
        "default": "Ctrl+Shift+Y",
        "linux": "Ctrl+Shift+U"
      },
      "description": "Send a 'toggle-feature' event"
    }
  },

  "content\_security\_policy": "script-src 'self' https://example.com; object-src 'self'",

  "content\_scripts": [
    {
      "exclude\_matches": ["\*://developer.mozilla.org/\*"],
      "matches": ["\*://\*.mozilla.org/\*"],
      "js": ["borderify.js"]
    }
  ],

  "default\_locale": "en",

  "description": "...",

  "icons": {
    "48": "icon.png",
    "96": "icon@2x.png"
  },

  "manifest\_version": 2,

  "name": "...",

  "page\_action": {
    "default\_icon": {
      "19": "button/geo-19.png",
      "38": "button/geo-38.png"
    },
    "default\_title": "Whereami?",
    "default\_popup": "popup/geo.html"
  },

  "permissions": ["webNavigation"],

  "version": "0.1",

  "web\_accessible\_resources": ["images/my-image.png"]
}
```
Address bar button
==================

주소줄에 추가되는 버튼으로 사용자가 확장 프로그램과 상호작용하는 일명 페이지 액션 을 말한다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions/address_bar_button.png)

페이지 액션과 브라우저 액션
---------------

주소줄 버튼(또는 페이지 액션)은 툴바 버튼(또는 브라우저 액션)과 아주 비슷하다.

차이점은:

* 위치:
    + 페이지 액션은 브라우저의 주소줄에 표시된다.
    + 브라우저 액션은 주소줄 밖 브라우저의 툴바에 표시된다.
* 보임:
    + 페이지 액션은 평소에는 보통 숨겨지고(show\_matches와 hide\_matches 매니페스트 항목으로 바꿀 수 있다), 해당 탭에 보이거나 숨길 때는 `pageAction.show()`와 `pageAction.hide()` (en-US) 를 호출한다.
    + 브라우저 액션은 항상 보인다.

하고자 하는 동작이 현재 페이지에 대한 것이면 페이지 액션을 사용하고, 전체 또는 여러 페이지가 대상이라면 브라우저 액션을 사용한다. 예를 들어:

| 유형 | Bookmarks action | Content action | Tabs operation |
| --- | --- | --- | --- |
| 페이지 액션 | Bookmark this page | Reddit enhancement | Send tab |
| 브라우저 액션 | Show all bookmarks | Enable ad-blocking | Sync all open tabs |

페이지 액션 기술하기
-----------

페이지 액션의 속성은 manifest.json의 `page_action` (en-US) 항목에서 정의한다:


```json
"page\_action": {
  "browser\_style": true,
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?"
}
```


꼭 있어야 하는 항목은 `default_icon`이다.

페이지 액션을 기술하는 길은 두 가지다: 팝업이 있는가. 없는가. 팝업이 없으면, 사용자 클릭은 `pageAction.onClicked` (en-US)을 청취하는 확장 프로그램에 이벤트를 전달된다:


```js
browser.pageAction.onClicked.addListener(handleClick);
```


팝업이 있으면, 클릭 이벤트는 없다: 대신, 팝업창이 열린다. 사용자는 팝업으로 일을 하고, 팝업창 바깥을 클릭하면 자동으로 닫힌다. 팝업 글에 팝업을 만들고 관리하는 보다 자세한 내용이 있다.

주목! 확장 프로그램은 페이지 액션을 하나만 가질 수 있다.

페이지 액션의 속성은 `pageAction` API로 프로그램적으로 바꿀 수 있다.

아이콘
---

페이지 액션에서 어떻게 아이콘을 만들고 사용하는지에 대한 자세한 내용은 Photon Design System 문서에서 Iconography을 보라.

예제
--

GitHub webextensions-examples 저장소에 팝업없는 페이지 액션 예제 chill-out가 있다.
contentScripts
==============

이 API는 콘텐츠 스크립트를 등록한다. 등록된 콘텐츠 스크립트는 브라우저가 URL 패턴이 일치하는 페이지에 넣는다.

이 API는 `"content_scripts"` (en-US) manifest.json 키와 아주 비슷하다. 단지, `"content_scripts"`로는 설치할 때 정해진 스크립트와 패턴을 바꿀 수 없지만, `contentScripts` API로는 스크립트의 등록이나 해제가 실행 중에도 가능하다.

등록할 스크립트, URL 패턴, 그리고 기타 옵션을 정의하는 객체를 인수로 `contentScripts.register()` (en-US)을 호출하면, 반환된 `Promise`는 `contentScripts.RegisteredContentScript` (en-US) 객체가 인수인 완료를 수행한다.

`RegisteredContentScript`는 `register()`를 호출해 등록할 스크립트를 담는 객체다. 해제는 객체에 정의된 `unregister()` 메소드로 할 수 있다. 또한, 스크립트를 등록한 페이지를 없애면 스크립트는 자동으로 해제된다. 예를 들어, background 페이지에서 등록했으면 그것들은 background 페이지가 파괴될 때 자동으로 해제된다. 마찬가지로 사이드바나 팝업에서 등록했으면, 사이드바나 팝업이 닫힐 때 자동으로 해제된다.

`contentScripts` API 자체는 권한 없이 사용할 수 있지만, `register()`에 전달할 패턴에 대해서는 호스트 권한을 가져야 한다.

자료형
---

`contentScripts.RegisteredContentScript` (en-US)

`contentScripts.register()` (en-US) 함수가 반환하는 객체의 자료형으로 등록된 콘텐츠 스크립트를 표현한다. `unregister()` 메소드로 스스로를 해제할 수 있다.

함수
--

`contentScripts.register()` (en-US)

주어진 콘텐츠 스크립트를 등록한다

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Example extensions
------------------

* content-script-register
storage
=======

웹확장이 데이터를 저장하고, 확인하고, 저장된 항목의 변화를 감시할 수 있도록 해 준다.

저장소 시스템은 Web Storage API에 기반하는데 약간의 차이가 있다:

* 비동기로 동작한다.
* 값은 도메인이 아니라 확장에 딸린 것이다 (예. 같은 키/값 쌍일 경우 확장의 모든 스크립트에서 사용할 수 있다).
* 저장된 값은 그저 문자열이 아니라 JSON-화가능 값이다. 배열과 객체도 된다. 단 포함된 값도 JSON으로 나타낼 수 있어야 하므로 DOM의 노드는 안된다. 값을 저장하기 전에 JSON 문자열로 바꿀 필요는 없지만, 내부적으로 JSON으로 다뤄지므로 JSON화가능임은 요구된다.
* 같은 API 호출로 다수의 키/값 쌍을 다룰 수 있다.

이 API를 사용하려면 manifest.json 파일에 "storage" 권한 (en-US)이 포함돼야 한다.

각 웹확장은 자신만의 저장소를 따로 가진다. which can be split into different types of storage.

이 API는 `Window.localStorage`와 비슷하지만, 확장 코드가 확장 관련 데이터를 저장하는데 `Window.localStorage`를 사용하지 말 것을 권장한다. 사적이 이유로 사용자가 방문 기록이나 데이터를 지우는 다양한 상황에서 확장이 localStorage API로 저장된 데이터는 지워지지만, `storage.local` API로 저장한 데이터는 정확하게 유지된다.

자료형
---

`storage.StorageArea` (en-US)

저장소 영역을 표현하는 객체.

`storage.StorageChange` (en-US)

저장소 영역의 변화를 표현하는 객체.

속성
--

`storage`에는 저장소 영역의 가능한 형식을 나타내는 세가지 속성이 있다.

`storage.sync`

`sync` 저장소 영역을 표현한다. `sync` 저장소의 항목은 브라우저에 동기되므로 사용자가 로그인한 모든 브라우저에서 사용할 수 있다. 기기가 달라도 된다.

`storage.local`

`local` 저장소 영역을 표현한다. `local` 저장소의 항목은 확장이 설치된 기기에 한정된다.

`storage.managed` (en-US)

`managed` 저장소 영역을 표현한다. `managed` 저장소의 항목은 도메인 관리자가 설정하고 확장은 읽을 수만 있으므로 변경을 시도하면 에러가 발생한다.

이벤트
---

`storage.onChanged` (en-US)

저장소 영역의 항목에 변화가 있으면 발생한다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Example extensions
------------------

* annotate-page
* favourite-colour
* forget-it
* navigation-stats
* proxy-blocker
* quicknote
* stored-credentials

> 
> **Note:** This API is based on Chromium's `chrome.storage` API. This documentation is derived from `storage.json` in the Chromium code.
> 
> 
> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
> 
> 
> 

### Edge incompatibilities

Example extensions
------------------

* annotate-page
* favourite-colour
* forget-it
* navigation-stats
* proxy-blocker
* quicknote
* stored-credentials

**참고:** **Acknowledgements**This API is based on Chromium's `chrome.storage` API. This documentation is derived from `storage.json` in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
pageAction
==========

페이지 액션 (en-US)은 브라우저의 주소창에 있는 아이콘이다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/page-action.png)

아이콘 클릭에 대한 대응은 리스너를 등록하고 클릭 이벤트를 기다리는 것이나, 팝업창 (en-US)이 열리게 하는 것일 수 있다.

팝업창은 보통의 웹페이지처럼 HTML, CSS, 그리고 JavaScript로 내용과 동작을 작성할 수 있다. 팝업창에서 실행되는 JavaScript는 백그라운드 스크립트와 마찬가지로 모든 확장앱 API를 사용할 수 있다.

manifest.json의 page\_action 키에 페이지 액션의 대부분의 속성들을 정의할 수 있지만, 이것들은 확정되는 것이라 이후에 바꿀 수 없다. 하지만 이 API는 그것들을 프로그램적으로 재정의하는 것도 가능하다. 그러나 API는 manifest.json에 page\_action 키가 있어야만 사용할 수 있게 되므로 설사 모든 것을 프로그램적으로 할 계획이더라도 page\_action 키는 있어야 한다.

페이지 액션은 특정 페이지에만 적절한 동작들을 위한 것이다(이럴테면 "현재 탭을 북마크하기" 같은). 그렇지 않고, 브라우저가 전반적으로 관련되는 동작이라면(가령은 "모든 북마크 보기" 라면) 브라우저 액션을 대신 사용하라.

자료형
---

`pageAction.ImageDataType` (en-US)

이미지에 대한 픽셀 자료.

함수
--

`pageAction.show()`

지정한 탭에 페이지 액션을 보인다.

`pageAction.hide()` (en-US)

지정한 탭의 페이지 액션을 숨긴다.

`pageAction.isShown()` (en-US)

페이지 액션이 보이는지 아닌지 검사한다.

`pageAction.setTitle()` (en-US)

페이지 액션의 제목을 설정한다. 이것은 페이지 액션위에 툴팁으로 표시된다.

`pageAction.getTitle()` (en-US)

페이지 액션의 제목을 얻는다.

`pageAction.setIcon()` (en-US)

페이지 액션의 아이콘을 설정한다.

`pageAction.setPopup()` (en-US)

페이지 액션의 팝업 URL을 설정한다.

`pageAction.getPopup()` (en-US)

페이지 액션의 팝업 URL을 얻는다.

`pageAction.openPopup()` (en-US)

페이지 액션의 팝업을 연다.

이벤트
---

`pageAction.onClicked` (en-US)

페이지 액션의 아이콘이 클릭되면 발생한다. 페이지 액션이 팝업이 설정되어 있으면 발생하지 않는다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Example extensions
------------------

* apply-css
* chill-out
* history-deleter
* menu-remove-element

**참고:** **Acknowledgements** This API is based on Chromium's `chrome.pageAction` API. This documentation is derived from `page_action.json` in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.