ファビコンを取得しています

ファビコン（「お気に入りアイコン」の略）は、ブラウザのアドレスバーに表示される小さなアイコンです。ファビコンは通常、ウェブサイトを識別して区別するために使用されます。この記事では、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"],
  ...
}

ファビコンは、拡張機能のオリジンのリソースとして扱われます。コンテンツ スクリプトからウェブページに挿入する場合など、ウェブに公開するには、ウェブからアクセス可能なリソースとして宣言する必要があります。次に例を示します。

{
  "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(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);

この例は、ランダムな拡張機能 ID を含む www.google.com 32px ファビコン URL です。

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

拡張機能の例

chrome-extension-samples リポジトリには、ファビコンの例が 2 つあります。