Site simgeleri getiriliyor

Favicon ("favori simgesi"nin kısaltması), tarayıcının adres çubuğunda gösterilen 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 favori simgesi nasıl alınacağı açıklanmaktadır.

Bir web sitesinin simgesine erişme

Bir web sitesinin favicon'unu 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, manifestte "favicon" iznini istemeniz gerekir.

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

Ayrıca, içerik komut dosyalarında yer simgelerini getirirken "_favicon/*" klasörü web'e erişilebilir kaynak olarak tanımlanmalıdır. Ö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üne işaret eden tam nitelikli bir URL oluşturmak için runtime.getURL() kullanır. Ardından, URL'yi temsil eden ve çeşitli sorgu parametrelerine sahip 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 vardır: