Web 개발 학습하기

Web 개발 학습하기
===========

MDN 학습지에 오신 것을 환영합니다! 여기는 웹 개발을 처음 접하는 초보자가 웹 사이트 개발을 시작하기 위해 필요한 모든 것을 제공하는 글을 모아놓은 곳입니다.

MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니고, 웹 개발에 익숙해지도록 도와드리는 것입니다. 그 후에는 MDN의 다른 문서를 포함해서, 각종 사전 지식을 요구하는 중급, 고급 리소스를 찾아 자신만의 길을 만드세요.

웹 개발이 완전 처음이시라면 시작이 다소 어려우실 수 있습니다. 저희가 이끌어드리면서 주제와 충분히 친숙해지고, 제대로 익히실 수 있도록 상세하게 알려드리겠습니다. 독학이나 강의로 웹 개발을 배우는 학생, 교육 자료를 찾고 계시는 선생님, 취미로 웹 개발을 알아보시는 분, 그저 웹 기술의 동작 원리를 알아보고 싶으신 분 모두 편하게 보실 수 있을거예요.

#### 프런트엔드 웹 개발자가 되고자 하시나요?

목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.

**시작하기**

시작하기
----

처음에서 시작

 처음부터 시작하시는 것이면
 웹과 함께 시작하기 모듈부터 시작해보세요. 웹 개발의
 실용적인 소개를 제공합니다.

기본기를 넘어

 이미 기본 지식은 알고 계시면, 다음 단계는 HTML과 CSS를 자세히 알아보는 것입니다.
 HTML 소개 모듈에서 시작해서
 CSS 첫걸음 모듈까지 배워보세요.

스크립트 다루기

 HTML과 CSS도 알고 계시거나, 아니면 주로 코드 작성에 관심을 두신다면 JavaScript나 서버 개발을
 보시는게 좋습니다.
 JavaScript 첫걸음과
 서버 사이드 첫걸음 모듈을 방문하세요.

프레임워크와 도구

 "바닐라" HTML, CSS, JavaScript의 정수를 모두 배우셨으면
 클라이언트 사이드 웹 개발 도구 (en-US)를
 읽어보세요. 그 후에는
 클라이언트 사이드 JavaScript 프레임워크와 서버 사이드 웹 사이트 프로그래밍도 한 번 고려해보세요.

**참고:** MDN 용어집에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 개발에 관한 질문이 있으시면 자주 하는 질문 (en-US) 문서도 확인해보세요.

다루는 주제
------

다음 목록은 MDN 학습지에서 다루는 모든 주제의 목록입니다.

웹과 함께 시작하기

초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.

HTML — 웹의 구조 짜기

HTML은 웹 사이트의 콘텐츠를 구성하고, 각각의 의미나 목적을 정의하는 언어입니다.

CSS — 웹 스타일링

CSS는 웹 콘텐츠의 스타일과 레이아웃은 물론 애니메이션과 같은 추가 동작을 지정할 때 사용하는 언어입니다.

JavaScript — 동적 클라이언트 사이드 스크립팅

 JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이 주제는 JavaScript 코드의 작성과 이해에
 익숙해지기 위한 모든 기초를 다룹니다.

웹 양식 — 사용자 데이터로 작업하기

 웹 양식은 사용자와 상호작용을 하기 위한 강력한 도구입니다. 주로 사용자에게서 데이터를 받거나, 직접 조절할 수 있는
 사용자 인터페이스를 제공할 때 사용합니다. 이 주제에서는 양식의 구조와 스타일링, 그리고 상호작용까지 모든 것을
 다룹니다.

접근성 — 모두를 위한 웹

 접근성에서는 장애, 장비, 지역 및 기타 사람간의 차이점에 상관 없이 누구나 웹 콘텐츠에 접근할 수 있도록 구성하는
 방법을 다룹니다.

웹 성능 — 빠르고 즉각 반응하는 웹 사이트

 웹 성능에서는 사용자의 인터넷 대역이나 화면 크기, 네트워크, 장비의 성능에 관계하지 않고 웹 어플리케이션의 다운로드는
 빠르게, 사용자 인터페이스의 반응은 즉각 일어나도록 만드는 기술을 다룹니다.

도구와 테스트 (en-US)

 도구와 테스트에서는 크로스 브라우징 테스트, 린팅, 포맷팅, 변환 도구, 버전 관리, 배포, 클라이언트 사이드 JavaScript
 프레임워크를 다룹니다.

서버 사이드 웹 사이트 프로그래밍

 클라이언트 사이드 웹 개발에 집중하시더라도, 서버와 서버 사이드 코드의 작동 방식을 파악하는 것은 여전히 유용합니다.
 여기서는 서버의 일반적인 동작 방식과 함께, 두 개의 유명한 프레임워크인 Django(Python)와 Express (node.js)를 사용해
 서버 사이드 앱을 만드는 방법에 대한 상세한 자습서를 제공합니다.

코드 예제 받기
--------

 학습지의 모든 코드 예제는
 GitHub에서도 보실 수 있습니다. 코드 예제를 한꺼번에
 컴퓨터로 복사하고 싶으신가요?
 가장 최신의 master 코드 브랜치를 ZIP으로 다운로드하시면 가장 쉽게 받아가실 수 있습니다.

자동 업데이트도 할 수 있는, 복잡하지만 좀 더 유연한 방법도 있습니다. 다음과 같은 방법으로 저장소를 복사하세요.

1. 컴퓨터에 Git을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤
 시스템입니다.
2. 명령 프롬프트(Windows) 또는 터미널(Linux, macOS)을 여세요.
3. 명령 프롬프트/터미널이 가리키는 현재 위치에 `learning-area` 저장소를 복사하시려면 다음 명령어를
 입력하세요.

```bash
git clone https://github.com/mdn/learning-area
```

4. 이제 탐색기/Finder 또는
 `cd` 명령어를 사용해서
 원하시는 파일을 찾아보세요.

 GitHub의 마스터 버전에 변경사항이 생겼을 땐 `learning-area` 저장소를 아래의 방법으로 업데이트하실 수
 있습니다.

1. 명령 프롬프트/터미널에서 `cd`명령어를 사용해 `learning-area` 폴더로 이동하세요. 만약 현재
 위치가 `learning-area` 폴더의 바로 위라면,

```bash
cd learning-area
```

입력하시면 됩니다.
2. 아래의 명령어를 입력해 저장소를 업데이트하세요.

```bash
git pull
```

연락처
---

 어떤 주제건 저희에게 연락하고 싶으실 때 가장 좋은 방법은
 Discourse 포럼에 글을 남겨주시는 것입니다. 틀린 점, 빠진 부분,
 새로운 학습지 주제, 이해가 어려운 부분에 대한 도움 요청, 그 외 기타 질문이나 걱정거리 등 무엇이든 좋아요.

 콘텐츠의 추가와 개선에 관심이 있으시면
 MDN에 참여하는 법을 보시고 연락해주세요. 배우시는 분, 가르치시는 분, 숙련 개발자
 등 누구나 환영합니다!

같이 보기
-----

### 영어

Mozilla 개발자 뉴스레터

웹 개발자를 위한 Mozilla의 뉴스레터입니다. 모둔 수준의 개발자에게 유용합니다.

Learn JavaScript

Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.

Web Demystified

Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의

Codecademy

처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음

BitDegree

게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함

EXLskills

정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음

freeCodeCamp.com

웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음

Web Literacy Map

초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함

Edabit

다양한 코딩 문제를 접할 수 있음

### 한국어

생활코딩

웹에 대한 기초를 쌓기에 유익함

edwith

부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음


MDN Web Docs 프로젝트

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 용어 사전: 웹 용어 정의

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 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, Mozilla 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다.

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

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


웹어셈블리

웹어셈블리
=====

WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.

간단히 말해서
-------

웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.

WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다.

더 훌륭한 점은, 주요 브라우저 벤더의 적극적인 참여를 통해 W3C 웹어셈블리 워킹 그룹 및 Community Group에서 웹 표준으로 개발되고있다는 것입니다.

가이드
---

WebAssembly concepts

웹 어셈블리가 무엇인지, 왜 그렇게 유용한지, 어떻게 기존의 웹 플랫폼(혹은 그 이상)에 적응시켜 사용할 수 있는지 기본 개념을 알아봅시다.

Compiling a New C/C++ Module to WebAssembly

Emscripten 같은 도구를 사용해서 C/C++ 로 작성된 코드를 wasm으로 컴파일할 수 있습니다. 어떻게 컴파일할 수 있는지 알아봅시다.

Compiling an Existing C Module to WebAssembly

WebAssembly의 핵심 기능은 기존의 C 라이브러리 개발 생태계을 활용해 개발자가 웹에서 사용할 수 있도록하는 것입니다.

Compiling from Rust to WebAssembly

Rust 코드를 작성했다면 WebAssembly로 컴파일 할 수 있습니다! 이 튜토리얼은 Rust 프로젝트를 컴파일하여 기존 웹 애플리케이션에서 사용하기 위해 알아야 할 모든 것을 설명합니다.

Loading and running WebAssembly code

Wasm 모듈을 사용한 후에는 WebAssembly JavaScript API를 Fetch 또는 XHR API와 결합하는 방법에 대해 설명합니다.

Using the WebAssembly JavaScript API

wasm 모듈을 브라우저로 불러왔으면, 사용해야겠지요? 본 글에서는 웹어셈블리 JavaScript API를 이용하여 웹어셈블리를 어떻게 사용하는지를 설명합니다.

Exported WebAssembly functions

익스포트 된 웹어셈블리 함수는 JavaScript에서의 웹어셈블리 함수의 반영이며, JavaScript에서 웹어셈블리 코드를 호출할 수 있도록 해줍니다. 본 글에서는 익스포트 된 웹어셈블리 함수가 무엇인지에 대해 설명합니다.

Understanding WebAssembly text format

본 글에서는 웹어셈블리의 텍스트 포맷에 대해 설명합니다. 텍스트 포맷은 브라우저에서 개발자 도구를 이용하여 디버깅 할 때 보여지는 wasm 모듈의 저수준(Low-level) 문자형 표현입니다.

Converting WebAssembly text format to wasm

본 글에서는 텍스트 포맷으로 작성된 웹어셈블리 모듈을 wasm 바이너리로 변환하는 방법을 제시합니다.

API 참조
------

* WebAssembly instruction reference (en-US)
    + : WebAssembly 연산자 집합에 대한 대화형 샘플이 포함된 참조 문서입니다.
* WebAssembly JavaScript interface
    + : 이 객체는 모든 WebAssembly 관련 기능의 네임스페이스 역할을 합니다.
* `WebAssembly.Global()`
    + : `WebAssembly.Global` 개체는 JavaScript와 `WebAssembly.Module` 인스턴스 여러 개에서 가져오고 내보낼 수 있는 전역 변수 인스턴스를 나타냅니다. 이렇게하면 여러 모듈을 동적으로 연결할 수 있습니다.
* `WebAssembly.Module()`
    + : `WebAssembly.Module` 개체에는 브라우저에서 이미 컴파일한 상태의 stateless WebAssembly 코드가 포함되어 있으며 효율적으로 Worker와 효율적으로 공유 (en-US)하고 여러 번 인스턴스화 할 수 있습니다.
* `WebAssembly.Instance()`
    + : `WebAssembly.Instance` 객체는 상태를 가지며, 실행가능한 `Module`의 인스턴스입니다. `Instance` 객체는 웹어셈블리 코드를 JavaScript에서 부를 수 있도록 익스포트된 모든 웹어셈블리 함수를 포함하고있습니다.
* `WebAssembly.compile()`
    + : `WebAssembly.compile()` 함수는 WebAssembly 이진 코드를 `WebAssembly.Module`개체로 컴파일 합니다.
* `WebAssembly.compileStreaming()`
    + : `WebAssembly.compileStreaming()` 함수는 스트리밍된 기본 소스에서 직접 `WebAssembly.Module`을 컴파일합니다.
* `WebAssembly.instantiate()`
    + : The `WebAssembly.instantiate()` function allows you to compile and instantiate WebAssembly code.
    + : `WebAssembly.instantiate()`함수로 WebAssembly 코드를 컴파일하고 인스턴스화할 수 있습니다.
* `WebAssembly.instantiateStreaming()`
    + : `WebAssembly.instantiateStreaming ()` 함수는 WebAssembly 코드를 컴파일하고 인스턴스화하여 `모듈`과 첫 번째 `인스턴스`를 반환하는 기본 API입니다.
* `WebAssembly.validate()`
    + : `WebAssembly.validate()` 함수는 지정된 형식의 WebAssembly 이진 코드 배열의 유효성을 확인합니다.
