En yüksek performansa ulaşın

Uzantılar, tarayıcıya ek olarak sunulan ve ek olarak özelleştirilmiş işlevler sağlamak için tasarlanmış özelliklerdir. Göz atma deneyimini yavaşlatan veya bozan uzantılar, kullanıcı için sorunlu ve Chrome uzantılarının amacına aykırıdır. Geliştiriciler, genel olarak iyi kodlama alışkanlıklarının yanı sıra uzantılarının en iyi performansı gösterebilmesi için aşağıdaki uygulamaları da takip etmelidir.

Mümkün olan her şeyi erteleme

Kaynakları ihtiyaç duyulana kadar yüklemeyin. Yalnızca bir uzantının başlangıç işlevinde açılması için gerekenleri ekleyin. Başlatma sırasında yalnızca kullanıcı bir düğmeyi tıkladığında gerekli olan öğeleri veya yalnızca kullanıcı oturum açtıktan sonra çalışan özellikleri yüklemeyin.

Önemli etkinlikleri yönetme

Verimli bir arka plan komut dosyası, uzantısı için önemli olan kayıtlı etkinlikleri içerir. Bir dinleyici tetiklenene kadar pasif durumda kalır, buna göre hareket eder ve ardından pasif duruma geri döner. Gereksiz bir komut dosyasının çalışır durumda tutulması sistem kaynaklarını tüketir.

Arka plan komut dosyaları, mümkünse manifestte kalıcılıkları false olarak ayarlanmış şekilde kaydedilmelidir.

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

Arka plan komut dosyasını sürekli olarak etkin tutmanın tek yolu, uzantının ağ isteklerini engellemek veya değiştirmek için chrome.webRequest API'sini kullanmasıdır. webRequest API, kalıcı olmayan arka plan sayfalarıyla uyumlu değildir.

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

İçerik komut dosyaları içermelidir.

İçerik komut dosyaları, bir uzantının gizli ajanları gibi çalışmalı, daha ağır mantık işlemlerini gerçekleştirmek için uzantı çekirdeğine güvenerek web sayfasını gizlice okumalı veya değiştirmelidir. Alakasız sayfalarda istenmeyen etkinlikleri önlemek için net hedefleri olmalıdır. İçerik komut dosyaları, amaçlı davranışlar dışında göz atma deneyiminde fark edilmemelidir.

Hedefleri tanımlama

Gereksiz yerlerde veya uygunsuz zamanlarda içerik komut dosyaları çalıştıran bir uzantı, tarayıcının yavaşlamasına ve işlevsellik hatalarına neden olabilir. Manifest dosyasında match patterns sağlayarak ve komut dosyasını document_start yerine document_idle konumunda çalıştırarak bu durumdan kaçının.

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

Bir uzantının yalnızca kullanıcının işlemiyle bir web sayfasına erişmesi gerekiyorsa uzantıyı programatik olarak yerleştirin. Programatik yerleştirme yalnızca kullanıcı tarafından çağrıldığında çalışır.

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

İçerik komut dosyalarını yalnızca gerektiğinde kullanın

Birçok uzantı, istenen işlevselliği sağlamak için içerik komut dosyasına ihtiyaç duymayabilir. declarativeContent API'sini kullanarak uzantının, alakalı koşullar karşılandığında bunu tanımasını sağlayacak kurallar belirleyebilirsiniz. Bu yöntem, içerik komut dosyasından daha verimlidir ve daha az kod kullanır.

Bir uzantının, HTML5 <video> öğesi içeren bir siteyi ziyaret eden kullanıcıya sayfa işlemi göstermesi gerekiyorsa bildirim temelli bir kural belirtebilir.

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

Kod verimliliğini değerlendirme

Web sitesi performansıyla ilgili genel uygulamaların aynısı, eşzamansız programlama tekniklerini uygulama ve kodu minimum ve kompakt tutma gibi uzantılar için de geçerlidir.

Bir uzantının performansını değerlendirmek ve görsel uzantı sayfalarında iyileştirilebilecek alanları hedeflemek için Lighthouse gibi araçları kullanın.