Background.js 파일은 백그라운드에서 동작하는 기능을 설정할 수 있다.
현재는 TODO의 정보를 백그라운드에서 알림창을 사용하여 화면에 표현해주는 내용을 작성한 것이다.
- background.js
|
chrome.runtime.onMessage.addListener(message =>{ createNotification(message['notificationId']); return true; }); /** * 알림창 옵션 생성 */ function getNotificationOption(notificationId){ return new Promise(function(resolve, reject){ try{ chrome.storage.sync.get(notificationId, function(items) { let notificationsOption = { type: "basic", title: "TODO Notification!", iconUrl : 'icon.png', message: items[notificationId], requireInteraction : true } resolve(notificationsOption); }); }catch(e){ reject(); } }); } /** * 알림 생성 */ function createNotification( notificationId ){ getNotificationOption(notificationId).then(function(value) { chrome.notifications.create(notificationId, value, function(){ }); }); } /** * 알림 업데이트 */ function clickedNotification( notificationId ){ if ( confirm('완료했나요?') ){ chrome.storage.sync.remove(notificationId, function(){}); }else{ getNotificationOption(notificationId).then(function(value) { chrome.notifications.update(notificationId, value, function(){}); }); return; } }
chrome.notifications.onClicked.addListener(clickedNotification);
|
백그라운드에서는 리스너를 사용하여 popup.js에서 전송되는 메시지 정보를 전달 받을 수 있도록 해둔다.
전달받은 메시지 내용을 기반으로 알림창을 생성하게 된다.
알림창 옵션에서 iconUrl은 필수 옵션이므로, 알림창 icon영역에 표현될 이미지 파일을 추가해야 한다.
이미지 파일은 크롬 확장프로그램 폴더에 동일하게 위치 시키면 된다.
알림창 옵션 중, requireInteraction 을 true로 지정하지 않으면, 알림창은 수초 이내로 자동으로 사라지게 되어있다.
따라서 알림창을 클릭하기 전까지 항상 유지하도록 설정하였다.
알림창을 클릭하면 알림창을 닫을지 여부를 확인하여, 나머지 작업을 처리하도록 하였다.
지금까지 간단하게 입력창을 통하여 데이터를 저장하고, 알림창까지 띄우는 내용을 진행했다.
(다만, 메시지를 전달 받은 후, 비동기 동작(storage에서 데이터를 꺼내는 작업)으로 인하여, 콘솔창에 오류가 발생한다. )
크롬 확장프로그램은 기본적으로 스크립트와 html로 이뤄져있기 때문에, 크롬 확장프로그램 규격에 맞는 구성과 API를 사용하면,
본인이 원하는 내용은 간단하게 만들어서 사용이 가능하다. ( 예: 달력연동, 모니터링 기능 등등 )