* `WebAssembly.Memory()`
    + : `WebAssembly.Memory` 객체는 사이즈 조절 가능한 `ArrayBuffer`로, `Instance`가 접근하는 메모리를 로우(raw) 바이트들로 들고있습니다.
* `WebAssembly.Table()`
    + : `WebAssembly.Table` 객체는 `Instance` 에 의해 접근되는 불투명한 값(함수 레퍼런스)들의 사이즈 조절 가능한, 형식지정된 배열입니다.
* `WebAssembly.Tag()` (en-US)
    + : `WebAssembly.Tag` 개체는 WebAssembly 코드에서 발생할 수 있는 WebAssembly 예외 유형을 정의합니다.
* `WebAssembly.Exception()` (en-US)
    + : `WebAssembly.Exception` 개체는 WebAssembly에서 JavaScript로 이동하거나 JavaScript에서 WebAssembly 예외 처리기로 이동하는 런타임 예외를 나타냅니다.
* `WebAssembly.CompileError()`
    + : 새 웹어셈블리 `CompileError` 객체를 생성합니다.
* `WebAssembly.LinkError()`
    + : 새 웹어셈블리 `LinkError` 객체를 생성합니다.
* `WebAssembly.RuntimeError()`
    + : 새 웹어셈블리 `RuntimeError` 객체를 생성합니다.
예제
--

* WASMSobel
* webassembly-examples 저장소에서 다른 예제들도 구경해보세요.
명세서
---

| Specification |
| --- |
| WebAssembly JavaScript Interface  |

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

{{Compat}}바깥 고리
-----

* WebAssembly on Mozilla Research
* webassembly.org
* WebAssembly articles on Mozilla Hacks blog
* W3C WebAssembly Community Group
* Emscripting a C Library to Wasm


부가 기능들 - Mozilla

부가 기능들
======

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

* 특정 웹사이트의 내용 또는 모양새를 바꿉니다.
* Firefox의 사용자 인터페이스를 변형합니다.
* Firefox에 새로운 기능을 추가합니다.
애드온 개발하기
--------

Firefox 애드온을 개발하는데 있어서는 현재 몇가지 툴셋들이 있습니다, 그러나 웹확장기능(WebExtensions) 이 2017년 말에 표준으로 선정될 것입니다. 나머지 툴들은 같은기간안에 지원이 중단(deprecated) 될 것으로 예상 됩니다.

이곳에서 당신은 애드온을 개발하는데 이용 가능한 옵션에 대한 정보를 찾을 수 있을 것입니다, 이로써 당신은 지금 당장과 미래에 무엇이 당신에게 가장 좋을지 결정 할 수 있을 것입니다.

### 새 애드온 만들기

만일 당신이 새로운 애드온을 설계한다면, 우리는 아래의 두가지 방법들 중 하나를 고를 것을 추천드립니다. 웹확장기능들의 번역이 완전해질 때까지 각각의 방법들에 대한 찬반 여론들이 있을 것입니다. 아래의 선택사항들을 읽고 당신에게 알맞는 도구를 결정하세요.

* 웹확장기능(WebExtensions)
    + 웹확장기능(WebExtensions)은 Firefox 애드온의 미래 입니다. 이것은 크로스브라우져(cross-browser)간에 사용될 수 있도록 디자인 되었습니다.
     Firefox에서 이용할 수 있도록 만들어진 웹확장기능(WebExtensions)은 대부분 약간의 수정을 거치면 Chrome, Edge, 그리고 Opera에서 동작합니다. 이것은 또한 멀티프로세스 Firefox에서도 완전하게 작동합니다. 현재 API가 지원하는 Firefox 와 다른 브라우져를 확인하세요. 우리는 개발자가 원하는 API들을 지속적으로 디자인하고 구현할 것입니다.대부분의 웹확장기능(WebExtensions) API는 안드로이드용 Firefox에서도 사용 가능합니다. 더알아보기
* 애드온 SDK
    + 애드온 SDK는 Firefox 애드온 개발을 위한 API를 제공하며, 이것은 개발, 테스트, 패키징을 위한 도구입니다. 당신은 안드로이드용 Firefox를 위한 애드온 SDK 확장기능도 사용할 수 있습니다. 우리는 당신이 high-level API들만을 사용할 것을 권장합니다. 이것은 당신이 웹확장기능(WebExtensions)으로 마이그레이션 하는 여행 길을 더 쉽게 해 줄 것입니다. 더알아보기
### 기존 애드온(Add-on)을 이전하기

Firefox 내년에 몇가지 변화를 겪게 됩니다. 유저들에게는 높은 브라우징 신뢰성을, 개발자들에게는 편리한 애드온 개발경험을 제공합니다. 당신이 개발한 애드온은 호환성을 유지하기위해 몇 가지 수정이 필요할 수 있습니다. 하지만 수정이 끝난 이후에는 당신의 애드온이 좀 더 높은 호환성, 안전성을 가지게 될 것입니다.

우리는 당신이 애드온을 이전할 때 필요한 도움을 제공하기 위해서 개발에 필요한 자료, 권고 사항, 운영 시간, 그리고 기타 등의 정보를 제공합니다.

애드온 이전을 시작하려면 애드온 호환성 검사를 이용해서 어떤 문제가 있는지 알아보세요.

애드온 출시하기
--------

Addons.mozilla.org, 그러니까 일반적으로 "AMO"라 불리는 곳은, 개발자로 하여금 부가기능을 업로드하고, 사용자들이 이 부가기능을 찾아 설치할 수 있도록 만들어진 Mozilla 재단의 공식 웹사이트입니다. AMO에 여러분이 제작한 부가기능을 업로드하여, 사용자와 제작자의 모임에 참가할 수 있게 되며, 여러분의 부가기능을 사용하는 사용자를 찾을 수 있습니다.

AMO에 여러분의 부가기능을 반드시 업로드해야 하는 것은 아니지만, Firefox 40 버전부터 여러분의 코드를 반드시 Mozilla 재단이나 사용자에 의해 인증받지 않으면 부가기능을 설치할 수 없게 됩니다.

여러분의 부가기능을 업로드하는 과정에 대해 자세히 알아보고 싶으시다면, 부가기능을 인증받고 배포하기 문서를 참고하세요.

애드온의 다양한 형태
-----------

Generally, when people speak of add-ons they're referring to extensions, but there are a few other add-on types that allow users to customize Firefox. Those add-ons include:

* Lightweight themes are a simple way to provide limited customization for Firefox.
* Mobile add-ons are add-ons for Firefox for Android. Note, though, that we intend to deprecate some of the technology underlying these APIs. In the future, WebExtensions will be fully supported on Firefox for Android.
* Search engine plugins (en-US) add new search engines to the browser's search bar.
* User dictionaries are add-ons that let you spell-check in different languages.
* Language packs are add-ons that let you have more languages available for the user interface of Firefox.

---

연락하세요!
------

아래에 소개된 링크를 통해서 자문을 구하거나, 피드백을 보내고, 애드온에 관련된 최신 소식을 접할 수 있습니다.

### Add-ons 포럼

Use the Add-ons Discourse forum to discuss all aspects of add-on development and to get help.

### 메일링 목록

Use the **dev-addons** list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:

* dev-addons list info
* dev-addons archives
### IRC

만약 당신이 IRC 애용자라면, 다음 방법들로 연락할 수도 있습니다.

* #addons (애드온 생태계에 대한 대화가 주를 이룸)
* #extdev (애드온 개발에 대한 대화가 주를 이룸)
* #webextensions (웹 확장프로그램에 대한 대화가 주를 이룸)


Firefox - Mozilla

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 - Mozilla

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


Your second extension - Mozilla

Your second extension
=====================

Your first extension 장을 읽었다면, 확장 기능을 만드는 법을 알게 되었을 것입니다. 이번 장에서는 몇개의 API를 사용하는 약간 더 복잡한 확장 기능을 만들어 보겠습니다.

이 확장 기능은 Firefox 툴바에 새로운 버튼을 추가합니다. 사용자가 이 버튼을 클릭하면 동물을 선택하는 팝업을 보여줍니다. 동물을 선택하면 현재 웹페이지의 내용을 선택한 동물 이미지로 변경합니다.

구현 내용:

* **Firefox 툴바에 추가된 버튼의 browser action (en-US)을 정의합니다.**
 버튼을 위해 필요한것:
    + "beasts-32.png" 아이콘
    + 버튼을 누를때 나오는 팝업. 이 팝업은 HTML과 CSS, JavaScript로 구성됩니다.
* **애드온 메니저에 보여질 확장 기능 아이콘을 정의합니다.**
* **웹페이지에 주입될 "beastify.js"라는 content script를 작성합니다.**
 이것이 실제로 웹페이지를 변경할 코드입니다.
* **웹페이지를 변경할 동물 이미지를 패키징합니다.**
 이미지를 "웹 접근 가능 자원"으로 만들어 웹페이지에서 참조하게 합니다.

확장 기능의 구조를 표현하면 아래와 같습니다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/Untitled-1.png)

간단한 확장 기능이지만 WebExtensions API의 기본 개념을 잘 보여줍니다.

* 툴바에 버튼 추가
* 팝업에 쓰일 HTML, CSS, JavaScript 정의
* 웹페이지에 content scripts 주입
* 컨텐츠 스크립트와 나머지 확장 기능과의 통신
* 확장 기능의 웹페이지에서 사용할 리소스 패키징

GitHub 예제 소스코드.

Writing the extension
---------------------

새 디렉토리를 생성하고 들어갑니다.

```bash
mkdir beastify
cd beastify
```

### manifest.json

이제 "manifest.json" 파일을 아래와 같은 내용으로 생성합니다.

```json
{
  "manifest\_version": 2,
  "name": "Beastify",
  "version": "1.0",

  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/Examples#beastify",
  "homepage\_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
  "icons": {
    "48": "icons/beasts-48.png"
  },

  "permissions": ["activeTab"],

  "browser\_action": {
    "default\_icon": "icons/beasts-32.png",
    "default\_title": "Beastify",
    "default\_popup": "popup/choose\_beast.html"
  },

  "web\_accessible\_resources": [
    "beasts/frog.jpg",
    "beasts/turtle.jpg",
    "beasts/snake.jpg"
  ]
}
```

* 첫 세 가지 키인 `manifest_version` (en-US), `name` (en-US), and `version` (en-US)는, 필수로 포함되어야 하며 확장 기능의 기본 정보입니다.
* `description` (en-US) 과 `homepage_url` (en-US)은 선택사항이나, 확장 기능에 관한 유용한 정보를 가지기에 권장됩니다.
* `icons` (en-US) 도 선택사항이나 애드온 매니저에서 확장 기능 아이콘을 보여줄 수 있기에 권장됩니다.
* `permissions` (en-US) 은 확장 기능이 필요로 하는 권한의 목록입니다. 이 확장 기능에서는 `activeTab` 권한 (en-US) 을 사용합니다.
* `browser_action` (en-US)는 툴바에 나오는 버튼을 정의하고 세 가지 정보를 정의합니다.
    + `default_icon` 는 필수이고, 버튼의 아이콘을 정의합니다.
    + `default_title` 는 선택사항이고 툴팁을 정의합니다.
    + `default_popup` 은 사용자가 버튼을 클릭할때 팝업을 보여주고 싶을 때 사용합니다. 이 키로 확장 기능에 포함된 HTML파일을 지정합니다.
* `web_accessible_resources` (en-US)는 웹페이지에서 접근가능한 파일들의 목록입니다. 확장 기능은 이미지로 웹페이지의 컨텐츠를 변경해야하기에 이 이미지들이 페이지에 접근 가능하게 해야 합니다.

모든 경로는 manifest.json의 위치를 기준으로 한 상대 경로입니다.

### The icon

확장 기능은 아이콘을 가져야 합니다. 이 아이콘은 애드온 매니저("about:addons" url을 통해 열 수 있습니다)에서 확장 기능의 목록에서 보여집니다. 이번에 만든 manifest.json는 "icons / beasts-48.png" 아이콘을 정의했습니다.

"icons"라는 디렉토리를 만들고 "beasts-48.png" 파일을 그 아래에 저장하겠습니다. 우리 예제는 Aha-Soft's Free Retina iconset에서 가져온 이미지를 라이센스 조건에 따라 사용했습니다.

자신만의 아이콘을 사용하려면 48x48 픽셀이어야 합니다. 또한 고해상도를 위한 96x96 픽셀도 지원합니다. 만약 고해상도를 지원하게 하고싶다면 manifest.json의 아이콘 부분을 아래처럼 작성하면 됩니다.

```json
"icons": {
  "48": "icons/beasts-48.png",
  "96": "icons/beasts-96.png"
}
```

### The toolbar button

툴바 버튼도 아이콘이 필요한데, 우리 manifest.json 파일에서 툴바 버튼의 아이콘을 "icons/beasts-32.png"으로 기술하였습니다.

"icons" 디렉토리에 "beasts-32.png" 파일을 저장합니다. 우리는 우리 예제의 이미지는 IconBeast Lite icon set에서 가져온 이미지를 라이센스 조건에 따라 사용했습니다.

팝업을 제공하지 않으면 사용자가 버튼을 클릭할 때 클릭 이벤트가 없어지게 됩니다. 팝업을 제공한다면 이벤트는 없어지지 않고 대신 팝업이 열리게 됩니다. 우리는 팝업을 열어야 하니 바로 다음에 팝업을 생성하겠습니다.

### The popup

이 팝업의 기능은 세 동물중 하나를 선택하는 기능입니다.

확장 기능 루트 아래 "popup" 디렉토리를 생성합니다. 여기에 팝업 관련 파일들을 저장할 것 입니다. 이 팝업이 가지는 세 가지 파일은 다음과 같습니다.

* **`choose_beast.html`** 컨텐츠의 패널 정의
* **`choose_beast.css`** 스타일
* **`choose_beast.js`** 활성화된 탭에 사용자가 선택한 이미지를 content script를 통해 반영합니다.

```bash
mkdir popup
cd popup
touch choose_beast.html choose_beast.css choose_beast.js
```

#### choose\_beast.html

HTML파일의 내용은 다음과 같습니다.

```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose\_beast.css" />
  </head>

  <body>
    <div id="popup-content">
      <div class="button beast">Frog</div>
      <div class="button beast">Turtle</div>
      <div class="button beast">Snake</div>
      <div class="button reset">Reset</div>
    </div>
    <div id="error-content" class="hidden">
      <p>Can't beastify this web page.</p>
      <p>Try a different page.</p>
    </div>
    <script src="choose\_beast.js"></script>
  </body>
</html>
```

각각의 동물들을 보여주는 항목을 가지는 `<div>` (en-US) 요소의 ID에 `"popup-content"` 를 정의했습니다. 또 다른 `"error-content"` ID를 가지는 `<div>`는 `"hidden"` 이라는 class를 정의하였고 팝업을 초기화 할때 문제가 생기는 경우 사용할 것입니다.

이 HTML파일은 일반 웹페이지처럼 CSS파일과 JS파일을 포함합니다.

#### choose\_beast.css

이 CSS는 팝업의 크기를 정의하고 선택항목의 공간을 정의하는 등 기본적인 스타일링을 합니다. 또한 `class="hidden"` 이라고 정의한 항목을 숨깁니다. 이것은 `"error-content"` `<div>` 가 기본적으로는 숨겨진다는 것을 뜻합니다.

```css
html,
body {
  width: 100px;
}

.hidden {
  display: none;
}

.button {
  margin: 3% auto;
  padding: 4px;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
}

.beast:hover {
  background-color: #cff2f2;
}

.beast {
  background-color: #e5f2f2;
}

.reset {
  background-color: #fbfbc9;
}

.reset:hover {
  background-color: #eaea9d;
}
```

#### choose\_beast.js

팝업의 JavaScript 코드는 아래와 같습니다.

```js
/\*\*
 \* CSS to hide everything on the page,
 \* except for elements that have the "beastify-image" class.
 \*/
const hidePage = `body > :not(.beastify-image) {
 display: none;
 }`;

/\*\*
 \* Listen for clicks on the buttons, and send the appropriate message to
 \* the content script in the page.
 \*/
function listenForClicks() {
  document.addEventListener("click", (e) => {
    /\*\*
 \* Given the name of a beast, get the URL to the corresponding image.
 \*/
    function beastNameToURL(beastName) {
      switch (beastName) {
        case "Frog":
          return browser.extension.getURL("beasts/frog.jpg");
        case "Snake":
          return browser.extension.getURL("beasts/snake.jpg");
        case "Turtle":
          return browser.extension.getURL("beasts/turtle.jpg");
      }
    }

    /\*\*
 \* Insert the page-hiding CSS into the active tab,
 \* then get the beast URL and
 \* send a "beastify" message to the content script in the active tab.
 \*/
    function beastify(tabs) {
      browser.tabs.insertCSS({ code: hidePage }).then(() => {
        let url = beastNameToURL(e.target.textContent);
        browser.tabs.sendMessage(tabs[0].id, {
          command: "beastify",
          beastURL: url,
        });
      });
    }

    /\*\*
 \* Remove the page-hiding CSS from the active tab,
 \* send a "reset" message to the content script in the active tab.
 \*/
    function reset(tabs) {
      browser.tabs.removeCSS({ code: hidePage }).then(() => {
        browser.tabs.sendMessage(tabs[0].id, {
          command: "reset",
        });
      });
    }

    /\*\*
 \* Just log the error to the console.
 \*/
    function reportError(error) {
      console.error(`Could not beastify: ${error}`);
    }

    /\*\*
 \* Get the active tab,
 \* then call "beastify()" or "reset()" as appropriate.
 \*/
    if (e.target.classList.contains("beast")) {
      browser.tabs
        .query({ active: true, currentWindow: true })
        .then(beastify)
        .catch(reportError);
    } else if (e.target.classList.contains("reset")) {
      browser.tabs
        .query({ active: true, currentWindow: true })
        .then(reset)
        .catch(reportError);
    }
  });
}

/\*\*
 \* There was an error executing the script.
 \* Display the popup's error message, and hide the normal UI.
 \*/
function reportExecuteScriptError(error) {
  document.querySelector("#popup-content").classList.add("hidden");
  document.querySelector("#error-content").classList.remove("hidden");
  console.error(`Failed to execute beastify content script: ${error.message}`);
}

/\*\*
 \* When the popup loads, inject a content script into the active tab,
 \* and add a click handler.
 \* If we couldn't inject the script, handle the error.
 \*/
browser.tabs
  .executeScript({ file: "/content\_scripts/beastify.js" })
  .then(listenForClicks)
  .catch(reportExecuteScriptError);
```

이 코드의 시작접은 96번째 라인입니다. 이 스크립트는 `browser.tabs.executeScript()` (en-US) API를 사용해 팝업이 로드될때 활성화된 탭에 content script (beastify.js)를 주입합니다. content script를 성공적으로 주입하면 사용자가 탭을 닫거나 페이지를 이동할 때까지 content script가 주입 된 상태로 유지됩니다.

`browser.tabs.executeScript()`API호출이 실패하는 흔한 이유는 모든 웹페이지에 content scripts를 주입할 수 없기 때문입니다. 예를들어 about:debugging 같은 권한이 있는 페이지에서는 content scripts를 주입할 수 없고 addons.mozilla.org 도 마찬가지입니다. 이처럼 실패할때는 `reportExecuteScriptError()`가 호출되어 `"popup-content"` `<div>` 를 숨기고 `"error-content"` `<div>`를 보여주고 콘솔에 에러를 로깅합니다.

content script 주입이 성공하면 `listenForClicks()`이 호출 된다. 이 함수는 팝업에서 클릭을 위한 리스너입니다.

* `"beast"`클래스를 가진 버튼을 클릭하면 `beastify()` 함수가 호출됩니다.
* `"reset"`클래스를 가진 버튼을 클릭하면 `reset()`함수가 호출됩니다.

`beastify()` 함수는 다음의 3가지 기능을 합니다.

* 클릭한 버튼을 동물의 이미지 URL로 매핑
* `browser.tabs.insertCSS()` (en-US) API로 CSS를 주입하여 페이지의 전체를 숨깁니다.
* 페이지를 동물 이미지로 변경하도록 짐승 이미지 URL을 전달 요청하기 위해 `browser.tabs.sendMessage()` (en-US) API로 "beastify"메시지를 content script에 보냅니다.

`reset()` 함수는 페이지가 동물 이미지로 변경된 것을 취소합니다.

* `browser.tabs.removeCSS()` (en-US) API로 추가한 CSS를 제거합니다.
* 페이지를 리셋하기 위해 content script에 "reset" 메시지를 보냅니다.
### The content script

확장 기능의 루트에 "content\_scripts"라는 디렉토리를 생성하고, "beastify.js" 파일을 아래 내용으로 작성합니다.

```js
(function () {
  /\*\*
 \* Check and set a global guard variable.
 \* If this content script is injected into the same page again,
 \* it will do nothing next time.
 \*/
  if (window.hasRun) {
    return;
  }
  window.hasRun = true;

  /\*\*
 \* Given a URL to a beast image, remove all existing beasts, then
 \* create and style an IMG node pointing to
 \* that image, then insert the node into the document.
 \*/
  function insertBeast(beastURL) {
    removeExistingBeasts();
    let beastImage = document.createElement("img");
    beastImage.setAttribute("src", beastURL);
    beastImage.style.height = "100vh";
    beastImage.className = "beastify-image";
    document.body.appendChild(beastImage);
  }

  /\*\*
 \* Remove every beast from the page.
 \*/
  function removeExistingBeasts() {
    let existingBeasts = document.querySelectorAll(".beastify-image");
    for (let beast of existingBeasts) {
      beast.remove();
    }
  }

  /\*\*
 \* Listen for messages from the background script.
 \* Call "beastify()" or "reset()".
 \*/
  browser.runtime.onMessage.addListener((message) => {
    if (message.command === "beastify") {
      insertBeast(message.beastURL);
    } else if (message.command === "reset") {
      removeExistingBeasts();
    }
  });
})();
```

content script는 먼저 전역 변수 `window.hasRun`을 확인합니다. content script가 이미 실행되어 있다면 아무 작업도 하지 않고, 아직 주입되어 있지 않으면 `window.hasRun`를 true로 세팅한뒤 작업을 계속합니다. 이 작업을 하는 이유는, 팝업을 열 때마다 활성화된 탭에 content script를 실행하기 때문에 스크립트가 중복으로 실행되게 됩니다. 따라서 첫번째 팝업 오픈시에만 content script를 실행해야 합니다.

그런 다음 40번째 라인에서 content script는 `browser.runtime.onMessage` (en-US) API로 팝업의 메시지를 받습니다. 위에서 봤던 팝업의 스크립트는 "beastify"와 "reset" 두 종류의 메시지를 보냅니다.

* "beastify" 메시지를 받으면 메시지에 동물 이미지의 URL이 있다는 걸 예상할 수 있습니다. 이전의 "beastify" 메시지로 추가된 동물을 제거하고 <img> 요소를 만들어서 src속성에 동물 이미지 URL을 세팅합니다.
* "reset" 메시지를 받으면 추가된 모든 동물을 삭제합니다.
### The beasts

마지막으로 동물의 이미지를 추가합니다.

"beasts" 디렉토리를 만들고 그 아래 적절한 이름의 이미지 세개를 추가합니다. GitHub 저장소에서 이미지를 가져오거나, 아래의 이미지를 사용할 수 있습니다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/frog.jpg)
![](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/snake.jpg)
![](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/turtle.jpg)

Testing it out
--------------

먼저 모든 파일들이 올바르게 있는지 확인합니다.
```

beastify/

    beasts/
        frog.jpg
        snake.jpg
        turtle.jpg

    content_scripts/
        beastify.js

    icons/
        beasts-32.png
        beasts-48.png

    popup/
        choose_beast.css
        choose_beast.html
        choose_beast.js

    manifest.json
```

이제 확장 기능을 임시 애드온으로 불러옵니다. Firefox에서 about:debugging를 열고 "Load Temporary Add-on"를 클릭한 다음 manifest.json 파일을 선택합니다. 그러면 Firefox 툴바에서 버튼을 볼 수 있습니다.

![The beastify icon in the Firefox toolbar](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/beastify_icon.png)

웹페이지를 열고 툴바 버튼을 클릭하고 동물을 선택하면 웹페이지가 바뀌는 것을 볼 수 있습니다.

![A page replaced with the image of a turtle](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/beastify_page.png)

Developing from the command line
--------------------------------

아래처럼 web-ext툴을 이용해 설치할 수도 있습니다.

```bash
cd beastify
web-ext run
```

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

이것으로 보다 발전된 Firefox용 확장 기능을 만들어 보았습니다.

* 확장 기능의 구조에 대해 읽어보기
* 확장 기능 예제 살펴보기
* 확장 기능을 개발하고, 테스트하고, 게시하는 데 필요한 것 찾아보기 (en-US)
* 더 공부하기 (en-US)


Your first extension - Mozilla

Your first extension
====================

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

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

우선, Firefox의 버전이 45 이상이여야 합니다.

확장기능 만들기
--------

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

```bash
mkdir borderify
cd borderify
```

### manifest.json

이제 "borderify" 폴더 안에 "manifest.json" 파일을 만들어야 합니다. 아래 내용을 작성해 주세요.

```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"]
    }
  ]
}
```

* `manifest_version`, `name`, `version`, 이 세가지 키는 반드시 필요합니다. 확장의 기본 메타 데이터를 담고 있습니다.
* `description`은 없어도 괜찮지만 포함하는 게 좋습니다. 확장 관리자 화면에서 볼 수 있습니다.
* `icons`은 없어도 괜찮지만 역시 포함하는 편이 좋습니다. 이는 확장의 아이콘을 결정하며 확장 관리자 화면에서 볼 수 있습니다.

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

* content scripts에 대해 더 알아보기
* match patterns에 대해 더 알아보기

**경고:** 확장에 ID를 지정해야 할 수도 있습니다. 애드온 ID를 지정해야 한다면, `manifest.json` 파일에 `application` 키를 작성한 다음 gecko.id 프로퍼티를 설정하면 됩니다.```json
 "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` 프로퍼티로 지정해줘야 합니다.

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

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

* 아이콘을 지정하는 방법에 대해 더 알아보기
### borderify.js

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

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

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

* content scripts에 대해 더 알아보기
사용해보기
-----

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

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

### 설치

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

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

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

### 테스트

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

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

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

* 확장기능을 불러오는 것에 대해 더 알아보기
패키징과 배포
-------

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

다음으로
----

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

* 확장기능의 구조에 대해 더 자세히 알아보기
* 좀 더 복잡한 확장기능을 만들기
* 확장기능에서 사용할 수 있는 JavaScript API 문서


Example extensions - Mozilla

Example extensions
==================

확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다 https://github.com/mdn/webextensions-examples. 이번장에서는 해당 저장소에서 사용되는 WebExtension API에 대해 설명한다.

여기에 나오는 예제는 Firefox Nightly에서 동작한다. 대부분은 이전 버전에서도 동작하지만 확장앱의 manifest.json에서 strict\_min\_version 키를 확인한다.

이 예제를 실행해보려면 세가지 방법이 있다.

1. 레파지토리를 클론한뒤 소스 디렉토리를 "Load Temporary Add-on"기능으로 로드한다. 확장앱은 Firefox를 재시작하기 전까지 로드되어있다.
2. 레파지토리를 클론한뒤 web-ext 커멘드 라인 툴을 이용해서 확장앱을 Firefox에 설치한다.
3. 레파지토리를 클론한뒤 빌드 디렉토리로 이동한다. 여기에는 빌드된 예제들이 있으므로 Firefox에서 (파일 / 파일 열기를 사용해) 파일을 열고 addons.mozilla.org에서 설치하는것 처럼 영구적으로 설치할 수 있습니다.

레파지토리에 공헌하려한다면 pull request를 보내면 된다

| Name | Description | JavaScript APIs |
| --- | --- | --- |
| annotate-page | Displays a sidebar that lets you take notes on web pages. | `storage.local``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``windows.getCurrent``windows.Window` |
| apply-css | Adds a page action to the toolbar. Click the button to apply a red border using injected CSS. Click the button again to remove the CSS. | `pageAction.getTitle``pageAction.onClicked``pageAction.setIcon``pageAction.setTitle``pageAction.show``tabs.insertCSS``tabs.onUpdated``tabs.query``tabs.removeCSS``tabs.Tab` |
| beastify | Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. | `extension.getURL``runtime.onMessage``tabs.executeScript``tabs.insertCSS``tabs.query``tabs.removeCSS``tabs.sendMessage``tabs.Tab` |
| bookmark-it | Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page. | `bookmarks.create``bookmarks.onCreated``bookmarks.onRemoved``bookmarks.remove``bookmarks.search``browserAction.onClicked``browserAction.setIcon``browserAction.setTitle``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``windows.onFocusChanged` |
| borderify | Adds a solid red border to all webpages matching mozilla.org. |  |
| chill-out | Show a page action after a period of inactivity. Show cat gifs when the page action is clicked. | `alarms.clearAll``alarms.create``alarms.onAlarm``pageAction.hide``pageAction.onClicked``pageAction.show``tabs.get``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.update` |
| commands | Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+U (Command+Shift+U on a Mac). | `commands.getAll``commands.onCommand``commands.reset``commands.update``tabs.create` |
| content-script-register | Illustrates how an extension can register URL-matching content scripts at runtime. | `contentScripts.register``runtime.onMessage``runtime.sendMessage` |
| context-menu-copy-link-with-types | Add a context menu option to links to copy the link to the clipboard, as plain text and as a link in rich HTML. | `contextMenus.create``contextMenus.onClicked``tabs.executeScript` |
| contextual-identities | List, create, and remove contextual identities. | `contextualIdentities.query``tabs.create``tabs.query``tabs.remove` |
| cookie-bg-picker | Allows the user to customize the background color and tiled pattern on sites they visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized. | `cookies.get``cookies.onChanged``cookies.remove``cookies.set``extension.getURL``runtime.onMessage``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``tabs.sendMessage` |
| devtools-panels | Demonstrates some of the devtools APIs. | `devtools.inspectedWindow``devtools.panels``runtime.getURL``runtime.onMessage``runtime.sendMessage``tabs.executeScript` |
| discogs-search | Demonstrates adding a custom search engine with the chrome\_settings\_overrides key. |  |
| dnr-block-only | Demonstrates how to block network requests without host permissions using the declarativeNetRequest API with the `declarative\_net\_request` manifest key. | `declarativeNetRequest.Rule``declarativeNetRequest.RuleAction``declarativeNetRequest.RuleCondition` |
| dnr-dynamic-with-options | Demonstrates a generic way to request host permissions and register declarativeNetRequest rules to modify network requests, without any install-time permission warnings. The options\_ui page offers a way to request permissions and register DNR rules. | `declarativeNetRequest.Rule``declarativeNetRequest.getDynamicRules``declarativeNetRequest.getSessionRules``declarativeNetRequest.updateDynamicRules``declarativeNetRequest.updateSessionRules``permissions.getAll``permissions.remove``permissions.request` |
| dnr-redirect-url | Demonstrates multiple ways to redirect requests using the declarativeNetRequest API through the `declarative\_net\_request` manifest key. Demonstrates aspects of Manifest Version 3 (MV3): action, host\_permissions, and web\_accessible\_resources, and includes a comparison with Manifest Version 2 (MV2). | `declarativeNetRequest.Redirect``declarativeNetRequest.Rule``declarativeNetRequest.RuleAction``declarativeNetRequest.RuleCondition``declarativeNetRequest.URLTransform``permissions.contains``permissions.remove``permissions.request` |
| dynamic-theme | Dynamic theme example | `alarms.create``alarms.onAlarm``theme.update` |
| emoji-substitution | Replaces words with emojis. |  |
| eslint-example | Demonstrates how to configure an extension with eslint. |  |
| export-helpers | Demonstrates how to use export helpers like cloneInto to share objects with page scripts. | `notifications.create``runtime.onMessage``runtime.sendMessage` |
| favourite-colour | An example options page, letting you store your favourite colour. | `browserAction.onClicked``runtime.openOptionsPage``storage.managed``storage.sync` |
| find-across-tabs | Demonstration of the find API. | `browserAction.onClicked``extension.getBackgroundPage``find.find``find.highlightResults``runtime.getURL``runtime.onMessage``runtime.sendMessage``tabs.create``tabs.query``tabs.Tab` |
| firefox-code-search | Demonstrates how to use the omnibox API. | `omnibox.onInputChanged``omnibox.onInputEntered``omnibox.setDefaultSuggestion``tabs.create``tabs.update` |
| forget-it | Demonstrates how to use the browsingData API. | `browserAction.onClicked``browsingData.remove``notifications.create``storage.local` |
| google-userinfo | Demonstrates how to use the identity API. | `browserAction.onClicked``identity.getRedirectURL``identity.launchWebAuthFlow``notifications.create` |
| history-deleter | History API demo: deletes history items for a given domain | `history.deleteUrl``history.search``pageAction.show``tabs.onUpdated``tabs.query` |
| http-response | Demonstrates how to rewrite HTTP responses using the webRequest.filterResponseData() API. | `webRequest.filterResponseData``webRequest.onBeforeRequest` |
| imagify | Using a sidebar, illustrates the use of file picker and drag and drop. A content script replaces the current page content with the chosen image. | `extension.getURL``runtime.onMessage``tabs.executeScript``tabs.query``tabs.sendMessage` |
| latest-download | Shows the last downloaded item, and lets you open or delete it. | `downloads.erase``downloads.getFileIcon``downloads.open``downloads.removeFile``downloads.search` |
| list-cookies | This extensions list the cookies in the active tab. | `cookies.getAll``tabs.query` |
| menu-accesskey-visible | Shows how to set up a single letter access key for a menu item. | `i18n.getMessage``menus.update``menus.create``menus.onClicked` |
| menu-demo | Demonstrates adding and manipulating menu items using the menus API. | `i18n.getMessage``menus.create``menus.onClicked``menus.remove``menus.update``runtime.lastError``tabs.executeScript` |
| menu-labelled-open | Shows how an extension can listen for the display of a menu and then add, remove, or update its menu items. | `menus.create``menus.onClicked``menus.onShown``menus.refresh``menus.update``tabs.update` |
| menu-remove-element | Shows how to detect the page element at the cursor position and remove that element, or a parent element, from the page. This example includes use of the polyfill, illustrating cross-browser extension development. | `menus.create``menus.onClicked``menus.getTargetElement``pageAction.openPopup``pageAction.show``tabs.executeScript` |
| menu-search | Illustrates how to retrieve a list of search engines and issue a search request, using search engine details added to the context menu for selected text. | `search.search``search.get``menus.create``menus.onClicked` |
| mocha-client-tests | This example shows two methods of testing an extension: running tests from within the extension, and running tests from the command line using Karma. | `runtime.onMessage``runtime.sendMessage` |
| native-messaging | Example of native messaging, including a Python application and an extension which exchanges messages with it. | `browserAction.onClicked``runtime.connectNative` |
| navigation-stats | Demonstration of the webNavigation API, showing basic stats about which pages you've visited. | `storage.local``webNavigation.onCommitted``webNavigation.onCompleted` |
| notify-link-clicks-i18n | Shows a localized notification when the user clicks on links. | `extension.getURL``i18n.getMessage``notifications.create``runtime.onMessage``runtime.sendMessage` |
| open-my-page-button | Adds a browser action icon to the toolbar. When the browser action is clicked, the add-on opens a page that was packaged with it. | `browserAction.onClicked``tabs.create` |
| page-to-extension-messaging | Demonstrates how a web page and a content script can exchange messages. Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo. |  |
| permissions | Demonstrates optional permissions using the permissions API. | `browserAction.onClicked``permissions.getAll``permissions.remove``permissions.request``runtime.getURL``tabs.create` |
| private-browsing-theme | Example dynamic theme: sets a dark theme for private windows. | `theme.reset``theme.update``windows.getAll``windows.onCreated` |
| proxy-blocker | Uses the proxy API to block requests to hosts specified on a list. | `extension.getURL``proxy.onRequest``proxy.onError``storage.local``storage.onChanged` |
| quicknote | Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage. | `storage.local` |
| root-cert-stats | Shows how to get details about a request's TLS connection. | `webRequest.getSecurityInfo` |
| runtime-examples | Demo of various runtime APIs. | `browserAction.onClicked``notifications.create``runtime.getManifest``runtime.onInstalled``runtime.reload` |
| selection-to-clipboard | Demonstrates how to write to the clipboard from a content script |  |
| session-state | Demonstrates how to retrieve extension-defined state from restored tabs. | `menus.create``menus.onClicked``sessions.getTabValue``sessions.setTabValue``tabs.insertCSS``tabs.onCreated``tabs.onUpdated``tabs.query` |
| store-collected-images | Demonstrates how to use the idb-file-storage library to store and manipulate files in an extension. | `browserAction.onClicked``contextMenus.create``contextMenus.onClicked``runtime.onMessage``runtime.sendMessage``tabs.create``windows.create` |
| stored-credentials | Performs basic authentication by supplying stored credentials. | `storage.local``webRequest.onAuthRequired``webRequest.onCompleted``webRequest.onErrorOccurred` |
| tabs-tabs-tabs | Demonstrates tab manipulation: opening, closing, moving, zooming tabs. | `browserAction.setBadgeBackgroundColor``browserAction.setBadgeText``tabs.create``tabs.duplicate``tabs.getZoom``tabs.move``tabs.onCreated``tabs.onMoved``tabs.onRemoved``tabs.query``tabs.reload``tabs.remove``tabs.setZoom``tabs.Tab``tabs.update` |
| theme-integrated-sidebar | A sidebar that integrates with the current theme. | `theme.getCurrent``theme.onUpdated``windows.getCurrent` |
| theme-switcher | An example of how to use the management API for themes. | `management.getAll``management.setEnabled` |
| themes | A collection of themes illustrating:* weta\_fade: a basic theme employing a single image specified in `theme_frame:`.
* weta\_fade\_chrome: the weta\_fade theme implemented with Chrome compatible manifest keys.
* weta\_tiled: a theme using a tiled image.
* weta\_mirror: a theme using multiple images and aligning those images in the header.
* animated: use of an animated PNG.
 |  |
