Chrome Extension - Overview (번역)

크롬 익스텐션에 대해 알아볼일이 생겨서 Overview와 필요한 페이지 한두개만 번역 및 공부 한 자료.

https://developer.chrome.com/extensions/overview

Native Message공부하던중 Native Message는 Chrome Extension과 Native Program간의 Message통신이기 때문에

 Chrome Extension에 대해 공부해야 할 필요성을 느낌.

현재 Native Program ----(Stream data)---à Chrome Extension

까지 완료했으며 Chrome Extension과 Web Page간의 Stream data를 전송하기 위해 찾아보는 중.

 

https://developer.chrome.com/extensions

크롬 공식 홈페이지.

하나하나 해석할 예정. 우선 목표는 Chrome Extension ------(Stream data)----à WebPage(js)

 

What are extensions?

 

Extension(익스텐션)은크롬 브라우저의 기능을 바꾸거나 향상시킬 수 있는 작은 소프트웨어 프로그램이다.

익스텐션은 HTML, JavaScript, CSS를 이용해서 작성한다.

 

익스텐션은 UI가 작거나 없다.

Ex)

위의 아이콘은 Google Meil Checker extension이다.

 

모든 파일이 하나의 파일에 들어간 익스텐션 패키지를 유저가 다운로드 하고 설치하는 방법으로 설치할 수 있다.

번들링(패키징 작업)은기존의 일반적인 웹앱과는 달리 익스텐션은 웹의 컨텐츠에 의존할 필요가 없다는 것을 뜻한다.

익스텐션은  Developer DashBoard를 통해 Chrome Web Store에 배포하는 것이 가능하다.

https://developer.chrome.com/webstore

여기에 자세한 정보가 나와있다.

개발을 시작하기 위해.(How do I start)

 

1.    Getting Started tutorial 따라하기 https://developer.chrome.com/getstarted

2.    Overview 읽어보기 https://developer.chrome.com/extensions/overview

3.    Chrominum blog을 읽어 최신 상태로유지하기 http://blog.chromium.org/

4.    Chromium-extensions group 구독신청하기https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions

 

 

Overview

 

Getting Strated tutorial과 이 Overview 페이지의 공부를 마친다면 아마도 익스텐션을 만들기 시작할 수 있을 것이다.

 

Thebasics

익스텐션은 압축된 번들파일(html, css, javascript,image, 그외 필요로 하는 파일들)로 구성되어 있으며 이를 이용해 크롬에 기능을 추가한다.

익스텐션은 기본적으로 웹페이지이고 브라우저가 웹페이지에 제공하는 모든 API사용이가능하다.

XMLHttpRequest에서 JSON,HTML5로(?)

 

익스텐션은 content scripts 또는 cross-origin XMLHttpRequests를 이용하면 웹페이지나 서버와 통신하는 것이 가능하다. 또한 익스텐션은 bookmarks나 tabs같은 브라우저의 특징들과도 프로그램적으로 통신이 가능하다.

 

ExtensionUIs

 

크롬 앱이 아닌 많은 익스텐션들은 browser actions이나page actions의 형태로 구글 크롬에 UI를 추가한다. 각각의 익스텐션은 최대 하나의 browser actions 또는page action을 가질 수 있다. 익스텐션이 대부분의페이지들과 관련이 있다면 browser action을 선택하고 아이콘이 페이지에 따라 나타나거나 사라진다면page action을 선택한다.

This Google Mail Checker extension uses a browser action.	This Mappy extension uses apage action and content script (code injected into a web page).	This Set Page Color extensionfeatures a browser action that, when clicked, shows a popup.

1.    Google Mail Checker extension –browser action사용(툴바에 아이콘이 있음)

2.    Mappy extension – page action 사용(주소창에 아이콘이 있음) 및 contentscript 사용 (코드가 웹페이지에 삽입됨)

3.    News Reader enxtension –browser action, 클릭하면 팝업을 보여주는 것이 특징

익스텐션(과 크롬 앱)은또한 다른 방법으로 UI를 보여주는 것이 가능하다. 예를들어 chrome context menu를 추가하거나optionpage를 제공하거나 페이지가 어떻게 보여지는지 바꾸는 content script를 사용한다.

Developer’s Guide에 세부사항에 대한 설명, 익스텐션 기능의 전체 목록 등이 나와임ㅆ다.

 

Files

각 익스텐션은 아래 파일들로 구성된다.

l  하나의 Manifest file

l  하나 또는그 이상의 HTML files

l  (Optional) 하나 또는 그 이상의 JavaScript files

