Site simgeleri getiriliyor

Favicon ("sık kullanılan simge"nin kısaltması), tarayıcının adres çubuğunda görüntülenen küçük bir simgedir. Site simgeleri genellikle web sitelerini tanımlamak ve ayırt etmek için kullanılır. Bu makalede, Manifest V3 uzantısında bir web sitesinin site simgesinin nasıl alınacağı açıklanmaktadır.

Bir web sitesinin site simgesine erişme

Bir web sitesinin site simgesini almak için aşağıdaki URL'yi oluşturmanız gerekir:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Uzantınızın kimliği.
EXAMPLE_URL
Site simgesinin web sitesinin URL'si.
FAV_SIZE
Site simgesinin boyutu. En yaygın boyut 16 x 16 pikseldir.

Aşağıdaki adımlarda, bu URL'nin bir Chrome uzantısında nasıl oluşturulacağı açıklanmaktadır:

1. adım: Manifest dosyasını güncelleyin

Öncelikle manifest dosyasında "favicon" iznini istemeniz gerekir.

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

Favicon'lar, uzantınızın kaynağı altındaki kaynaklar olarak değerlendirilir. Bunları web'e göstermek için (bir içerik komut dosyasından web sayfasına ekleyecekseniz de) web'den erişilebilen kaynaklar olarak tanımlamanız gerekir. Örneğin:

{
  "name": "Favicon API in content scripts",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["favicon"],
  "web_accessible_resources": [
    {
      "resources": ["_favicon/*"],
      "matches": ["<all_urls>"],
      "extension_ids": ["*"]
    }
  ]
  ...
}

2. adım: URL'yi oluşturun

Aşağıdaki işlev, "_favicon/" klasörünü işaret eden tam nitelikli bir URL oluşturmak için runtime.getURL() kullanır. Ardından, URL'yi birkaç sorgu parametresiyle temsil eden yeni bir dize döndürür. Son olarak, uzantı resmi gövdeye ekler. 

function faviconURL(u) {
  const url = new URL(browser.runtime.getURL("/_favicon/"));
  url.searchParams.set("pageUrl", u);
  url.searchParams.set("size", "32");
  return url.toString();
}

const img = document.createElement('img');
img.src = faviconURL("https://www.google.com") 
document.body.appendChild(img);

Bu örnek, rastgele bir uzantı kimliği içeren www.google.com 32 piksellik bir site simgesi URL'sidir:

chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32

Uzantı örnekleri

chrome-extension-samples deposunda iki favicon örneği vardır: