파비콘('즐겨찾기 아이콘'의 줄임말)은 브라우저의 주소 표시줄에 표시되는 작은 아이콘입니다. 파비콘은 일반적으로 웹사이트를 식별하고 구분하는 데 사용됩니다. 이 도움말에서는 Manifest V3 확장 프로그램에서 웹사이트의 파비콘을 검색하는 방법을 설명합니다.
웹사이트의 파비콘에 액세스
웹사이트의 파비콘을 가져오려면 다음 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/*"
폴더를 웹 액세스 가능 리소스로 선언해야 합니다. 예를 들면 다음과 같습니다.
{
"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
32픽셀 파비콘 URL입니다.
chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32
확장 프로그램 예
chrome-extension-samples 저장소에는 두 가지 파비콘 예가 있습니다.