번역 작업 진행중입니다.

확장앱은 설치와 배포를 위해 묶어진 파일들로 구성된다. 이번 아티클에서 우리는 확장앱에 있어야하는 파일들을 빠르게 훑어볼것이다.

manifest.json

manifest.json 파일은 모든 확장앱에 있어야만하는 파일이다. 이 파일은 이름이나 버전, 퍼미션등의 기본적인 메타정보를 가지고 있다.

또 manifest.json 파일은 확장앱에 포함될 다른 타입 파일들의 위치를 포함한다:

모든 세부적인 내용은 manifest.json 참조 페이지를 확인한다.

manifest에 참조된것 외에, 확장앱은 추가적으로 지원하는 파일들과 함께 Extension pages를 포함할 수 있다.

Background scripts

확장앱은 자주 특정 웹 페이지나 브라우저의 생명주기랑 상관없는 장기간 상태를 관리하거나 장기간의 작업을 수행해야하는데 필요한 것이 background scripts 이다.

Background scripts는 확장앱이 시작될때부터 비활성화 또는 제거될때까지 로드된다. 이 스크립트에 당신이 요청해놓은 권한의 WebExtension APIs 를 사용할 수 있다.

background scripts 정의

당신은 "manifest.json"에 아래와 같이 background script를 포함할 수 있다:

// manifest.json

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

당신은 여러개의 background script를 지정할 수 있다: 그렇게 한다면, 한 웹페이지에 여러 스크립트들이 실행되듯이 스크립트들은 동일한 context에서 실행된다.

Background script environment

DOM APIs

Background scripts는 background pages라고 불리는 특별한 페이지의 context에서 실행된다. Background scripts에는 모든 기본 DOM APIs를 제공하는 window 객체가 주어진다.

당신은 background page를 제공할 필요는 없다. 만약 당신이 background script를 추가했다면, 빈 background page가 생성된다.

하지만 당신은 background page와 다른 background HTML을 제공하는 것이 가능하다.

// manifest.json

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

WebExtension APIs

Background scripts는 필요로 하는 permissions을 가지고 있다면, WebExtension APIs를 사용할 수 있다

Cross-origin access

Background scripts는 host permissions를 포함하는 어떠한 서버(host)로도 XHR 요청을 할 수 있다.

Web content

Background scripts는 직접적으로 웹페이지에 접근하지 않는다. 하지만, 웹페이지에 content scripts 를 삽입할 수 있고 메시지 전달 API를 통해 content script와 통신할 수 있다.

Content security policy

Background scripts는 콘텐츠 보안 정책을 통해 eval()의 사용같은 잠재적으로 위험한 특정 작업에서 제한된다. 세부적인 내용은 컨텐츠 보안 정책을 확인하면 된다.

당신의 확장앱은 HTML 문서로 정의된 다양한 UI 컴포넌트를 가질수 있다.

  • sidebar브라우저 창의 왼쪽, 웹 페이지 옆에 표시되는 컴포넌트이다.
  • popuptoolbar button 이나 address bar button를 클릭할 때 표시되는 다이얼로그이다.
  • options page는 브라우저의 애드온 매니저에서 확장앱 설정에 접근하였을때 표시 되는 페이지이다.

이들 각 구성요소는 HTML파일을 생성하여 manifest.json 파일에 지정해주면 된다
이 HTML파일은 css와 javascript파일을 포함하는 일반적인 웹페이지이다.

이 모든 것은 Extension pages 유형이며 일반 웹 페이지와 달리 UI 컴포넌트의 javaScript는 background script와 동일한 권한있는 WebExtension API를 모두 사용할 수 있다.
runtime.getBackgroundPage()
심지어 위와 같이 background page에서 사용하는 변수에 직접 접근 할 수도 있다

Extension pages

또한 미리 정의된 UI 컴포넌트에 연결되지 않은 HTML 문서를 확장앱에 포함 할 수 있다. sidebars, popups 또는 options pages에 제공 할 문서와 달리 manifest.json에는 항목이 없다. 그러나 background script와 동일한 권한이 부여 된 WebExtension API에 대한 접근 권한도 가진다.

당신은 windows.create()tabs.create() 처럼 Extension page를 로딩할수 있다

더 공부하기 위해 Extension pages를 확인하면 된다.

Content scripts

content scripts를 사용하면 웹페이지에 접근하여 컨트롤 할 수 있다. content scripts는  웹 페이지에 로드되고 해당 페이지의 컨텍스트에서 실행된다.

content scripts는 웹 페이지의 컨텍스트에서 실행되는 추가적으로 제공할 수 있는 스크립트이다;
이것은 페이지 자체가 로드하는 스크립트와 다르다.

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

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

  • 크로스 도메인의 XHR 요청.
  • WebExtension APIs 일부 사용.
  • background scripts와 메시지를 교환함으로 모든 WebExtension API에 간접적으로 접근.

content scripts는 일반 페이지 스크립트에 직접 접근 할 수는 없지만
표준 window.postMessage() API를 사용하여 메시지를 교환 할 수 있다.

일반적으로 content scripts에 대해 자바 스크립트를 참조하지만 동일한 방법을 사용하여 웹 페이지에 CSS를 삽입 할 수 있다.

더 공부하기 위해 content scripts 아티클을 확인하면 된다.

Web accessible resources

웹에 접근 할 수있는 리소스는 이미지, HTML, CSS 및 content script나 페이지 스크립트 같은 JavaScript이다. 이 리소스는 특수한 URI 스키마를 사용하여 페이지 스크립트 및 content script에서 참조 할 수 있다.

예를 들어 content script가 어떤 이미지를 웹 페이지에 삽입하려는 경우 확장앱에 포함시켜 웹에 접근 하게 할 수 있다. 그런 다음 content script는 img 태그를 만들고 src 속성을 통해 추가 할 수 있다.

더 공부하기 위해, web_accessible_resources 해당 문서를 확인하면 된다.

 

 

문서 태그 및 공헌자

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