En yüksek performansa ulaşın

Tarayıcıya yapılan bir ek uzantı olan uzantılar, ek ve özelleştirilmiş işlevler sunmak üzere tasarlanmıştır. Göz atma deneyimini yavaşlatan veya bozan bir uzantı, kullanıcı açısından sorun oluşturur ve Chrome uzantısının hedefine aykırıdır. Geliştiricilerin, uzantılarının en üst düzeyde çalıştığından emin olmak için genel kodlama alışkanlıklarının yanı sıra bu uygulamaları da izlemesi gerekir.

Mümkün olan her şeyi erteleyin

İhtiyaç duyulana kadar kaynakları yüklemekten kaçının. Bir uzantıyı başlangıç işlevine açmak için gerekenleri ekleyin. Başlatma sırasında yalnızca kullanıcı bir düğmeyi tıkladığında ihtiyaç duyulan şeyleri veya yalnızca kullanıcı henüz fırsat bulmadan giriş yaptığında çalışan özellikleri yüklemeyin.

Önemli etkinlikleri yönetme

Verimli bir arka plan komut dosyası, uzantıları için önemli olan kayıtlı etkinlikleri içerir. Bir dinleyici tetiklenene kadar hareketsiz kalır, buna göre hareket eder ve daha sonra hareketsiz duruma geri dönerler. Gereksiz bir komut dosyasının çalışmaya devam etmesi için sistem kaynakları boşalır.

Arka plan komut dosyaları, mümkünse kalıcılığı "false" (yanlış) değerine ayarlanmış olarak manifest dosyasına kaydedilmelidir.

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

Arka plan komut dosyasını kalıcı olarak etkin tutmak için tek durum, uzantının ağ isteklerini engellemek veya değiştirmek için chrome.webRequest API 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çerme

İçerik komut dosyaları, bir uzantının gizli aracıları olarak çalışmalı ve daha ağır mantık çalışması için uzantı çekirdeğine güvenirken web sayfasını fark etmeden okumalı veya değiştirmelidir. Alakasız sayfalardaki istilacı etkinlikleri önlemek için net hedefleri olmalıdır. İdeal olarak, içerik komut dosyalarının, göz atma deneyiminde kasıtlı davranışların dışında fark edilmemesi gerekir.

Hedef beyan etme

İçerik komut dosyalarını gereksiz yerlerde veya uygun olmayan zamanlarda çalıştıran bir uzantı, tarayıcının yavaşlamasına ve işlevsellik hataları oluşturmasına neden olabilir. Manifest'te eşleşme kalıpları sağlayarak ve komut dosyasını document_start yerine document_idle adresinde çalıştırarak bunu önleyin.

{
  "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 eylemiyle bir web sayfasına erişmesi gerekiyorsa programatik şekilde yerleştirilmesini sağlayın. Programlı yerleştirme yalnızca bir 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şlevi sağlamak için içerik komut dosyasına hiç ihtiyaç duymayabilir. declarativeContent API kullanıldığında, uzantının ilgili koşullar karşılandığında bunu algılaması için kurallar belirlenir. Bu yöntem, içerik komut dosyasından daha verimlidir ve daha az kod kullanır!

Bir uzantının, kullanıcı HTML5 <video> öğesine sahip bir siteyi ziyaret ettiğinde kullanıcıya bir sayfa işlemi görüntülemesi 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ı için aynı genel uygulamalar, eşzamansız programlama teknikleri uygulama ve kodu minimum ve kompakt tutma gibi uzantılara da uygulanabilir.

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