Tìm nạp biểu tượng trang web

Biểu tượng yêu thích (viết tắt của "biểu tượng yêu thích") là một biểu tượng nhỏ hiển thị trên thanh địa chỉ của trình duyệt. Biểu tượng trang web thường được dùng để xác định và phân biệt các trang web. Bài viết này mô tả cách truy xuất biểu tượng trang web của trang web trong tiện ích Manifest V3.

Truy cập biểu tượng trang web

Để truy xuất biểu tượng trang web của một trang web, bạn cần tạo URL sau:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Mã tiện ích của bạn.
EXAMPLE_URL
URL của trang web của biểu tượng trang web.
FAV_SIZE
Kích thước của biểu tượng trang web. Kích thước phổ biến nhất là 16 x 16 pixel.

Các bước sau đây mô tả cách tạo URL này trong một tiện ích của Chrome:

Bước 1: cập nhật tệp kê khai

Trước tiên, bạn phải yêu cầu quyền "favicon" trong tệp kê khai.

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

Ngoài ra, khi tìm nạp biểu tượng trang web trong tập lệnh nội dung, bạn phải khai báo thư mục "_favicon/*" là tài nguyên có thể truy cập trên web. Ví dụ:

{
  "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": ["*"]
    }
  ]
  ...
}

Bước 2: tạo URL

Hàm sau sử dụng runtime.getURL() để tạo một URL đủ điều kiện trỏ đến thư mục "_favicon/". Sau đó, phương thức này trả về một chuỗi mới đại diện cho URL chứa một vài tham số truy vấn. Cuối cùng, tiện ích này sẽ thêm hình ảnh vào phần nội dung. 

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

Dưới đây là ví dụ về URL biểu tượng trang web www.google.com 32 px bao gồm một mã tiện ích ngẫu nhiên:

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

Ví dụ về tiện ích

Có hai ví dụ về biểu tượng trang web trong kho lưu trữ chrome-extension-samples: