En yüksek performansa ulaşın

Uzantılar, tarayıcıya ek bir bileşendir ve tamamlayıcı nitelikte ve özelleştirilmiş uzantılar sağlamak üzere tasarlanmıştır. işlevi görür. Göz atma deneyimini yavaşlatan veya bozan bir uzantı, tarayıcı için sorunludur kullanıcısını ve sayacını Chrome uzantısı hedefine göre ayarlayın. Genel iyi kodlama alışkanlıklarının yanı sıra, Geliştiriciler, uzantılarının en iyi performansla çalıştığından emin olmak için bu uygulamaları izlemelidir.

Mümkün olan her şeyi ertele

İhtiyaç duyulana kadar kaynakları yüklemekten kaçının. Yalnızca bir dosyayı açmak için gerekenleri ekleyin uzantısını başlangıç işlevine ekleyin. Başlatma sırasında yalnızca önce bir düğmeyi tıklamadan oturum açtığında çalışan özellikleri veya özellikleri şansına sahip olur.

Önemli etkinlikleri yönetin

Etkili bir arka plan komut dosyası, kullanıcının etkinlikleri için önemli olan kayıtlı uzantısına sahip olur. Dinleyici tetiklenene kadar hareketsiz kalırlar, buna göre hareket ederler ve daha sonra etkin olmayan duruma geri dönerler. durumu. Gereksiz bir komut dosyasının çalışmasını sağlamak için sistem kaynakları zorlanır.

Arka plan komut dosyaları, aşağıdaki durumlarda kalıcılıkları false (yanlış) olarak ayarlanmış şekilde manifeste kaydedilmelidir. yapmasını sağlar.

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

Bir arka plan komut dosyasını sürekli olarak etkin tutmanın tek yolu, Ağ isteklerini engellemek veya değiştirmek için chrome.webRequest API. webRequest API uyumlu değil sayfaların kalıcı olmasını sağlayın.

{
  "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çer

İçerik komut dosyaları bir uzantının gizli aracıları olarak çalışmalıdır, Daha ağır mantık çalışması için uzantı çekirdeğinden yararlanırken web sayfasını değiştirmek. Ayrıca, Alakasız sayfalardaki istilacı etkinlikleri önlemek için net hedefler. İdeal olarak, içerik komut dosyaları fark edilmemesini sağlar.

Hedefleri bildirme

İçerik komut dosyalarını gereksiz yerlerde veya uygun olmayan zamanlarda çalıştıran bir uzantı, tarayıcının yavaşlamasına ve işlev hatalarına yol açabilir. Bunu önlemek için eşleşen kalıpları çalıştırıp komut dosyasını document_start yerine document_idle konumunda çalıştırmanız gerekir.

{
  "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ı işlemini içeren bir web sayfasına erişmesi gerekiyorsa uzantının yerleştirilmesini sağlayın programatik olarak kullanılabilir. Programatik yerleştirme işlemi 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şlevi yerine getirmek için içerik komut dosyasına ihtiyaç duymayabilir. Her bir declarativeContent API, uzantının uygun koşulları tanıması için kurallar ayarlar karşılanıyor. Bu yöntem, içerik komut dosyasına göre daha verimlidir ve daha az kod kullanır.

Bir uzantının, HTML5 içeren bir siteyi ziyaret eden kullanıcıya sayfa işlemi göstermesi gerekiyorsa <video> öğesi, 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, ve kodu minimal ve kompakt tutmasına yardımcı olur.

Uzantıların performansını değerlendirmek ve görsel uzantı sayfalarını iyileştirebilir.