l  (Optional) 익스텐션에서 필요한 다른 파일들( ex – imagefiles )

익스텐션을 개발하는 동안 위의 모든 파일들은 하나의 폴더에 넣을 것.

익스텐션을 배포할 때 폴더 내의 파일들은 .crx라는 특별한 zip파일로 압축될 것이다.

익스텐션을 Chrome Developer Dashboard를 이용해업로드하면 .crx파일이 만들어질 것.

배포가 궁금할 경우 Hosting페이지를 참조할 것. https://developer.chrome.com/extensions/hosting

 

Referringto files

 

어떤 파일이던 익스텐션에 넣을 수는 있다. 이 파일을 어떻게 사용할까?

보통 파일을 사용하기 위해서 기존의 HTML페이지와 같은 방법으로상대주소(relative URL)을 사용하는 것이 가능하다.

(ex) <imgsrc="images/myimage.png">

Google Chrome Debugger를 사용해본다면 알 수 있겠지만익스텐션 내의 모든 파일은 절대경로(absolute URL)로 접근하는 것이 가능하다

(ex)chrome-extension://<extensionID>/<pathToFile>

위의 URL에서 <extensionID>는chrome://extensions페이지에서 익스텐션이 로드되었을 때 확인할 수 있는 유일하게 식별가능한ID값으로 익스텐션 시스템이 각각의 익스텐션이 로드될 때 만들어준다.

<pathToFile>은 익스텐션의 최상위 폴더부터의 파일경로이다. 상대경로와 비슷하다.

익스텐션을 개발하는 동안(익스텐션을 패키징하기 전) 익스텐션의 ID는 변경될 수도 있다.

특히 패키징되지 않은(압축되지 않은)익스텐션들은 아마도 다른 디렉토리에서 로드할 경우 바뀔바뀔 것이다.

ID는 익스텐션을 압축한 후에도 바뀔 것이다. (압축 전과 비교했을 때) 만약 익스텐션 내에서 파일의 전체 경로를지정해야 하는 경우 개발과정에서 @@extension_id 라는 키워드가 이미 정의되어 있기 때문에하드코딩할 필요 없이 키워드를 사용하면 된다.

 

익스텐션을 패키징 할 때(일반적으로 Dashboard로 업데이트 해서) 익스텐션은 영구적인 ID(익스텐션을 업데이트 해도 그대로 남는ID)를 얻는다. 한번 익스텐션 ID가 영구적인 ID를얻으면 기존의 @@extension_id 키워드를 모두 얻은 ID로바꿀 수 있다.

 

Themanifest file

 

manifest.json으로 불리는 manifest파일은 매우 중요한 파일들과 익스텐션이 사용할 수 있는 기능등과 같은 익스텐션에 대한 정보를 제공한다.

아래는 일반적인 manifest 파일을 보여준다.(browser action을 사용하고 google에서 정보를 사용)

{

"name": "My Extension",

"version": "2.1",

"description": "Gets information from Google.",

"icons": { "128": "icon_128.png" },

"background": {

"persistent": false,

"scripts": ["bg.js"]

},

"permissions":["http://*.google.com/","https://*.google.com/"],

"browser_action": {

"default_title": "",

"default_icon": "icon_19.png",

"default_popup": "popup.html"

}

}

자세한 내용은 Manifest Files 페이지를 참조 https://developer.chrome.com/extensions/manifest

 

Architecture

 

많은 익스텐션들은 보이지 않지만 익스텐션의 주요 로직을 담고있는 backgroundpage를 가진다.

또한 익스텐션은 익스텐션의 UI를 나타내는 다른 페이지를 가질 수있다.

만약 익스텐션이 사용자가 로드한 웹 페이지(익스텐션에 포함되어있지않은 페이지)와 통신하는 것을 원한다면 익스텐션은contentscript를 사용해야 한다.

 

Thebackground page

위의 사진을 보면 최소 두개의 익스텐션이 설치된 브라우져를 보여준다.browser action(노란 아이콘)과 pageaction(파란 아이콘)

이 browser action과 pageaction은 background page를 가진다. 위그림은 browser action의 background page를보여준다.

이 background page은 background.html로정의되어있으며 두 window에서 브라우져의 동작을 제어하는 JavaScipt코드도 가지고 있다.

 

background page는persistent background pages와 event pages 두 가지 종류가있다.

Persistent background page는 이름에서 알 수있듯 항상 열려있다.

Event page는 필요에 따라 열리거나 닫힌다.

실행하는 모든 시간 동안 완전히 background page가 필요하지않은 이상 event page를 사용하는 것을 선호할 것.

 