| top-sites | Demonstration of the topSites API. | `topSites.get` |
| user-agent-rewriter | Demonstrates using the webRequest API to rewrite the User-Agent HTTP header. | `extension.getBackgroundPage``webRequest.onBeforeSendHeaders` |
| user-script-register | Illustrates how an extension can register URL-matching user scripts at runtime. | `userScripts.register``runtime.onMessage``runtime.sendMessage` |
| webpack-modules | Demonstrates how to use webpack to package npm modules in an extension. | `runtime.onMessage``runtime.sendMessage` |
| window-manipulator | Demonstrates how to manipulate windows: opening, closing, resizing windows. | `windows.create``windows.getAll``windows.getCurrent``windows.remove``windows.update``windows.Window` |
| open-irc-links | Demonstrates the use of protocol handlers. |  |


Anatomy of an extension - Mozilla

Anatomy of an extension
=======================

확장앱은 배포 및 설치를 위해 패키징 된 파일 모음으로 구성됩니다. 이 아티클은 확장앱에 있을 수 있는 파일들을 빠르게 살펴봅니다.

manifest.json
-------------

manifest.json 파일은 모든 확장앱이 가져야하는 유일한 파일입니다. 이 파일에는 이름, 버전 및 필요한 권한과 같은 메타정보가 들어 있습니다.

또한 확장앱에 포함될 다른 파일들(하단 목록)을 가리킵니다.

* Background pages: (브라우저 창의 수명과 독립적으로) 오랜 시간 실행되는 로직 구현.
* 확장앱의 아이콘 및 기타 버튼들.
* 사이드바, 팝업, 옵션 페이지: UI 컴포넌트를 제공하는 HTML 파일들
* 컨텐츠 스크립트: 웹페이지에 주입할 JavaScript 파일

![](/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension/webextension-anatomy.png)

세부 내용: manifest.json 참조.

manifest에 참조 된 항목 외에도, Extension pages와 해당 페이지의 리소스가 확장앱 번들에 포함될 수 있습니다.

Background scripts
------------------

확장앱은 종종 특정 웹 페이지나 브라우저 창의 수명과 독립적으로 장기간 상태를 유지하거나 작업을 수행해야 합니다. 그때 필요한 것이 백그라운드 스크립트입니다.

백그라운드 스크립트는 확장앱이 로드 되자마자 로드되며 확장앱이 다시 비활성화 또는 제거될 때까지 로드된 상태를 유지합니다. 적절한 권한을 요청했다면 이 스크립트에서 WebExtension APIs를 사용할 수 있습니다.

### 백그라운드 스크립트 정의

"manifest.json"에 `background` 키로 백그라운드 스크립트를 포함할 수 있습니다:

```json
// manifest.json

"background": {
  "scripts": ["background-script.js"]
}
```

여러 개의 백그라운드 스크립트를 지정할 수 있습니다: 그 경우 한 웹페이지에서 여러 스크립트들이 실행되듯이 백그라운드 스크립트들이 동일한 context에서 실행됩니다.

### 백그라운드 스크립트 환경

#### DOM APIs

백그라운드 스크립트는 background pages라는 특별한 페이지의 context에서 실행됩니다. 이것은 백그라운드 스크립트에 모든 표준 DOM API들을 제공하는 전역 `window` 객체를 제공합니다.

background page를 제공할 필요는 없습니다. 백그라운드 스크립트를 추가했다면 빈 background page가 생성됩니다.

그러나 background page를 별도의 HTML 파일로 제공하도록 선택할 수 있습니다.

```json
// manifest.json

"background": {
  "page": "background-page.html"
}
```

#### WebExtension APIs

백그라운드 스크립트는 선언된 권한 (en-US) 내의 모든 WebExtension APIs를 사용할 수 있습니다.

#### Cross-origin access

백그라운드 스크립트는 선언된 host 권한 (en-US) 내의 모든 서버(host)에 XHR 요청을 할 수 있습니다.

#### Web content

백그라운드 스크립트는 웹 페이지에 직접 엑세스하지 못합니다. 그러나 웹페이지에 컨텐츠 스크립트 (en-US)를 삽입할 수 있으며 메시지 전달 API를 통해 컨텐츠 스크립트와 통신할 수 있습니다.

#### Content security policy

백그라운드 스크립트는 `eval()` 사용과 같이 잠재적으로 위험할 수 있는 특정 작업을 제한합니다. 자세한 내용은 컨텐츠 보안 정책 (en-US)을 참조하십시오.

Sidebars, popups, options pages
-------------------------------

확장앱은 HTML를 이용하여 다양한 UI를 포함할 수 있습니다.

* 사이드바 (en-US)는 브라우저 창의 왼쪽, 웹 페이지 옆에 표시되는 창입니다.
* 팝업 (en-US)은 사용자가 툴바 버튼 (en-US) 이나 주소창 버튼를 클릭 할 때 표시되는 다이얼로그입니다
* 옵션 페이지 (en-US)는 브라우저의 애드온 매니저에서 확장앱의 환경 설정에 접근할 때 표시 되는 페이지입니다.

이러한 각 구성 요소에 대해 HTML 파일을 만들고 manifest.json의 특정 속성에 지정합니다. 이 HTML 파일은 일반 웹 페이지와 마찬가지로 CSS 및 JavaScript 파일이 포함될 수 있습니다.

 이 페이지들은 모두 Extension pages (en-US) 유형이며, 일반 웹 페이지와 달리 이 페이지에서 실행되는 javaScript는 권한이 부여된 WebExtension API를 모두 사용할 수 있습니다(백그라운드 스크립트와 동일).
 `runtime.getBackgroundPage()` (en-US)
 심지어 위와 같이 background page에서 사용하는 변수에 직접 접근할 수도 있습니다.

Extension pages
---------------

또한 미리 정의된 UI에 연결되지 않은 HTML 문서를 확장앱에 포함할 수 있습니다. 사이드바, 팝업 또는 옵션 페이지에 제공할 문서와 달리 manifest.json에 이 페이지를 정의하는 항목은 없습니다. 그러나 이 페이지 또한 백그라운드 스크립트와 동일하게 권한이 부여된 WebExtension API에 대한 접근 권한을 가집니다.

일반적으로 `windows.create()` (en-US) 또는 `tabs.create()`를 사용하여 Extension page를 로드할 수 있습니다.

세부 내용 : Extension pages (en-US) 참조.

Content scripts
---------------

컨텐츠 스크립트를 사용하여 웹 페이지에 접근하고 수정하십시오. 컨텐츠 스크립트는 웹 페이지에 로드되고 해당 페이지의 context에서 실행됩니다.

컨텐츠 스크립트는 웹 페이지의 context에서 실행되는, 확장앱용 스크립트입니다. 이는 페이지 내의 `<script>` 요소 등 페이지 자체가 로드하는 스크립트와 다릅니다.

컨텐츠 스크립트는 웹페이지가 로드하는 일반 스크립트처럼 DOM에 접근 및 조작을 할 수 있습니다.

일반 페이지 스크립트와 달리 다음 작업을 수행 할 수 있습니다.

* 크로스 도메인의 XHR 요청
* WebExtension APIs (en-US) 일부 사용
* 백그라운드 스크립트와 메시지를 교환함으로 모든 WebExtension API에 간접적으로 접근

컨텐츠 스크립트는 일반 페이지 스크립트에 직접 접근할 수는 없지만 window.postMessage() API를 사용하여 메시지를 교환할 수 있습니다.

일반적으로 컨텐츠 스크립트는 자바 스크립트를 지칭하지만, 동일한 매커니즘으로 웹 페이지에 CSS를 삽입할 수 있습니다.

세부내용: content scripts (en-US) 참조.

Web accessible resources
------------------------

Web accessible resources는 확장앱에 포함되어 있고 컨텐츠 스크립트 및 페이지 스크립트에 엑세스할 수 있게 하려는 이미지, HTML, CSS 및 JavaScript와 같은 리소스입니다. 이 리소스는 특수한 URI를 사용하여 페이지 스크립트 및 컨텐츠 스크립트에서 참조할 수 있습니다.

예를 들어 컨텐츠 스크립트가 일부 이미지를 웹 페이지에 삽입하려는 경우, 확장앱에 포함시키고 web accessible하게 할 수 있습니다. 그러면 컨텐츠 스크립트에서 src 속성을 통해 이미지를 참조하는 img 태그를 만들고 추가할 수 있습니다.

자세한 내용은 manifest.json의 web\_accessible\_resources (en-US) key의 스펙을 확인하세요.


What are extensions? - Mozilla

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 - Mozilla

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 - Mozilla

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가 있다.


contextMenus - Mozilla

contextMenus
============

브라우저의 메뉴 시스템에 항목을 추가한다.

이 API는 크롬의 "contextMenus" API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, Firefox의 `browser.menus` API는 여기에 몇 가지 특징을 더했다.

Firefox 55 이전에 이 API의 원래 이름은 `contextMenus`였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 `contextMenus`를 사용할 수 있다.

이 API를 사용하려면 '`menus`' 권한 (en-US)이 필요하다. `menus` 대신에 `contextMenus`를 사용해도 된다. `contextMenus`를 사용했으면 API도 `browser.contextMenus`를 써야 한다.

콘텐트 스크립트에서는 `menus.getTargetElement()`만 사용할 수 있다.

메뉴 항목 만들기
---------

메뉴 항목을 만들려면 `contextMenus.create()` (en-US) 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.

항목의 클릭을 처리하려면 `contextMenus.onClicked` (en-US) 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는`contextMenus.OnClickData` (en-US) 객체를 받는다.

콘텍스트 메뉴는 네 종류다. `create()`에 주어지는 `type` 속성으로 지정한다:

* "normal": 그냥 라벨만 표시된다.
* "checkbox": 라벨 옆에 추가로 체크표시가 있어 두가지 상태를 표현하는 메뉴 항목이다. 클릭할 때마다 라벨표시가 토글된다. 리스너는 두가지 속성을 추가로 받게 된다: "checked"는 현재 체크 상태를 가리키고, "wasChecked"는 클릭 이벤트 전의 체크 상태를 가리킨다.
* "radio": 여러 선택지 중의 하나라는 것을 표현하는 메뉴 항목이다. 라벨 옆에 체크표시가 있고, "checked"와 "wasChecked" 속성이 있다는 것은 checkbox와 같다. 다른 점은 radio 항목을 하나 이상 만들어 그룹이 되면, 오직 클릭하는 하나만 선택이 된다는 것이다.
* "separator": 항목을 그룹짓는 구분선이다.

메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:

![](/ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/menus-1.png)

아이콘
---

"icons" manifest 키로 확장이 아이콘을 가졌으면, 콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/menus-2.png)

서버메뉴에 대해서만 `menus.create()` (en-US)에 `icons` 옵션을 전달해서 아이콘을 지정할 수 있다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/menus-3.png)

예제
--

아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.

![](/ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/menus-4.png)이 서버메뉴는 아래 코드로 만들 수 있다:

```js
browser.menus.create(
  {
    id: "remove-me",
    title: browser.i18n.getMessage("menuItemRemoveMe"),
    contexts: ["all"],
  },
  onCreated,
);

browser.menus.create(
  {
    id: "separator-1",
    type: "separator",
    contexts: ["all"],
  },
  onCreated,
);

browser.menus.create(
  {
    id: "greenify",
    type: "radio",
    title: browser.i18n.getMessage("menuItemGreenify"),
    contexts: ["all"],
    checked: true,
    icons: {
      16: "icons/paint-green-16.png",
      32: "icons/paint-green-32.png",
    },
  },
  onCreated,
);

browser.menus.create(
  {
    id: "bluify",
    type: "radio",
    title: browser.i18n.getMessage("menuItemBluify"),
    contexts: ["all"],
    checked: false,
    icons: {
      16: "icons/paint-blue-16.png",
      32: "icons/paint-blue-32.png",
    },
  },
  onCreated,
);

browser.menus.create(
  {
    id: "separator-2",
    type: "separator",
    contexts: ["all"],
  },
  onCreated,
);

var checkedState = true;

browser.menus.create(
  {
    id: "check-uncheck",
    type: "checkbox",
    title: browser.i18n.getMessage("menuItemUncheckMe"),
    contexts: ["all"],
    checked: checkedState,
  },
  onCreated,
);
```

