Osiągnij maksymalną skuteczność

Rozszerzenia są dodatkiem do przeglądarki, który ma udostępniać dodatkowe, niestandardowe funkcje. Rozszerzenie spowalniające lub spowalniające przeglądanie internetu jest problematyczne dla użytkownika i sprzeczne z celem rozszerzenia do Chrome. Oprócz ogólnych dobrych nawyków w zakresie kodowania deweloperzy powinni stosować te zasady, aby rozszerzenia działały z maksymalną wydajnością.

Odłóż wszystko, co możliwe

Nie ładuj zasobów, dopóki nie będą potrzebne. Umieść w funkcji uruchamiania rozszerzenia tylko te elementy, które są potrzebne do otwarcia rozszerzenia. Nie wczytuj podczas uruchamiania funkcji, które są potrzebne tylko wtedy, gdy użytkownik kliknie przycisk, ani funkcji, które działają tylko wtedy, gdy użytkownik jest zalogowany.

Zarządzanie ważnymi wydarzeniami

Wydajny skrypt w tle zawiera zarejestrowane zdarzenia, które są ważne dla ich rozszerzenia. Do czasu działania detektora pozostają uśpione, a potem wracają do stanu uśpionego. Powoduje to zużycie zasobów systemowych niezbędnego do działania zbędnego skryptu.

Jeśli to możliwe, skrypty działające w tle powinny być zarejestrowane w pliku manifestu z opcją trwałości ustawioną na false (fałsz).

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

Jedyną okazją do utrzymania aktywności skryptu w tle jest sytuacja, w której rozszerzenie używa interfejsu API chrome.webRequest do blokowania lub modyfikowania żądań sieciowych. Interfejs webRequest API jest niezgodny z nietrwałymi stronami w tle.

{
  "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"]
);

Zawiera skrypty treści

Skrypty treści powinny działać jako tajne agenty rozszerzenia, subtelnie odczytując treść strony internetowej lub modyfikując jej zawartość, w tym celu polegając na rdzeniu rozszerzenia. Ich cele powinny być jasno określone, aby uniknąć inwazyjnych działań na nietrafnych stronach. W idealnej sytuacji skrypty treści powinny być niezauważane podczas przeglądania internetu, a nie tylko celowe działanie.

Deklarowanie wartości docelowych

Rozszerzenie obsługujące skrypty treści w niepotrzebnych lokalizacjach lub w nieodpowiednich momentach może spowolnić działanie przeglądarki, a tym samym spowodować błędy w funkcjonalności. Aby tego uniknąć, umieść wzorce dopasowania w pliku manifestu i uruchom skrypt pod adresem document_idle zamiast document_start.

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

Jeśli rozszerzenie będzie potrzebowało dostępu tylko do strony internetowej z działaniem użytkownika, wstrzyknij je automatycznie. Wstrzykiwanie automatyczne zostanie uruchomione tylko wtedy, gdy wywoła go użytkownik.

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

Używaj skryptów treści tylko wtedy, gdy jest to konieczne

Wiele rozszerzeń może w ogóle nie potrzebować skryptu dotyczącego treści, aby uzyskać żądaną funkcjonalność. Użycie interfejsu API declarativeContent skonfiguruje reguły dla rozszerzenia, które będą wykrywać, kiedy zostaną spełnione odpowiednie warunki. To lepsze rozwiązanie niż skrypt treści i zużywa mniej kodu.

Jeśli rozszerzenie ma wyświetlać czynność wykonywaną na stronie użytkownikowi, gdy odwiedza on witrynę z elementem HTML5 <video>, można użyć reguły deklaratywnej.

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() ]
      }
    ]);
  });
});

Ocena efektywności kodu

Te same ogólne metody dotyczące wydajności witryny można stosować w przypadku rozszerzeń, np. implementować techniki programowania asynchronicznego oraz ograniczać ilość kodu do minimum.

Użyj narzędzi takich jak Lighthouse, aby ocenić skuteczność rozszerzeń i kierować reklamy na obszary, które można poprawić na stronach z rozszerzeniami wizualnymi.