이벤트 기반 백그라운드 스크립트로 이전

비영구 백그라운드 스크립트를 구현하면 확장 프로그램의 리소스 비용이 크게 절감됩니다. 대부분의 확장 프로그램 기능은 이벤트 기반 백그라운드 스크립트에서 지원할 수 있습니다. 확장 프로그램은 시스템 리소스를 지속적으로 사용하고 저전력 기기에 부담을 줄 수 있으므로 드문 경우에만 영구 백그라운드를 사용해야 합니다.

영구 백그라운드 스크립트를 이벤트 기반 비영구 모델로 이전하여 확장 프로그램의 성능을 개선합니다. 기본적으로 "persistent"는 true로 설정됩니다.

지속성을 false로 지정

확장 프로그램 매니페스트 파일에서 "background" 키를 찾은 다음 "persistent" 필드를 false로 추가하거나 업데이트합니다.

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

HTML 파일에 의존하는 백그라운드 스크립트에도 동일하게 적용됩니다.

{
  "name": "My extension",
  ...
  "background": {
    "page": "background.html",
    "persistent": false
  },
  ...
}

표면 이벤트 리스너

중요한 이벤트가 트리거되면 백그라운드 스크립트를 활성화하기 위해 리스너가 최상위 수준에 있어야 합니다. 등록된 리스너는 동기 패턴으로 재구성해야 할 수 있습니다. 아래와 같이 리스너를 구조화하면 동기적으로 등록되지 않으므로 호출할 수 없습니다.

chrome.storage.local.get('runtimeEvents', function (events) {
  for (let event of events)
    chrome.runtime[event].addListener(listener);
});

대신 리스너를 최상위 수준에 유지하고 중첩하지 마세요.

chrome.runtime.onStartup.addListener(function() {
  // run startup function
})

스토리지의 상태 변경 기록

storage API를 사용하여 상태와 값을 설정하고 반환합니다. local.set을 사용하여 로컬 머신에서 업데이트합니다.

  chrome.storage.local.set({ variable: variableInformation });

local.get을 사용하여 변수의 값을 가져옵니다.

chrome.storage.local.get(['variable'], function(result) {
  let awesomeVariable = result.variable;
  // Do something with awesomeVariable
});

타이머를 알람으로 변환

window.setTimeout() 또는 window.setInterval()과 같은 DOM 기반 타이머는 이벤트 페이지가 휴면 상태일 때 트리거되는 경우 비영구 백그라운드 스크립트에서 적용되지 않습니다.

let timeout = 1000 * 60 * 3;  // 3 minutes in milliseconds
window.setTimeout(function() {
  alert('Hello, world!');
}, timeout);

대신 alarms API를 사용하세요.

chrome.alarms.create({delayInMinutes: 3.0})

그런 다음 리스너를 추가합니다.

chrome.alarms.onAlarm.addListener(function() {
  alert("Hello, world!")
});

백그라운드 스크립트 함수 호출 업데이트

extension.getBackgroundPage를 사용하여 백그라운드 페이지에서 함수를 호출하는 경우 runtime.getBackgroundPage로 업데이트합니다. 새로운 메서드는 반환하기 전에 비영구 스크립트를 활성화합니다.

function backgroundFunction() {
  alert('Background, reporting for duty!')
}

document.getElementById('target').addEventListener('click', function(){
  chrome.extension.getBackgroundPage().backgroundFunction();
});

이 메서드는 백그라운드 스크립트가 비활성 상태인 경우 작동하지 않습니다. 이는 비영구 스크립트의 기본 상태입니다. 새로운 메서드에는 백그라운드 스크립트가 로드되었는지 확인하는 콜백 함수가 포함되어 있습니다.

document.getElementById('target').addEventListener('click', function() {
  chrome.runtime.getBackgroundPage(function(backgroundPage){
    backgroundPage.backgroundFunction()
  })
});