타입
--

`contextMenus.ContextType`

메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser\_action", "editable", "frame", "image", "link", "page", "page\_action", "password", "selection", "tab", "video".

`contextMenus.ItemType` (en-US)

메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".

`contextMenus.OnClickData` (en-US)

메뉴 항목이 클릭됐을 때 보내지는 정보.

속성
--

`contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT` (en-US)

최상위에 추가할 수 있는 ContextType이 "browser\_action"이나 "page\_action"인 메뉴 항목의 최대 수량.

함수
--

`contextMenus.create()` (en-US)

새 콘텍스트 메뉴 항목을 만든다.

`contextMenus.update()` (en-US)

전에 만든 콘텍스트 메뉴 항목을 갱신한다.

`contextMenus.remove()` (en-US)

콘텍스트 메뉴 항목을 지운다.

`contextMenus.removeAll()` (en-US)

확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.

이벤트
---

`contextMenus.onClicked` (en-US)

콘텍스트 메뉴 항목이 클릭하면 발생한다.

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

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

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

* menu-accesskey-visible
* menu-demo
* menu-labelled-open
* menu-remove-element
* menu-search
* session-state

**참고:** **Acknowledgements**This API is based on Chromium's `chrome.contextMenus` API. This documentation is derived from `context_menus.json` in the Chromium code.
```

// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```


contentScripts - Mozilla

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 - Mozilla

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 - Mozilla

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.


pageAction.show() - Mozilla

pageAction.show()
=================

지정한 탭의 페이지 액션을 보인다. 페이지 액션은 해당 탭이 활성일 때 표시된다.

`show()`는 설정된 URL 패턴과 상관없이 동작한다. 따라서 `show_matches`와 일치하지 않아도 `hide_matches`여도 표시된다.

`show()`는 아무런 내용도 없는 탭에는 효과가 없다.

문법
--

```js
browser.pageAction.show(
  tabId, // integer
);
```

### 매개변수

`details`

`object`. An object containing the `tabId` to check.

`tabId`

`integer`. ID of the tab to check.

### 반환 값

A `Promise` that will be fulfilled with `true` if the extension's page action is being shown for the given tab, and `false` otherwise.

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

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

예제
--

콘텍스트 메뉴가 선택되면 페이지 액션을 보이는 예제다. 메뉴를 만들려면 `contextMenus` 권한 (en-US)이 manifest에 필요하다.

```js
browser.contextMenus.create({
  id: "show",
  title: "Show page action",
});

browser.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId == "show") {
    browser.pageAction.show(tab.id);
  }
});
```

### 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.
```

// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```


menus.getTargetElement() - Mozilla

menus.getTargetElement()
========================

주어진 `targetElementId`에 해당하는 요소를 돌려준다.

이 함수는 오직 클릭된 요소가 있는 문서에서만 동작한다. so everywhere but in the background page.

문법
--

```js
let elem = browser.menus.getTargetElement(targetElementId);
```

### 파라메터

`targetElementId`

``menus.onClicked` (en-US)` 핸들러 또는 ``menus.onShown` (en-US)` 이벤트에 전달된 ``menus.OnClickData` (en-US)` 객체의 속성

### 반환값

`targetElementId`로 참조되는 요소를 반환한다. `targetElementId`가 유효하지 않으면 `null`를 반환한다.

예제
--

아래 예제는 인수로 전달된 `info.targetElementId` 값으로 요소를 구하고, 그것을 지운다. 하지만 `getTargetElement`는 요소가 있는 문서에서만 동작하므로 문서가 있는 탭에 스크립트를 주입하는 형태로 처리하고 있다.

```js
browser.menus.create({
  title: "Remove element",
  documentUrlPatterns: ["\*://\*/\*"],
  contexts: [
    "audio",
    "editable",
    "frame",
    "image",
    "link",
    "page",
    "password",
    "video",
  ],
  onclick(info, tab) {
    browser.tabs.executeScript(tab.id, {
      frameId: info.frameId,
      code: `browser.menus.getTargetElement(${info.targetElementId}).remove();`,
    });
  },
});
```

### Example extensions

* menu-remove-element
브라우저 호환성
--------

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

같이 보기
-----

* `menus.create` (en-US)
* `menus.OnClickData` (en-US)


menus.ContextType - Mozilla

menus.ContextType
=================

메뉴 항목이 표시될 수 있는 컨텍스트들입니다.

타입
--

이 타입의 값은 문자열입니다. 지정된 컨텍스트가 적용될 때 항목이 나타납니다. `menus.ContextType`에서 사용 가능한 값은 다음과 같습니다.

all

'all'을 지정하면 'bookmark', 'tab', 'tools\_menu'를 제외한 모든 컨텍스트의 조합과 동일하게 동작합니다.

action

사용자가 Manifest V3 확장의 브라우저 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 브라우저 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 `menus.ACTION_MENU_TOP_LEVEL_LIMIT` (en-US)이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다.

audio

사용자가 audio (en-US) 요소를 컨텍스트 클릭할 때 적용됩니다.

bookmark

사용자가 북마크 툴바나 북마크 메뉴, 북마크 사이드바(`Ctrl`+`B`)나 라이브러리 윈도우(`Ctrl`+`Shift`+`B`)에서 북마크 항목을 컨텍스트 클릭할 때 적용됩니다. 북마크 사이드바와 라이브러리 윈도우에서의 적용은 Firefox 66부터 지원됩니다. 매니페스트에 "bookmarks" API 권한 (en-US)이 요구됩니다.

browser\_action

사용자가 Manifest V2 확장의 브라우저 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 브라우저 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 `menus.ACTION_MENU_TOP_LEVEL_LIMIT` (en-US)이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다.

editable

textarea (en-US)처럼 편집 가능한 요소를 컨텍스트 클릭할 때 적용됩니다.

frame

중첩된 iframe (en-US)을 컨텍스트 클릭할 때 적용됩니다.

image

사용자가 이미지를 컨텍스트 클릭할 때 적용됩니다.

link

사용자가 링크를 컨텍스트 클릭할 때 적용됩니다.

page

사용자가 페이지를 컨텍스트 클릭했지만 다른 페이지 컨텍스트가 적용되지 않는 경우에 적용됩니다(예: 클릭이 이미지나 중첩된 iframe, 혹은 링크에서 발생하지 않은 경우).

page\_action

사용자가 페이지 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 페이지 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 `menus.ACTION_MENU_TOP_LEVEL_LIMIT` (en-US)이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다.

password

사용자가 password 입력 요소 (en-US)를 컨텍스트 클릭할 때 적용됩니다.

selection

페이지 일부가 선택되어 있을 때 적용됩니다.

tab

사용자가 탭을 컨텍스트 클릭할 때 적용됩니다. 구체적으로 페이지 자체가 아니라, 사용자가 한 브라우저 탭에서 다른 탭으로 전환할 수 있도록 하는 탭 스트립 또는 기타 사용자 인터페이스 요소를 의미합니다.

Firefox 63부터는 탭의 메뉴 항목을 클릭하면 현재 활성 탭이 아닌 경우에도 클릭한 탭에 대해 activeTab (en-US) 권한이 부여됩니다.

tools\_menu

항목이 브라우저의 도구 메뉴에 추가됩니다. 이 기능은 `menus` 네임스페이스를 통해 `ContextType`에 접근하는 경우에만 사용할 수 있다는 것을 참고하십시오. `contextMenus` 네임스페이스를 통해 접근하는 경우에는 사용할 수 없습니다.

video

video 요소에 컨텍스트 클릭을 할 때 적용됩니다.

참고: "launcher"는 지원되지 않습니다.

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

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

**참고:** 이 API는 Chromium의 `chrome.contextMenus` API를 기반으로 합니다. 이 문서는 Chromium 코드의 `context_menus.json`에서 파생되었습니다.


tabs.create() - Mozilla

tabs.create()
=============

새 탭을 만듭니다.

`tabs.create()`는 `Promise`를 반환하는 비동기 함수입니다.

구문
--

```js
let creating = browser.tabs.create(
  createProperties   // object
)
```

### 매개변수

`createProperties`

`object`. 새 탭에 줄 속성들입니다. 이 속성들에 대해 더 알아보려면 `tabs.Tab` (en-US) 문서를 확인하십시오.

`active`Optional

`boolean`. 탭을 창의 활성 탭으로 변경할지에 대한 여부입니다. `false`인 경우에는 효과가 없습니다. 창에 포커스가 맞춰져 있는지 여부에는 영향을 주지 않습니다(`windows.update` (en-US)를 참조하십시오). 기본 값은 `true`입니다.

`cookieStoreId` Optional

`string`. 쿠키 저장소 ID가 `cookieStoreId`인 탭을 생성하기 위해 사용합니다. 이 옵션은 확장이 `"cookies"` 권한 (en-US)을 가져야만 사용할 수 있습니다. 상황별 신원을 사용해 작업하기 (en-US)에서 더 많은 정보를 확인하세요.

`discarded` Optional

`boolean`. 탭이 생성된 뒤 메모리에 로드된 콘텐츠 없이 탭 표시줄에 표시되는 상태인지에 대한 여부입니다. 탭이 활성화되면 탭의 콘텐츠가 로드됩니다.

`index`Optional

`integer`. 창에서 탭이 차지할 위치입니다. 제공되는 값은 0부터 창의 탭 개수 사이로 고정됩니다.

`muted` Optional

`boolean`. 탭의 음소거 여부입니다. 기본 값은 `false`입니다.

`openerTabId`Optional

`integer`. 이 탭을 연 탭의 ID입니다. 이 값이 지정된 경우, 새로운 탭을 연 탭은 반드시 새로 생성한 탭과 같은 창에 있어야 합니다.

`openInReaderMode`Optional

`boolean`. `true`일 경우, 이 탭을 읽기 모드 (en-US)로 엽니다. 기본 값은 `false`입니다.

`pinned`Optional

`boolean`. 탭의 고정 여부입니다. 기본 값은 `false`입니다.

`selected`Optional

`boolean`. 창에서 선택된 탭이 되는지에 대한 여부입니다. 기본 값은 `true`입니다.

**경고:** 이 속성은 폐기되었으며, Firefox에서는 지원되지 않습니다. 대신 `active`를 사용하십시오.

`title` Optional

`string`. 탭의 제목입니다. `discarded` 속성이 `true`로 생성된 탭에서만 사용할 수 있습니다.

`url` Optional

`string`. 탭이 초기에 이동할 URL입니다. 기본 값은 새 탭 페이지입니다.

정규화된 URL에는 반드시 스킴이 포함되어야 합니다. 예를 들어, 'www.google.com' 이 아닌 'http://www.google.com' 을 사용해야 합니다.

보안상의 이유로 Firefox에서는 특수한 권한을 가진 URL은 사용할 수 없습니다. 따라서 다음과 같은 URL을 전달하면 실패하게 됩니다.

* chrome: URLs
* javascript: URLs
* data: URLs
* file: URLs (예: 파일시스템의 파일들. 단, 확장 안에 패키지된 파일을 사용하려면 아래를 참조하십시오.)
* 특수한 권한을 가지는 about: URLs (예: `about:config`, `about:addons`, `about:debugging`). 권한이 없는 URL(예: `about:blank`)은 허용됩니다.
* URL 값이 주어지지 않으면 새 탭 페이지 (`about:newtab`)가 열립니다.

확장 프로그램과 함께 패키지된 페이지를 로드하려면, 확장 프로그램의 manifest.json 파일에서부터 시작하는 절대 URL을 지정하십시오. 예를 들어 '/path/to/my-page.html' 앞의 '/'를 생략하면, URL이 상대 URL로 취급되어 브라우저마다 다른 절대 URL을 생성할 수 있습니다.

`windowId`Optional

`integer`. 새 탭을 생성할 창입니다. 기본 값은 현재 창입니다.

### 반환 값

생성된 탭에 대한 세부 정보가 포함된 `tabs.Tab` (en-US) 객체로 이행되는 `Promise`입니다. 탭을 만들 수 없는 경우(예: `url`에 권한이 있는 스킴을 사용한 경우) 오류 메시지와 함께 프로미스가 거부됩니다.

