파비콘을 가져오는 중

파비콘('즐겨찾기 아이콘'의 줄임말)은 브라우저의 주소 표시줄에 표시되는 작은 아이콘입니다. 파비콘은 일반적으로 웹사이트를 식별하고 구분하는 데 사용됩니다. 이 도움말에서는 Manifest V3 확장 프로그램에서 웹사이트의 파비콘을 검색하는 방법을 설명합니다.

웹사이트의 파비콘에 액세스

웹사이트의 favicon을 가져오려면 다음 URL을 구성해야 합니다.

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
확장 프로그램의 ID입니다.
EXAMPLE_URL
파비콘 웹사이트의 URL입니다.
FAV_SIZE
파비콘의 크기입니다. 가장 일반적인 크기는 16 x 16픽셀입니다.

다음 단계에서는 Chrome 확장 프로그램에서 이 URL을 구성하는 방법을 설명합니다.

1단계: 매니페스트 업데이트

먼저 매니페스트에서 "favicon" 권한을 요청해야 합니다.

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

또한 콘텐츠 스크립트에서 favicon을 가져올 때 "_favicon/*" 폴더를 웹 액세스 가능한 리소스로 선언해야 합니다. 예를 들면 다음과 같습니다.

{
  "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단계: URL 구성

다음 함수는 runtime.getURL()를 사용하여 "_favicon/" 폴더를 가리키는 정규화된 URL을 만듭니다. 그런 다음 여러 쿼리 매개변수가 포함된 URL을 나타내는 새 문자열을 반환합니다. 마지막으로 확장 프로그램은 이미지를 본문에 추가합니다. 

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);

다음은 임의의 확장 프로그램 ID가 포함된 www.google.com 32px 파비콘 URL의 예입니다.

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

확장 프로그램의 예

chrome-extension-samples 저장소에는 두 가지 favicon 예가 있습니다.