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

Một biểu tượng trang web (viết tắt của "biểu tượng yêu thích") 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 của một trang web trong tiện ích Manifest V3.

Truy cập vào biểu tượng trang web của một 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ã của tiện ích.
EXAMPLE_URL
URL của trang web có 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"],
  ...
}

Biểu tượng trang web được coi là tài nguyên theo nguồn gốc của tiện ích. Để hiển thị các biểu tượng này trên web, kể cả khi bạn sẽ chèn các biểu tượng này vào một trang web từ tập lệnh nội dung, bạn phải khai báo các biểu tượng này 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 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, ứng dụng tiện ích sẽ thêm hình ảnh vào nội dung. 

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

Ví dụ này là URL biểu tượng trang web 32px www.google.com 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ó 2 ví dụ về biểu tượng trang web trong kho lưu trữ chrome-extension-samples: