본 포스트는 크롬 익스텐션 개발자 페이지(https://developer.chrome.com/extensions/overview)를 토대로 작성되었습니다.
그냥 공부하는 차원에서 개발자스러운 번역 중...
chrome.* API 사용하기
추가적으로 모든 API 들은 웹 페이지와 앱에서 사용할 수 있고, 브라우저와 밀접한 상호작용이 가능한 크롬 API 를 사용할 수 있다. 예를 들어 익스텐션이나 앱은 window.open() 메소드를 이용하여 새 창을 열지만 익스텐션은 크롬 API (tabs.create)를 대신 사용할 수 있다.
비동기 vs. 동기 방식
대부분의 chrome.* API 들은 비동기적(즉시 리턴하지 않고 연산이 끝날 때까지 기다리지 않음)이다. 연산에 대한 결과를 필요로 하면 콜백함수를 통해 결과를 넘길 수 있다. 콜백은 메소드 리턴 후에 실행된다. 비동기 메소드의 시그니쳐의 예는 다음과 같다.
chrome.tab.create(object createProperties, function callback)
다른 chrome.* 메소드들은 동기적이다. 동기 메소드는 메소드가 끝나기 전까지는 리턴하지 않기 때문에 콜백이 필요하지 않다. 종종 동기 메소드는 리턴 타입을 갖는다.
string chrome.runtime.getURL()
이 메소드는 동기적으로 반환하기 때문에 콜백이 없고 string 리턴 타입을 갖는다.
예: 콜백 사용하기
현재 선택된 탭에 새로운 URL 을 탐색하기 원한다면, 현재 탭 아이디를 확보(tabs.query 사용)하고 탭이 새로운 URL 로 이동(tabs.update 사용)하도록 한다.
만약 query() 가 동기적이였다면 아래와 같이 작성했을 것이다.
// 이 코드는 동작하지 않음
var tab = chrome.tabs.query({'active': true}); // 잘못됨!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
query() 는 비동기적이기 때문에 이러한 접근방식은 옳지 않다. 작업이 완료될 때까지 기다리지 않고 리턴되고, 어떠한 값도 반환하지 않는다. query() 의 시그니처에는 callback 이라는 파라미터가 비동기적으로 선언되어있다.
chrome.tabs.query(object queryInfo, fcuntion callback);
앞서 작성된 코드를 해결하기 위해 콜백 파라미터를 반드시 사용해야 한다. 아래의 코드는 query()에서 콜백 함수를 통해 결과를 얻고 update() 를 부르는 것을 보여준다.
// 이 코드는 정상동작 함
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
위의 예에서 코드는 다음 순서로 실행된다. 1, 4, 2. query() 에 정의된 콜백 함수는 오직 현재 선택된 탭이 사용가능할 때만 호출된다. 게다가 update() 도 비동기적이지만 update 에 결과가 없기 때문에 콜백을 사용하지는 않는다.
자세한 정보는 chrome.* API docs 를 참고하기 바란다.