|
攜手創(chuàng)作，共同成長！這是我參與「掘金日新計(jì)劃 · 8 月更文挑戰(zhàn)」的第 10 天，點(diǎn)擊查看活動(dòng)詳情
最近在開發(fā)一個(gè) chrome 插件，其中需要讀取到對應(yīng)網(wǎng)站的 favicon 圖標(biāo)，遇到一些問題記錄一下。
太長不看的可以直接跳到最后總結(jié)部分。
幾種常用方案
chrome favicon
格式： chrome://favicon/<url>
chrome://favicon/ 可以獲取到對應(yīng)網(wǎng)站在 當(dāng)前 chrome 中 的使用 favicon 圖標(biāo)，對應(yīng)著該網(wǎng)站在書簽欄的圖標(biāo)或上次打開時(shí)的圖標(biāo)。圖標(biāo)使用的是 chrome 本地的緩存，所以速度很塊。
但是該方案無法使用在網(wǎng)頁中，chrome 會(huì)提示 Not allowed to load local resource。只可用于 chrome 插件中，并且需要為 v2 版本的 manifest 添加 permissions: ["chrome://favicon/"]，v3 版本 目前還沒有替代方案。
google favicons
格式：https://www.google.com/s2/favicons?domain=<url>&size=<size>
www.google.com/s2/favicons 可使用 google 服務(wù)來獲取對應(yīng)網(wǎng)站的 favicon 圖標(biāo)，url 是網(wǎng)頁的完整 URL 地址，無需轉(zhuǎn)化為域名，并且如果同域名網(wǎng)站有多個(gè) favicon，可以獲取到對應(yīng)的 icon，還可自定義 icon 尺寸。
不過由于某些不可說的原因，對網(wǎng)絡(luò)存在要求。
duckduckgo icons
格式：https://icons./ip3/<domain>.ico
icons. 和 google favicons 服務(wù)類似，不過只能獲取域名下的 favicon，無法精確到 url。
直接獲取域名對應(yīng)的 favicon 圖標(biāo)
格式：https://<domain>/favicon.ico
由于大部分的網(wǎng)站都會(huì)使用 favicon 的默認(rèn)路徑，所以可以直接拼接獲取域名對應(yīng)的 favicon 圖標(biāo)。只是簡單的場景可以嘗試使用。
腳本
get url 對應(yīng)的 html，然后 parse 出 url 中的 favicon 配置的 url，即可獲取到對應(yīng)的 favicon 圖標(biāo)。
const html = await fetch(url).then(res => res.text());
const favicon = html.match(/<link rel="icon" href="(.*?)"/)[1];
代碼只是舉例說明，并不嚴(yán)謹(jǐn)。
方案總結(jié)
| 方案 | 預(yù)覽 | 格式 | 自定義大小 | 支持任意 URL（無需轉(zhuǎn)換為域名） | 優(yōu)勢 | 劣勢 |
|---|
chrome://favicon/ | 無法預(yù)覽 | chrome://favicon/<url> | ? | ?? | 本地緩存，速度快 | 使用場景過于局限，只適用于使用 v2 manifest 的 chrome 插件 | www.google.com/s2/favicons |  | https://www.google.com/s2/favicons?domain=<url>&size=<size> | ?? | ?? | 精確到 url、支持修改大小 | 國內(nèi)訪問受限 | icons. |  | https://icons./ip3/<domain>.ico | ? | ?? | 可用性高 | 使用場景過于局限，只適用于使用 v2 manifest 的 chrome 插件 | | 直接獲取域名對應(yīng)的 favicon 圖標(biāo) |  | https://<domain>/favicon.ico | ? | ? | 簡單 | 遇到自定義地址就躺 | | 腳本 | 無 | 無 | ? | ?? | 不依賴于外部服務(wù)，自食其力 | 需要開發(fā)成本，需要后端開發(fā)去獲取 |
參考資料
都到看這了真不打算不點(diǎn)個(gè)贊嗎 ??
|
