Chrome Extension - Event Page (번역)

https://developer.chrome.com/extensions/event_pages 번역

Event Pages

 

앱과 익스텐션에서는 일반적으로 어떤 상태나 일을 관리하는 singlelong-running 스크립트가 필요하다.

이벤트페이지가 이것을 해결해준다. 이벤트페이지는 오직 필요할 때만로드된다. 이벤트페이지가 무엇인가를 하고있지 않은 경우에는 언로드되어지고 메모리와 다른 시스템 리소스가해제된다.

 

이벤트페이지는 Chrome22버전부터 안정화되었고, 특히 이런 성능적 이점은 저전력 기기에서 중요하다.

가능하면 새로운 개발을 할 때는 기존의 persistent backgroundpage보다는 event page를 사용하도록 한다. 기존의background page들도 event page로 마이그레이션하라.

 

 

Manifest

익스텐션의 manifest에 eventpage등록.

{

"name": "My extension",

...

"background": {

"scripts":["eventPage.js"],

"persistent": false

},

...

}

“persistent” 키 없이도 기존의 background page를 사용할 수 있다.

“persistent”키는 backgroundpage와 event page를 구별하는 속성이다.

 

Lifetime

 

Event page는 필요할 경우 로드되고, 다시 아이들 상태가 될 떄 언로드 된다.

아래에 event page가 로드되는 상황에 대한 예시가 나와있다.

l  앱이나 익스텐션이처음 설치되었거나 새로운 버전으로 업데이트 되었을 경우(이벤트에 등록하기 위해)

l  이벤트페이지가이벤트를 수신하고 이벤트가 전달(dispatch)될 때

l  Content script나 다른 익스텐션이 메시지를 전송할 때

l  익스텐션의다른 뷰(ex – popup)가 runtime.getBackgroundPage를호출할 경우

 

Event page가 로드되면 eventpage가 활성화되어 있는 동안 실행상태를 유지한다.(ex – 익스텐션 API를 호출하거나 네트워크 요청을 실행)

추가적으로 event page는 모든 모이는 뷰들이 닫히고, 모든 메시지포트가 닫힐 때 까지 언로드되지 않는다. 뷰를 열면 무조건event page가 로드되지는 않으나 한번 로드된 것을 닫는 것을 방지한다.

 

열려진 Event page가 작업이 끝나자마자 닫혀야 한다. 태스크 매니저를 이용하여 Event page의 생명주기를 확인할수 있다. 또한 익스텐션이 프로세스 목록에 나타날 때 관찰하여event page가 로드되고 언로드되는 것을 관찰할 수 있다.

 

event page가 단시간(몇초 정도) 아이들 상태가 되면 runtime.onSuspand 이벤트가전달된다. event page가 강제로 언로드하기 전 이벤트를 처리할 시간(몇 초)을 가진다. 만약이 시간동안 일반적으로 event page 로드되며 발생하는 이벤트가 발생하게 되면suspand가 취소되고 runtime.SuspandCanceled이벤트가전달된다.

 

Eventregistration

 

크롬은 앱이나 익스텐션에 리스너를 추가하는 이벤트를 탐지한다. 이벤트갓은 것이 전달되면, event page가 로드된다. 반대로만약 앱이나 익스텐션이 removeListner를 호출하여 모든 이벤트를 위한 리스너를 제거한다면, 크롬은 더 이상 해당 event에 대한 event page를 로드하지 않는다.

 

리스너는 event page의context에서(event page관련해서만) 존재하기때문에 event page가 로드될 때마다 addListner를사용해야 한다. Runtime.onInstalled자체로는 충분하지 않다.

 

액션에서 이벤트 등록에 대한 예로 Google Mail Cheker 익스텐션을살펴보면 된다.

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/gmail/

 

 

Convertbackground page to event page

 

익스텐션의 persistent background page를 event page로 변환하기 위한 체크리스트가 아래에 있다.

1.    “persistent”: false를 manifest에 추가

2.    익스텐션이 window.setTimeout() 또는window.setInterval()을 사용한다면 alarms API로바꿀 것. DOM 기반의 타이머는 페이지가 종료될 경우 작동하지 않는다.

3.    비슷하게 notifications나 geolocation 같은 다른 비동기 HTML5 API는 완료되지않기 때문에 동등한 익스텐션 API를 사용할 것. (ex –notifications)

4.    만약 익스텐션이 runtime.getBackgroundPage를사용한다면 extension.getBackgroundPage로 바꿔라.새로운 메서드는 필요한 경우 결과를 반환하기 전에 event page를 시작할 수 있도록한 비동기 메서드이다.

 

Bestpractices when using event pages

 

일반적으로 파악하기 어려운 함정을 피하기 위해 event page를사용할 경우의 팁.

1.    익스텐션이 관심있는 이벤트를 받으려면 event page가로드될 때마다 등록을 해줘야 한다. Event page는 익스텐션이 업데이트될 때마다(새로운 버전) 한 번씩만 로드될 것이다. 그러므로 이벤트리스너들은 event page의 top level scope에 추가되어야 한다. 그렇지 않다면 이벤트리스너들은event page가 다시 로드될 떄에는 사용이 불가능할 것이다.

2.    만약 익스텐션이 설치되거나 업그레이드해서 몇 가지를 initialization해줘야할 경우에는 runtime.onInstalled 이벤트를 수신해라.declarativeWebRequest 룰, contextMenu 항목, 그리고 다른 initialization들을 등록하는데 좋은 곳이다.

3.    만약 브라우저의 세션동안 메모리의 런타임 상태를 유지해야 할 경우 storage API 또는 IndexedDB를 사용할 것. Event page는 긴 시간동안 로딩되어있지 않으므로, 런타임상태 동안 전역 변수에만 의존할 수 없다.

4.    원하는 몇 몇 경우에 한하여 이벤트 알람을 제한할 경우 eventfilters를 사용한다. 예를 들면 tabs.onUpdated이벤트를수신할 때 대신 webNavigation.onCompleted이벤트를 필터와 함께 사용하는 것을 고려해보라.(tabs API는 필터 사용을 지원하지 않음) 그렇게 하면 event page가 관심있는 이벤트일 때만 로드되도록 할 수 있다.

5.    만약 event page가 닫히기 몇 초 전에마지막 clean up을 하고 싶다면 runtime.onSuspend이벤트를 수신해라. 대신 주시적으로 지속하도록 해야 한다.그렇게 해야 익스텐션이 onSuspend를 받지 못하고 충돌되어 멈췄을 때 데이터가 손실되지않을 수 있다.

6.    만약 message passing을 사용한다면사용되지 않는 메시지 포트들을 닫도록 한다. Event page는 모든 메시지 포트들이 닫히지 않으면닫히지 않는다.

7.    만약 context menus API를 사용한다면string id를 contextMenus.create의매개변수로 보낸다. 그리고contextMenus.create의onclick 대신 contextMenus.onClicked의콜백을 사용하도록 한다.

8.    Event page가 언로드된 다음 리로드될때(몇 초 동안의 정지후에만 일어나는)에도 정상적으로 동작하는지테스트하도록 한다. 흔한 실수로는 페이지 로드 시간동안 불필요한 일들을 하도록 만드는 경우들이 있다. (익스텐션이 설치될 때만 해도 되는 일들 등.) 페이지 로드 시간에알람을 설정한다던지(이 경우 이전의 알람을 초기화), 페이지로드 시간에 이벤트리스너를 추가하지 않는 경우 등이 있다.