[chrome extension] setInterval 타이머

이정음·2022년 4월 15일
0

FrontEnd

목록 보기
4/4

[ 문제 ]

  • 타이머를 적용하는 setInterval이 간헐적으로 실행되지 않음
  • 새로운 window를 열었을 때, background.js가 재 실행되면서, tabId가 “”로 초기화 됨

setInterval

Manifest V3로 이전 되면서, chrome alarms API로 변경

https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/#alarms

chrome.alarms.create({ when:Date.now(), periodInMinutes: 1/60});
chrome.alarms.onAlarm.addListener(() => {
   // Do Action
});
  • alarms 사용을 위해, Manifest에 Permission ‘alarms’ 추가
  • when: 시작 시간
    periodInMinutes: 이벤트 발생 간격. 설정하지 않을 시, when에 따라 한번만 동작

New window 초기화 문제

Chrome의 Local Storage에 저장

chrome.storage.local.get(['docongTab'],(result)=>{
        chrome.tabs.get(result.docongTab, (tab)=>{
            if(tab.url.includes("j6s003.p.ssafy.io")){
                chrome.scripting.executeScript({
                    target: {tabId: result.docongTab},
                    func: ()=>{return localStorage["persist:root"];}
                }, (result)=>{
                    timerStatus = JSON.parse(JSON.parse(result[0].result).user).userTimer;
                    if(timerStatus.status == "play"){
                        timer = true;
                        playTimer(timerStatus);
                    } else {
                        timer = false;
                        chrome.action.setIcon({
                            path:"img/icon16.png"
                        });
                    }
                });
            }
        })
    })
  • localStorage에 저장하여, 모든 Window에서 동일한 값을 가질 수 있도록 설정
  • 저장되어 있는 tabID의 URL이 Docong이어야만 타이머 Logic 실행
profile
코드먹는 하마

0개의 댓글