최대 성능 달성

확장 프로그램은 보조 기능 및 맞춤설정된 기능을 제공하도록 설계된 브라우저에 부가적인 기능입니다. 탐색 환경의 속도를 저하시키거나 저하시키는 확장 프로그램은 사용자에게 문제가 되며 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와 같은 도구를 사용하여 광고 확장 실적을 평가하고 추가 시각적 정보 페이지에서 개선할 수 있는 영역을 타겟팅합니다.