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

Biểu tượng yêu thích (viết tắt của "Favorite biểu tượng") là một biểu tượng nhỏ xuất hiện trong 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 trong phần mở rộng Tệp kê khai V3.

Truy cập vào biểu tượng của một trang web

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

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
Mã của phần mở rộng.
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 tiện ích 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, thư mục "_favicon/*" phải được khai báo 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 đây sử dụng runtime.getURL() để tạo một URL đủ điều kiện trỏ đến thư mục "_favicon/". Sau đó, hàm này sẽ trả về một chuỗi mới đại diện cho URL có một số 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);

Ví dụ này là URL của biểu tượng trang web www.google.com 32px có chứa 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ề phần mở rộng

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