UIPages

 

익스텐션은 익스텐션의 UI를 보여주는 보통의 HTML files를 가질 수 있다.

예를 들어 browser actions은 HTML로 만들어진 팝업을 가지고 띄울 수 있다.

어떤 익스텐션이나 하나의 옵션 페이지를 가질 수 있다. 이 옵션페이지는익스텐션이 어떻게 동작하는지 조절할 수 있다.

다른 특별한 페이지는 override page이다.

마지막으로 tabs.create또는 window.open()을 통해 다른 HTML files를 익스텐션내에서 보여줄 수 있다.

 

익스텐션 내의 HTML 페이지는 다른 각각의 DOM들에 완전히 접근하는 것이 가능하고 서로의 함수를 호출하는 것이 가능하다.

 

위의 그림은 browser action의 팝업 구조를 보여준다.

팝업의 내용은 HTML(popup.html) 파일에 의해 정의된 웹페이지이다.

이 익스텐션 또한 background page(background.html)을가지게 된다.

이떄 팝업은 background page의 함수를 호출할 수 있기때문에 background page의 코드를 복사할 필요가 없다.

자세한 내용은 Browser Actions https://developer.chrome.com/extensions/browserAction

Options https://developer.chrome.com/extensions/options

Override Pages https://developer.chrome.com/extensions/override

Communication between pages https://developer.chrome.com/extensions/overview#pageComm

를 살펴볼 것

 

Contentscripts

 

익스텐션이 웹페이지와의 통신을 해야 한다면 content script가필요하다. content script는 브라우져에 로드되어 페이지의 context에서실행되는 JavaScript이다.

content script를패키지 된 익스텐션(페이지의 부모 익스텐션)의 일부가 아닌로드된 페이지의 일부로 보자.

content script는브라우저가 방문하는 웹페이지의 내용을 읽고 페이지를 변경할 수 있다.

아래 그림을 보면 content script는 웹페이지에 표시되는DOM을 읽고 수정한다.

하지만 content script는 익스텐션의 부모 익스텐션(parent extension)의 background page의 DOM을 수정할 수는 없다.

 

content script는 부모 익스텐션으로부터 완전히 차단되지는않는다. 부모 익스텐션과 메시지 교환을 할 수 있다.

예를들어 아래 그림의 화살표와 같이

content script는 브라우저 페이지에서 rss피드를 찾을 때마다 메시지를 보낼 수도 있을 것이다.

또는 background page는 브라우저의 외관(css)을 변경하는 요청메시지를 보낼 수도 있을 것이다.

 

자세한 내용은 Content Scripts를 확인하라.  

https://developer.chrome.com/extensions/content_scripts

 

Usingthe chrome.* APIs

 

익스텐션은 웹 페이지와 앱이 사용할 수 있는 모든 API들에 대한접근권한을 가질 뿐만 아니라 브라우져와 긴밀한 통합(tight integration)을 할 수 있는Chrome-only APIs(chrome.* APIs라고 한다)를사용할 수 있다.

예를들어 어떤 익스텐션이나 웹 앱에서 표준 window.open()함수를URL을 열기 위해 사용할 수 있다. 하지만 만약 URL이 표시될window를 지정하고 싶다면 익스텐션에서 크롬 전용tabs.create메서드를 사용해야 한다.

 

Asynchronous vs. synchronous methods

 

대부분의 chrome.* API들은비동기이다. 이것들은 결과를 작업이 완료되기를 기다리지 않고 즉시 반환한다. 만약 작업의 결과를 알고싶다면 메서드에 콜백함수(callbackfunction)를 전달하면 된다.

콜백함수는 메서드가 결과를 반환한 후에 실행된다.

아래 비동기 메서드코드의 예가 있다.

chrome.tabs.create(object createProperties,function callback)

 

다른 chrome.* 메서드들은 동기이다. 동기 메서드는 모든 일이 끝나기 전 까지 결과를 반환하지 않기 때문에 절대 콜백을 가지지 않는다.

보통 동기 메서드는 반환 타입을 가진다.

(ex) Runtime.getURL방법을 고려헀을 경우

string chrome.runtime.getURL()

 

이 메서드는 동기적으로 URL을 반환하고 다른 비동기 작업을 수행하지않기 때문에 콜백을 가지지 않고 string 반환을 하지 않는다.

 

Exmaple:Using a callback

 

사용자의 현재 선택된 탭을 새로운 URL로 이동하고 싶어 한다면(현재 선택된 탭에서 새로운 URL을 열어보고 싶다면) 현재 탭의ID(tabs.query 사용)을 얻고 그 탭을 새로운 URL로 갈 수 있도록 해야 한다.(tabs.update사용)

 

만약 query()가 동기인 경우를 가정한다면 코드를 아래와 같이작성해도 된다.

//THIS CODE DOESN'T WORK

var tab = chrome.tabs.query({'active':true}); //WRONG!!!

chrome.tabs.update(tab.id, {url:newUrl});

someOtherFunction();

 

하지만 이러한 접근은query()가 비동기이기 때문에 되지 않는다. 비동기인 query는 작업이 완료되는 것을 기다리지 않고 결과를반환하며, 심지어는 값을 반환하지 않기도 한다.

query()는 아래 설명에서 콜백 매개변수에 의해 비동기라는 것을알 수 있다.

chrome.tabs.query(object queryInfo,function callback)

 

위쪽의 코드를 고치기 위해서 콜백 매개변수를 사용해야 한다.

아래의 코드는 어떻게 콜백함수를 정의하는지 보여준다.

이 콜백함수는 query()와 update()를수행한 결과는 가져오는 함수이다.

 

//THIS CODE WORKS

chrome.tabs.query({'active': true},unction(tabs){

chrome.tabs.update(tabs[0].id, {url: newUrl});

});

someOtherFunction();

위의 예에서 1 -> 4 -> 2번째 줄 순서로 실행된다.

query()를 사용해서 현재 선택된 탭에 대한 정보가 반환되어 사용가능해진 후에 query()에 지정된 콜백함수가 호출된다(2번째줄 실행)

update()가 비동기임에도 불구하고 이 예제에서는 콜백 파라미터를사용하지 않았다. 업데이트의 결과에 대해 아무 것도 하지 않기 떄문이다.

 

Moredetails

 

더 많은 정보는 chrome.* APIs와 비디오를 시청하라.

https://developer.chrome.com/extensions/api_index

https://youtu.be/bmxr75CV36A

 

 

Communicationbetween pages

 

익스텐션에서 HTML페이지는 자주 통신을 필요로 한다.

모든 익스텐션의 페이지들이 같은 스레드의 같은 프로세스 내에서 실행되기 때문에 페이지들은 서로 직접 함수를 사용할수 있다.

 

익스텐션에서 페이지들을 찾기 위해 getViews()나 getBackgroundPage()와 같은 chrome.extension함수를사용해야 한다.

페이지가 익스텐션 내의 다른 페이지를 참조하면 첫 페이지는 다른 페이지의 함수를 호출할 수도 있고 그 페이지의DOM을 조작할 수도 있다.

 

Savingdata and incognito mode

(데이터 저장과 시크릿 모드)

익스텐션은 storage API 또는 HTML5의 web storage API(localStorage같은) 또는 데이터를 저장할서버를 요청(request)해 데이터를 저장할수 있다.

 

무엇인가 저장 할 때마다 첫 번째로 요청이 온 윈도우가 incognitomode인지 고려한다.

기본적으로 익스텐션은 incognito 창에서는 실행이 되지 않는다. 때문에 사용자의 브라우저가 incognito일 경우 익스텐션으로부터사용자가 무엇을 기대하는지 고려할 필요가 있다.

 

Incognito mode는 윈도우가 어떤 흔적도 남기지 않을 것을약속하낟. Incognito 창에서 데이터를 다룰 때 이 약속을 지키기 위해 최선을 다한다.

예를들어 익스텐션이 일반적으로 검색기록을 클라우드에 저장한다면 incognito창에서는 저장하지 않는다. 반대로 incognito이던아니던 어떤 창에서든간의 익스텐션 세팅을 저장할 수 있다.

 

Rule of thumb: 만약 사용자가 방문한 웹이나 어떤 일을했는지에 대한 데이터의 일부가 보여지게 되었을 때, incognito 창의 정보라면 저장하지 않는다.

 

창이 incognito mode인지 감지하기위해 tabs.Tab 또는 windows.Window 객체의 incognito속성을 체크해라.

(ex)

function saveTabData(tab, data) {

if (tab.incognito) {

chrome.runtime.getBackgroundPage(function(bgPage) {

bgPage[tab.url] = data;      // Persist data ONLY in memory

});

} else {

localStorage[tab.url] = data;  // OK to store data

}

}

 

Nowwhat?

 

익스텐션 Overview를 확인하였으니 스스로 만들 준비가 되었을것이다.

다음으로는

l  Tutorial: Getting Started

l  Tutorial: Debugging

l  Developer’s Guide

l  Samples

l  Videos, such as Extension Message Passing