`browser.tabs.create()`가 반환한 프로미스는 탭이 생성되는 즉시 리졸브됩니다. 탭은 아직 로드 중일 수 있습니다. 탭 로딩이 완료되었는지 확인하려면, `tabs.create`를 호출하기 전에 `tabs.onUpdated` (en-US) 또는 `webNavigation.onCompleted` (en-US) 이벤트를 수신하십시오.

예제
--

새 탭에서 "https://example.org" 열기.

```js
function onCreated(tab) {
  console.log(`새 탭 생성: ${tab.id}`);
}

function onError(error) {
  console.log(`오류: ${error}`);
}

browser.browserAction.onClicked.addListener(() => {
  let creating = browser.tabs.create({
    url: "https://example.org",
  });
  creating.then(onCreated, onError);
});
```

### Example extensions

* commands
* contextual-identities
* find-across-tabs
* firefox-code-search
* open-my-page-button
* permissions
* store-collected-images
* tabs-tabs-tabs
브라우저 호환성
--------

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

**참고:** 이 API는 Chromium의 `chrome.tabs` API를 기반으로 합니다. 이 문서는 Chromium 코드의 `tabs.json`에서 파생되었습니다.


storage.local - Mozilla

storage.local
=============

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

브라우저는 local 저장소에 저장할 수 있는 데이터의 양을 제한한다:

* "unlimitedStorage" 권한이 없으면 크롬은 데이터의 양을 5M로 제한한다.
* Firefox는 버전 56부터 "unlimitedStorage" 권한을 요청할 수 있다. 아직은 저장 용량을 제한하지는 않지만, 앞으로 그렇게 할 것이므로 큰 용량의 저장할 의도라면 지금 "unlimitedStorage" 권한을 요청하는 것이 좋다.

확장이 제거되면, 그것과 연결된 local 저장소는 지워진다.

Firefox에서는 확장을 제거해도 local 저장소를 브라우저가 지우지 않도록 막을 수 있다. "about:config"에서 "keepUuidOnUninstall"와 "keepStorageOnUninstall" 두 브라우저 기본 설정을 `true`로 고치면 된다. 이 특징은 개발자가 확장을 테스트하는데 도움을 주려는 것이다. 확장 스스로 이 값들을 바꿀 수는 없다.

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

메소드
---

`local` 객체는 `storage.StorageArea` (en-US) 자료형에 정의된 메소드로 구현되었다:

`storage.StorageArea.get()`

저장소 영역에서 하나 이상의 항목을 가져온다.

`storage.StorageArea.getBytesInUse()` (en-US)

저장소의 사용된 크기를 바이트단위로 얻는다.

`storage.StorageArea.set()`

저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다. 값을 설정하면 `storage.onChanged` (en-US) 이벤트가 발생한다.

`storage.StorageArea.remove()` (en-US)

저장소에서 하나 이상의 값을 지운다.

`storage.StorageArea.clear()` (en-US)

저장소의 모든 항목을 지워서 비운다.

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

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

### Example extensions

* annotate-page
* 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.


storage.sync - Mozilla

storage.sync
============

`sync` 저장 공간을 의미합니다. `sync` 저장 공간에 있는 데이터는 브라우저 사이에서 동기화되며 서로 다른 기기 간에 사용자가 브라우저에 로그인 한 경우 언제든지 접근 가능합니다.

Firefox에서 `sync.storage` 는 고유한 부가기능 ID에 의존성을 갖고 동작합니다. `sync.storage`, 를 사용하신다면 `어플리케이션` (en-US) manifest.json 파일에 있는 키를 통해 여러분의 부가기능에 고유한 ID를 부여해야 합니다.

이 API는 주로 여러분의 부가기능에 사용자 설정 정보를 저장하고 서로 다른 프로필 간에 설정을 동기화 할 수 있도록 사용됩니다. 이 API는 100KB까지 저장할 수 있습니다. 이보다 더 큰 데이터를 저장하려고 하는 경우, API 요청은 특정한 에러 메시지를 반환할 것입니다. 이 API는 아쉽게도 현재까지 특정한 성능을 보장하진 않습니다.

메소드
---

`sync` 객체는 `storage.StorageArea` (en-US) 타입에 정의 된 메소드를 제공합니다:

`storage.StorageArea.get()`

저장소 영역에서 하나 이상의 항목을 가져온다.

`storage.StorageArea.getBytesInUse()` (en-US)

저장소의 사용된 크기를 바이트단위로 얻는다.

`storage.StorageArea.set()`

저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다.

`storage.StorageArea.remove()` (en-US)

저장소에서 하나 이상의 값을 지운다.

`storage.StorageArea.clear()` (en-US)

저장소의 모든 항목을 지워서 비운다.

Browser 호환성
-----------

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

### Example extensions

* favourite-colour

**참고:** **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.


StorageArea.get() - Mozilla

StorageArea.get()
=================

저장소에서 하나 이상의 항목을 가져온다.

비동기 함수로 `Promise`를 돌려준다.

문법
--

```js
    let gettingItem = browser.storage.<storageType>.get(
      keys    // null, string, object or array of strings
    )
```

`<storageType>`는 읽기 가능한 저장소 중의 하나다 — `sync`, `local`, 또는 `managed` (en-US).

### 매개변수

`keys`

저장소에서 가져올 항목을 지정하는 키 (문자열) 또는 키들 (문자열의 배열 또는 기본값이 주어진 객체). 빈 문자열, 객체, 또는 배열이 주어지면 빈 객체가 반환된다. null이나 undefined가 주어지면 전체 항목이 반환된다.

### 반환값

반환된 `Promise`는 저장소에서 찾은 모든 항목을 담은 객체를 인수로 완료를 수행한다. 실패하면 에러 문장으로 거부가 수행된다. managed 저장소가 설정되어 있지 않으면 `undefined`가 반환된다.

**경고:** When used within a content script in Firefox versions prior to 52, the Promise returned by `browser.storage.local.get()` is fulfilled with an Array containing one Object. The Object in the Array contains the `keys` found in the storage area, as described above. The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as `chrome.storage.local.get()`, it correctly passes an Object to the callback function.

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

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

예제
--

두 항목을 담고 있는 저장소를 가정한다:

```js
// storage contains two items,
// "kitten" and "monster"
browser.storage.local.set({
  kitten: { name: "Mog", eats: "mice" },
  monster: { name: "Kraken", eats: "people" },
});
```

promise에 대한 성공과 실패 핸들러를 정의한다:

```js
function onGot(item) {
  console.log(item);
}

function onError(error) {
  console.log(`Error: ${error}`);
}
```

`keys` 인수없이 전체를 구한다:

```js
let gettingItem = browser.storage.local.get();
gettingItem.then(onGot, onError);

// -> Object { kitten: Object, monster: Object }
```

빈 인수는 빈 객체를 반환한다:

```js
// with an empty array, retrieve nothing
let gettingItem = browser.storage.local.get([]);
gettingItem.then(onGot, onError);

// -> Object { }
```

이름을 인수로 하면 일치하는 항목을 담은 객체를 반환한다:

```js
let gettingItem = browser.storage.local.get("kitten");
gettingItem.then(onGot, onError);

// -> Object { kitten: Object }
```

이름들을 인수로 하면 전체 일치 항목을 모두 담은 객체를 반환한다:

```js
let gettingItem = browser.storage.local.get([
  "kitten",
  "monster",
  "grapefruit",
]);
gettingItem.then(onGot, onError);

// -> Object { kitten: Object, monster: Object }
```

객체를 인수로 하면 주어진 객체의 키들을 이름으로 항목을 찾아서 돌려준다:

```js
let gettingItem = browser.storage.local.get({
  kitten: "no kitten",
  monster: "no monster",
  grapefruit: {
    name: "Grape Fruit",
    eats: "Water",
  },
});

// -> Object { kitten: Object, monster: Object, grapefruit: Object }
```

### 크롬 예제

크롬에서는 `Promise`가 아니라 콜백 형태로 해야 한다.

```js
chrome.storage.local.get("kitten", function (items) {
  console.log(items.kitten); // -> {name:"Mog", eats:"mice"}
});
```

또는 화살표 함수로 할 수 있다.

```js
chrome.storage.local.get("kitten", (items) => {
  console.log(items.kitten); // -> {name:"Mog", eats:"mice"}
});
```

**참고:** **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.


StorageArea.set() - Mozilla

StorageArea.set()
=================

저장소 영역에 하나 이상의 항목을 저장하거나, 있는 항목을 고친다.

이 API로 값을 저장하거나 고치면, `storage.onChanged` (en-US) 이벤트가 발생한다.

비동기 함수로 `Promise`를 돌려준다.

문법
--

```js
let settingItem = browser.storage.<storageType>.set(
  keys             // object
)
```

`<storageType>`은 쓰기 가능한 저장소 중의 하나다 — `storage.sync` 또는 `storage.local`.

### 매개변수

`keys`

저장소에 저장할 하나 이상의 키/값 쌍을 가진 객체다. 이미 있는 항목이라면 그 값은 고쳐진다.값은 기초 자료형 (숫자, 논리값, 그리고 문자열 같은) 또는 `배열`이다.`Function`, `Date`, `RegExp`, `Set`, `Map`, `ArrayBuffer` 기타등등 다른 자료형의 저장은 일반적으로 안된다. 지원되지 않는 이런 자료형들은 빈 객체로 저장되거나 에러를 발생시킨다. 정확한 것은 브라우저에 달렸다.

### 반환값

반환된 `Promise`는 동작이 성공하면 아무런 인수없이 완료를 수행하고, 실패하면 에러 문장과 함께 거부를 수행한다.

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

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

예제
--

```js
function setItem() {
  console.log("OK");
}

function gotKitten(item) {
  console.log(`${item.kitten.name} has ${item.kitten.eyeCount} eyes`);
}

function gotMonster(item) {
  console.log(`${item.monster.name} has ${item.monster.eyeCount} eyes`);
}

function onError(error) {
  console.log(error);
}

// define 2 objects
var monster = {
  name: "Kraken",
  tentacles: true,
  eyeCount: 10,
};

var kitten = {
  name: "Moggy",
  tentacles: false,
  eyeCount: 2,
};

// store the objects
browser.storage.local.set({ kitten, monster }).then(setItem, onError);

browser.storage.local.get("kitten").then(gotKitten, onError);
browser.storage.local.get("monster").then(gotMonster, onError);
```

**참고:** **Acknowledgements**This API is based on Chromium's `chrome.storage` API. This documentation is derived from `storage.json` in the Chromium code.


오래 걸리는 작업 (Long task) - MDN Web Docs 용어 사전: 웹 용어 정의

오래 걸리는 작업 (Long task)
=====================

**오래 걸리는 작업 (Long task)** 은 완료하는 데 50ms 이상이 걸리는 작업입니다.

메인 UI 스레드가 50ms 이상 사용되는 중단 없는 기간입니다. 흔한 예로는 오래 실행되는 이벤트 핸들러, 비용이 많이 드는 리플로우 및 기타 재렌더링, 50ms를 초과하는 이벤트 루프의 여러 반복 사이에서 브라우저가 수행하는 작업 등이 있습니다.

같이 보기
-----

* Long task API (en-US)


URI - MDN Web Docs 용어 사전: 웹 용어 정의

URI
===

**URI**(Uniform Resource Identifier)는 하나의 리소스를 가리키는 문자열입니다.

가장 흔한 URI는 URL로, 웹 상에서의 위치로 리소스를 식별합니다. 반면, URN은 주어진 이름공간 안의 이름으로 리소스를 식별합니다. 도서의 ISBN을 예시로 사용할 수 있습니다.

같이 보기
-----

* 위키백과의 URI
* URL에 관한 RFC 3986


Fork - MDN Web Docs 용어 사전: 웹 용어 정의

Fork
====

포크는 프로젝트에 누군가의 자신의 수정 사항을 추가하기 위한 어떤 시점에 있는 기존 소프트웨어 프로젝트의 사본입니다.

기본적으로, 만약 원본 소프트웨어의 라이센스가 허가한다면, 당신은 코드를 복사하여 자신의 추가사항을 가지고 그 코드를 개발할 수 있는데, 이것이 "포크"가 될 것이다.

포크는 종종 무료 오픈소스 소프트웨어 개발에서 볼 수 있다. 이는 Git(또는 GitHub 플랫폼)을 사용한 기여 모델 덕분에 더 많이 사용되는 용어다.

같이 보기
-----

* 위키피디아의 Fork
* GitHub repo를 포크하는 방법 (Git 컨텍스트로 포크)
* 다양한 "잘 알려진" 포크들
    + Linux distributions
    + Node.js and io.js (which have been merged together back)
    + LibreOffice, a fork of OpenOffice


