최대 성능 달성

확장 프로그램은 브라우저에 추가되는 것으로, 맞춤형 기능을 제공합니다 검색 환경의 속도를 늦추거나 저해하는 확장 프로그램은 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와 같은 도구를 이용해 광고 확장 실적을 평가하고, 을(를) 개선할 수 있습니다.