최대 성능 달성

확장 프로그램은 보완적이고 맞춤설정된 기능을 제공하도록 설계된 브라우저의 추가 기능입니다. 탐색 환경을 느리게 하거나 손상시키는 확장 프로그램은 사용자에게 문제가 되며 Chrome 확장 프로그램 목표에 반합니다. 개발자는 일반적인 좋은 코딩 습관 외에도 다음 관행을 따라 확장 프로그램이 최적의 성능으로 실행되도록 해야 합니다.

가능한 모든 항목 지연

필요할 때까지 리소스 로드를 자제합니다. 시작 함수에서 확장 프로그램을 여는 데 필요한 항목만 포함합니다. 사용자가 버튼을 클릭한 경우에만 필요한 항목이나 사용자가 로그인하기 전에 로그인한 경우에만 작동하는 기능을 시작 중에 로드하지 마세요.

중요한 이벤트 관리

효율적인 백그라운드 스크립트에는 확장 프로그램에 중요한 등록된 이벤트가 포함되어 있습니다. 리스너가 트리거될 때까지 휴면 상태로 있다가 그에 따라 작동한 후 휴면 상태로 돌아갑니다. 불필요한 스크립트를 계속 실행하면 시스템 리소스가 소모됩니다.

가능한 경우 백그라운드 스크립트는 지속성이 false로 설정된 매니페스트에 등록해야 합니다.

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

백그라운드 스크립트를 지속적으로 활성 상태로 유지해야 하는 유일한 경우는 확장 프로그램이 chrome.webRequest API를 사용하여 네트워크 요청을 차단하거나 수정하는 경우입니다. webRequest API는 비영구 백그라운드 페이지와 호환되지 않습니다.

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
}

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {redirectUrl: "/"};
  },
  {urls: ["https://social.media.distraction.com/*"]},
  ["blocking"]
);

콘텐츠 스크립트 포함

콘텐츠 스크립트는 확장 프로그램의 비밀 요원처럼 작동하여 확장 프로그램 코어에 의존하여 더 무거운 로직을 처리하는 동안 웹페이지를 미묘하게 읽거나 수정해야 합니다. 관련 없는 페이지에서 침해적인 활동을 방지하려면 명확한 타겟이 있어야 합니다. 콘텐츠 스크립트는 의도적인 동작을 제외하고는 탐색 환경에서 눈에 띄지 않아야 합니다.

타겟 선언

불필요한 위치나 부적절한 시간에 콘텐츠 스크립트를 실행하는 확장 프로그램은 브라우저 속도를 저하시키고 기능 오류를 일으킬 수 있습니다. 매니페스트에 일치 패턴을 제공하고 document_start 대신 document_idle에서 스크립트를 실행하여 이를 방지하세요.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

확장 프로그램이 사용자의 작업으로 웹페이지에만 액세스해야 하는 경우 프로그래매틱 방식으로 삽입하세요. 프로그래매틱 삽입은 사용자가 호출할 때만 실행됩니다.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

필요한 경우에만 콘텐츠 스크립트 사용

원하는 기능을 구현하는 데 콘텐츠 스크립트가 전혀 필요하지 않은 확장 프로그램도 많습니다. declarativeContent API를 사용하면 관련 조건이 충족되는 시점을 인식하는 확장 프로그램의 규칙이 설정됩니다. 이는 콘텐츠 스크립트보다 효율적이며 코드를 적게 사용합니다.

사용자가 HTML5 <video> 요소가 있는 사이트를 방문할 때 사용자에게 페이지 작업을 표시해야 하는 확장 프로그램은 선언적 규칙을 지정할 수 있습니다.

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            css: ["video"],
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

코드 효율성 평가

비동기 프로그래밍 기법을 구현하고 코드를 최소화하고 간결하게 유지하는 등 웹사이트 성능에 적용되는 일반적인 방법을 확장 프로그램에도 적용할 수 있습니다.

Lighthouse와 같은 도구를 사용하여 확장 프로그램의 성능을 평가하고 시각적 확장 프로그램 페이지에서 개선할 수 있는 영역을 타겟팅합니다.