NNTP - MDN Web Docs 용어 사전: 웹 용어 정의

NNTP
====

**네트워크 뉴스 전송 프로토콜 (Network News Transfer Protocol, NNTP)** 은 클라이언트에서 서버로 또는 서버 간에 유즈넷 메시지를 전송하는 데 사용되는 프로토콜입니다.

같이 보기
-----

* 위키백과의 NNTP
* IETF에서: NNTP에 관한 RFC 3977 (2006)


다목적 인터넷 메일 확장 (MIME) - MDN Web Docs 용어 사전: 웹 용어 정의

다목적 인터넷 메일 확장 (MIME)
====================

 \*\*다목적 인터넷 메일 확장(Multipurpose Internet Mail Extensions, MIME)\*\*은 오디오, 비디오, 이미지 등 ASCII 텍스트 이외의 다른 형식으로 문서를 설명하기 위한 표준입니다.
 처음에는 이메일 첨부에 사용되었지만 어느 곳에서나 문서 타입을 정의하는 사실상의 표준이 되었습니다.

같이 보기
-----

* MIME-Type
* 위키백과의 MIME


WebExtensions - MDN Web Docs 용어 사전: 웹 용어 정의

WebExtensions
=============

WebExtensions은 Firefox에서 브라우저 Extension을 개발하기위한 크로스 브라우저 시스템입니다. 이 시스템은 Mozilla Firefox, Google Chrome, Opera Browser 및 Microsoft Edge, Apple Safari와 같은 다양한 브라우저에서 지원되는 API를 제공합니다.

같이 보기
-----

* MDN의 브라우저 확장


클릭재킹 (Clickjacking) - MDN Web Docs 용어 사전: 웹 용어 정의

클릭재킹 (Clickjacking)
===================

클릭재킹(Clickjacking)은 웹사이트 사용자를 속여 자신도 모르게 악성 링크를 클릭하도록 하는 인터페이스 기반 공격입니다. 클릭재킹을 통해, 공격자는 악성 링크를 웹사이트의 버튼이나 합법적인 페이지에 삽입합니다. 감염된 사이트에서 사용자가 합법적인 링크를 클릭할 때마다, 공격자는 해당 사용자의 기밀 정보를 얻게 되고, 궁극적으로 인터넷에서 사용자의 개인 정보를 손상시킵니다.

콘텐츠 보안 정책(frame-ancestors) (en-US) 및 Set-Cookie 속성 (en-US)를 구현하면 클릭재킹을 방지할 수 있습니다.

같이 보기
-----

* 웹 보안: 클릭재킹 방지
* 위키백과의 클릭재킹
* OWASP의 클릭재킹


JPEG - MDN Web Docs 용어 사전: 웹 용어 정의

JPEG
====

**JPEG**(Joint Photographic Experts Group)는 디지털 이미지에 많이 사용하는 손실 압축법입니다.

JPEG 압축은 크로마 서브샘플링(chroma subsampling), 이산 코사인 변환 및 양자화(discrete cosine transformation/quantization), 그리고 런 렝스(run-length) 델타 & 허프만 인코딩 세 가지의 압축 기술을 순차적으로 적용해서 수행합니다. 크로마 서브샘플링은, 사람의 시각이 색상보단 밝기에 민감하다는 점을 활용해서 색상 정보를 밝기 정보보다 낮은 해상도로 줄입니다. 이산 코사인 변환은 유한한 수의 데이터 좌표로 이루어진 시퀀스를 서로 다른 주파수로 진동하는 코사인 함수의 합으로써 표현합니다.

같이 보기
-----

* 위키피디아의 JPEG


단일 페이지 애플리케이션 (Single-page application, SPA) - MDN Web Docs 용어 사전: 웹 용어 정의

단일 페이지 애플리케이션 (Single-page application, SPA)
============================================

단일 페이지 애플리케이션 (Single-page application, SPA)은 단일 웹 문서만 로드한 다음 다른 콘텐츠가 표시될 때 `XMLHttpRequest` 및 Fetch와 같은 JavaScript API를 통해 해당 단일 문서의 본문 콘텐츠를 업데이트하는 웹 앱 구현체입니다.

따라서, 사용자는 서버에서 완전히 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있으므로, 성능이 향상되고 보다 동적인 경험을 얻을 수 있지만, SEO와 같은 일부 절충이 되는 단점이 있으며, 상태를 유지하고 탐색을 구현 및 의미 있는 성능 모니터링을 하는 데 더 많은 노력이 필요합니다.

같이 보기
-----

* 위키백과의 단일 페이지 애플리케이션
* 클라이언트 사이드 JavaScript 프레임워크의 이해
* 용어 사전
    + API
    + AJAX
    + JavaScript
* 인기있는 SPA 프레임워크
    + React
    + Angular
    + Vue.JS


최초 입력 지연 (First input delay, FID) - MDN Web Docs 용어 사전: 웹 용어 정의

최초 입력 지연 (First input delay, FID)
=================================

**최초 입력 지연 (First input delay, FID)** 은 사용자가 사이트와 처음 상호작용할 때(예, 링크를 클릭 또는 버튼을 탭하거나 사용자 정의 JavaScript 기반 컨트롤 UI를 사용할 때)부터 실제로 해당 상호작용에 응답할 수 있는 시간까지 측정합니다.

웹 페이지에서 첫 번째 사용자와의 상호작용과 해당 상호 작용에 대한 브라우저의 응답 사이의 시간(밀리초)입니다. 스크롤 및 확대/축소는 이 측정 부분에 포함되지 않습니다.

콘텐츠가 페이지에 그려지는 시점과 모든 기능이 사람과의 상호작용에 반응하는 시점 사이의 시간은 메인 스레드에서 다운로드, 구문 분석 및 실행해야 하는 JavaScript의 크기와 복잡성 및 장치 속도에 따라 달라지는 경우가 많거나 부족합니다(저사양 모바일 장치를 생각해보세요). 지연 시간이 길어질수록, 사용자 경험은 더욱 안 좋아집니다. 사이트 초기화 시간을 줄이고 시간이 오래 걸리는 작업 (en-US)을 제거하면 최초 입력 지연을 제거하는 데 도움이 될 수 있습니다.

같이 보기
-----

* requestIdleCallback
* 지연 로딩


Microsoft Internet Explorer - MDN Web Docs 용어 사전: 웹 용어 정의

Microsoft Internet Explorer
===========================

Internet Explorer (또는 IE)는 Microsoft에서 레거시 엔터프라이즈 사용을 위해 유지 관리하는 무료 그래픽 브라우저입니다. Microsoft Edge는 현재 기본 Windows 브라우저입니다.

Microsoft는 1995년 "Microsoft Plus!"라는 패키지의 일부로 IE를 Windows와 함께 번들로 제공했습니다. 2002년 무렵, Internet Explorer는 전 세계에서 가장 많이 사용되는 브라우저가 되었지만 Chrome, Firefox, Edge 및 Safari에 의해 기반을 잃었습니다.

IE는 많은 릴리즈를 거쳤으며 현재 데스크탑, 모바일 및 Xbox Console 버전을 사용할 수 있는 버전 11.0.12을 출시하였습니다. 마이크로소프트는 2003년과 2001년에 각각 이전에 Mac과 UNIX에서 사용되었던 버전을 중단하였습니다. 최종 Windows 릴리스는 2020년 11월 10일 Windows 11.0.220이었습니다.

Microsoft는 2022년 6월 15일에 IE에 대한 지원을 종료했습니다.

같이 보기
-----

* 위키피디아의 Internet Explorer
* 위키피디아의 History of Internet Explorer
* 위키피디아의 Internet Explorer versions on Wikipedia
* Internet Explorer EOL countdown


동기(Synchronous) - MDN Web Docs 용어 사전: 웹 용어 정의

동기(Synchronous)
===============

**동기**란 각 참여자가 즉시(또는 가능한 한 즉시) 메시지를 수신(필요시 처리 및 회신)하는 실시간 통신을 말합니다.

사람으로 예를 들면 전화가 있습니다. 전화 통화 중에는 상대방에게 즉시 응답하는 경우가 많습니다.

많은 프로그래밍 명령어도 동기식입니다. 예를 들어, 계산을 입력할 때 결과를 프로그래밍하지 않는 한 환경에서 즉시 결과를 반환합니다.

같이 보기
-----

* 비동기(Asynchronous)
* XMLHttpRequest() API 를 활용한 동기, 비동기 요청 (en-US)


지역 변수 (Local variable) - MDN Web Docs 용어 사전: 웹 용어 정의

지역 변수 (Local variable)
======================

이름이 로컬 범위 내에서만 해당 값에 바인딩되는 변수입니다.

예제
--

```js
let global = 5; // 전역 변수

function fun() {
  let local = 10; // 지역 변수
}
```

같이 보기
-----

* 위키백과의 지역 변수


지역 범위 (Local scope) - MDN Web Docs 용어 사전: 웹 용어 정의

지역 범위 (Local scope)
===================

지역 범위는 변수를 로컬로 만드는 변수의 특성입니다. 즉, 변수 이름은 전역 범위가 아닌 범위 안에서 해당 값에만 바인딩됩니다.

같이 보기
-----

* 위키백과의 스코프


포트 (Port) - MDN Web Docs 용어 사전: 웹 용어 정의

포트 (Port)
=========

IP 주소를 사용하여 네트워크에 연결된 컴퓨터의 경우, **포트(port)** 는 통신의 종점입니다. 포트는 숫자로 지정되고, 1024 미만의 각 포트는 기본적으로 특정 프로토콜과 연결됩니다.

 예를 들어, HTTP 프로토콜의 기본 포트는 80이고 HTTPS 프로토콜의 기본 포트는 443이므로, HTTP 서버는 해당 포트에서 요청을 기다립니다. 각 인터넷 프로토콜은 기본 포트인
 각 인터넷 프로토콜은 기본 포트인 SMTP (25), POP (110), IMAP (143), IRC (194) 등과 연결되어 있습니다.

같이 보기
-----

* 위키백과의 Port


보고 지시어 (Reporting directive) - MDN Web Docs 용어 사전: 웹 용어 정의

보고 지시어 (Reporting directive)
============================

**CSP 보고 지시어(reporting directives)** 는 `Content-Security-Policy` (en-US) 헤더에 사용되며 CSP 위반 보고 프로세스를 제어합니다.

전체 목록은 보고 지시어(Reporting directives) (en-US)를 참조합니다.

같이 보기
-----

* 용어 사전
    + CSP
    + Fetch directive
    + Document directive
    + Navigation directive
* 참고서
    + https://www.w3.org/TR/CSP/#directives-reporting
    + `upgrade-insecure-requests` (en-US)
    + `block-all-mixed-content` (en-US)
    + `Content-Security-Policy` (en-US)


Computer Programming - MDN Web Docs 용어 사전: 웹 용어 정의

Computer Programming
====================

컴퓨터 프로그래밍은 명령어 모음집을 작성하고 구성하는 과정입니다. 이것들은 컴퓨터/소프트웨어 프로그램에게 컴퓨터가 이해하는 언어로 무엇을 해야 하는지 알려줍니다. 이러한 명령어의 종류로 C++, Java, JavaScript, HTML, Python, Ruby, Rust와 같은 다양한 언어의 형태로 나온다.

적절한 언어를 사용하면, 모든 종류의 소프트웨어를 프로그래밍/생성할 수 있습니다. 예를 들면, 복잡한 계산을 하여 과학자들을 돕는 프로그램, 엄청난 양의 데이터를 저장하는 데이터베이스, 음악을 다운받을 수 있는 웹 사이트, 애니메이션 영화를 만들 수 있는 애니메이션 소프트웨어가 있습니다.

같이 보기
-----

* Wikipedia의 컴퓨터 프로그래밍
* 프로그래밍 언어의 종류: 위키피디아


유닉스 시간 (Unix time) - MDN Web Docs 용어 사전: 웹 용어 정의

유닉스 시간 (Unix time)
==================

유닉스 시간(Unix time)은 타임스탬프를 표현하는 방법으로, 일반적으로 1970년 1월 1일 자정(UTC)인 유닉스의 시간 표기(Unix epoch)가 시작된 이후의 초 수로 정의됩니다. 윤초(Leap seconds)는 무시됩니다.

웹 플랫폼에서, 유닉스 시간(Unix time)이 타임스탬프에 사용되며, 유닉스의 시간 표기(Unix epoch)가 시작된 이후의 밀리초 단위로 표시됩니다.

같이 보기
-----

* 위키백과의 Unix time
* 위키백과의 윤초(Leap second)