Osiągnij maksymalną skuteczność

Rozszerzenia to dodatki do przeglądarki, które mają zapewniać dodatkowe i dostosowane funkcje. Rozszerzenie, które spowalnia lub pogarsza komfort przeglądania, jest problematyczne dla użytkownika i sprzeczne z celem rozszerzenia do Chrome. Oprócz ogólnych dobrych praktyk kodowania deweloperzy powinni stosować się do tych zasad, aby zapewnić optymalne działanie rozszerzeń.

Odłóż wszystko, co możliwe

Wstrzymaj się z wczytywaniem zasobów do momentu, gdy będą potrzebne. W funkcji uruchamiania uwzględnij tylko to, co jest potrzebne do otwarcia rozszerzenia. Nie wczytuj podczas uruchamiania elementów, które są potrzebne tylko wtedy, gdy użytkownik kliknie przycisk, ani funkcji, które działają tylko wtedy, gdy użytkownik jest zalogowany, zanim będzie miał szansę to zrobić.

Zarządzaj ważnymi zdarzeniami

Skuteczny skrypt działający w tle zawiera zarejestrowane zdarzenia, które są ważne dla rozszerzenia. Pozostają one w stanie uśpienia, dopóki nie zostanie wywołany odbiornik, a następnie działają zgodnie z tym i wracają do stanu uśpienia. Uruchamianie niepotrzebnego skryptu zużywa zasoby systemowe.

Skrypty działające w tle powinny być zarejestrowane w pliku manifestu z ustawioną na false trwałością, jeśli to możliwe.

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

Jedynym przypadkiem, w którym skrypt działający w tle powinien być stale aktywny, jest sytuacja, gdy rozszerzenie używa chrome.webRequest API do blokowania lub modyfikowania żądań sieciowych. Interfejs webRequest API jest niezgodny z nietrwałymi stronami działającymi 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"]
);

Zawieraj skrypty dotyczące zawartości

Skrypty dotyczące zawartości powinny działać jak tajni agenci rozszerzenia, subtelnie odczytując lub modyfikując stronę internetową, a jednocześnie polegając na rdzeniu rozszerzenia w zakresie bardziej złożonej logiki. Powinny mieć jasne cele, aby uniknąć inwazyjnej aktywności na nieistotnych stronach. Idealnie byłoby, gdyby skrypty dotyczące zawartości były niezauważalne podczas przeglądania, z wyjątkiem celowego działania.

Deklaruj cele

Rozszerzenie uruchamiające skrypty dotyczące zawartości w niepotrzebnych lokalizacjach lub w nieodpowiednich momentach może spowolnić przeglądarkę i potencjalnie spowodować błędy w działaniu. Aby tego uniknąć, podaj w pliku manifestu match patterns i uruchom skrypt w document_idle zamiast w 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ć dostępu do strony internetowej tylko wtedy, gdy użytkownik wykona działanie, wstrzyknij je programowo. Wstrzyknięcie programowe zostanie uruchomione tylko wtedy, gdy użytkownik je wywoła.

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

Używaj skryptów dotyczących zawartości tylko wtedy, gdy jest to wymagane

Wiele rozszerzeń może nie potrzebować skryptu dotyczącego zawartości, aby osiągnąć pożądaną funkcjonalność. Użycie interfejsu declarativeContent API spowoduje ustawienie reguł, dzięki którym rozszerzenie będzie rozpoznawać, kiedy zostaną spełnione odpowiednie warunki. Jest to bardziej wydajne niż skrypt dotyczący zawartości i wymaga mniej kodu.

Jeśli rozszerzenie musi wyświetlać użytkownikowi działanie na stronie, gdy odwiedza on witrynę z elementem HTML5 <video> może określić regułę deklaratywną.

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

Oceniaj wydajność kodu

Do rozszerzeń można stosować te same ogólne praktyki dotyczące wydajności witryny, takie jak wdrażanie technik programowania asynchronicznego oraz utrzymywanie kodu w minimalnej i zwartej postaci.

Używaj narzędzi takich jak Lighthouse, aby ocenić wydajność rozszerzenia i określić obszary, które można ulepszyć na stronach rozszerzenia.