댓글 검색 목록

[기타] chrome extention - 11. 최고의 성능 달성

페이지 정보

작성자 운영자 작성일 20-11-04 16:05 조회 628 댓글 0

확장은 브라우저에 추가 된 것으로, 보완 및 사용자 정의 기능을 제공하도록 설계되었습니다. 브라우징 경험을 늦추거나 손상 시키는 확장 프로그램은 사용자에게 문제가 되고 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: "https://developer.chrome.com/"};
    },
    {urls: ["https://social.media.distraction.com/*"]},
    ["blocking"]
  );

콘텐츠 스크립트 포함

콘텐츠 스크립트는 확장의 비밀 요원으로 작동해야 하며, 확장 코어에 의존하여 더 무거운 논리를 사용하면서 웹 페이지를 미묘하게 읽거나 수정 해야 합니다. 관련 없는 페이지에 대한 침입 활동을 피하기 위해 명확한 목표가 있어야 합니다. 이상적으로는 콘텐츠 스크립트가 의도적인 동작을 제외하고 탐색 환경에서 눈에 띄지 않아야 합니다.

목표 선언(Declare Targets)

불필요한 위치 또는 부적절한 시간에 콘텐츠 스크립트를 실행하는 확장 프로그램으로 인해 브라우저 속도가 느려지고 잠재적으로 기능 오류가 발생할 수 있습니다. 매니페스트에 일치 패턴을 제공하고 document_start 대신 document_idle에서 스크립트를 실행하여 이를 방지하십시오.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["https://developer.chrome.com/*"],
      "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() ]
        }
      ]);
    });
  });