Site simgeleri getiriliyor

Sık kullanılan simgesi ("favori simgesi"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'i güncelleyin

Öncelikle manifest'te "favicon" iznini istemeniz gerekir.

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

Ayrıca, içerik komut dosyalarında site simgeleri getirilirken "_favicon/*" klasörünün web'de erişilebilen kaynak olarak beyan edilmesi 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şturma

Aşağıdaki işlev, "_favicon/" klasörüne işaret eden tam nitelikli bir URL oluşturmak için runtime.getURL() özelliğini 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(chrome.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 32 piksellik bir www.google.com site simgesi URL'sidir:

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

Uzantı örnekleri

chrome-extension-samples deposunda iki site simgesi örneği bulunmaktadır: