Osiągnij maksymalną skuteczność

Rozszerzenia to uzupełnienie przeglądarki, które ma uzupełniać i umożliwiać dostosowywanie funkcji. Rozszerzenie, które spowalnia lub pogarsza komfort przeglądania, stanowi problem dla użytkownika i ustaw kontrofertę zgodnie z celem rozszerzenia do Chrome. Oprócz ogólnych dobrych nawyków związanych z kodowaniem deweloperzy powinni stosować te metody, aby zapewnić najwyższą wydajność swoich rozszerzeń.

Odłóż wszystko, co jest możliwe

Nie wczytuj zasobów, dopóki nie będą potrzebne. Podaj tylko te informacje, które są niezbędne do otwarcia rozszerzenie w funkcji uruchamiania. Nie ładuj podczas uruchamiania rzeczy, które są potrzebne tylko wtedy, gdy użytkownik klika przycisk, lub funkcje, które działają tylko wtedy, gdy użytkownik jest zalogowany przed aby to zrobić.

Zarządzanie ważnymi wydarzeniami

Efektywny skrypt w tle zawiera zarejestrowane zdarzenia, które są ważne . Są uśpione, dopóki słuchawka nie zostanie aktywowana, podejmuje odpowiednie działania, a potem powraca do uśpienia. stanu. Powoduje to wyczerpanie zasobów systemowych i utrzymanie niepotrzebnego skryptu.

Skrypty działające w tle powinny być zarejestrowane w pliku manifestu z wartością false (fałsz), jeśli jak to tylko możliwe.

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

Jedyną okazją do utrzymywania trwałego skryptu działającego w tle jest to, że rozszerzenie używa chrome.webRequest API do blokowania lub modyfikowania żądań sieciowych. Interfejs API webRequest 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ści z na modyfikowaniu strony internetowej, wykorzystując rdzeń rozszerzenia do obsługi bardziej zaawansowanych procesów. Powinna mieć wyraźne cele, aby uniknąć inwazyjnej aktywności na nietrafnych stronach. Skrypty treści powinny być niezauważone podczas przeglądania, z wyjątkiem celowego działania.

Deklarowanie celów

Rozszerzenie, które uruchamia skrypty treści w niepotrzebnych miejscach lub w nieodpowiednich momentach, może spowodować może działać wolniej i spowodować błędy. Aby tego uniknąć, podaj dopasowanie w pliku manifestu i uruchomiono 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 potrzebuje tylko dostępu do strony internetowej wykonywanej przez użytkownika, wstrzyknij je automatycznie. Wstrzykiwanie automatyczne jest wykonywane tylko wtedy, gdy wywoła je 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 wymagane

Wiele rozszerzeń może w ogóle nie potrzebować skryptu treści, aby uzyskać pożądane funkcje. Korzystanie z declarativeContent API ustawi reguły dla rozszerzenia tak, aby rozpoznawały odpowiednie warunki są spełnione. Jest to bardziej wydajne niż skrypt treści i wymaga mniej kodu.

Jeśli rozszerzenie musiało wyświetlić działanie na stronie, gdy użytkownik odwiedzał stronę z zasobami HTML5 <video>, może określać regułę deklaratacyjną.

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 zwiększania skuteczności witryny można stosować do rozszerzeń, np. programowania asynchronicznego, by kod był jak najkrótszy i zwięzły.

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