如何獲取chrome中的書簽圖標？

Question

我用的時候：

<img src="chrome://favicon/http://www.google.com.hk"/>

在我的擴展中。它出了問題。它警告說

“不允許加載本地資源：chrome：// favicon / http：//www.google.com.hk”

我該如何解決？

Answer 1

仔細檢查以確保您已添加"chrome://favicon/" 權限 。

這是一個"manifest_version" : 2擴展？ 我不熟悉它們，但它們可能要求您指定允許此操作的內容安全策略 。

Answer 2

我遇到了同樣的問題。 我試過看看chrome：// favicon /只能使用擴展程序自己的頁面，例如彈出窗口或擴展程序創建的標簽。 如果從注入的內容腳本中將其加載到常規選項卡中，則它不起作用。

如果要從注入的內容腳本加載favicon，有幾種方法

1. 第一個是使用對某些服務的請求來獲取網絡的圖標。 例如： http ： //www.google.com/s2/favicons？domain = http：//stackoverflow.com/這種方式正常，但內容腳本是通過https加載的頁面中注入的。 原因是混合內容阻止

2. 第二個是從chrome：// favicon /后台加載favicon，然后轉移到內容腳本。

示例：此函數用於在后台腳本中運行

function fetchFavicon(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width =this.width;
            canvas.height =this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);

            var dataURL = canvas.toDataURL("image/png");
            resolve(dataURL);
        };
        img.src = 'chrome://favicon/' + url;
    });
}

我正在使用這種方式進行擴展，它運行正常。 請查看Super Focus Tabs擴展程序。

Answer 3

有同樣的問題，在搜索谷歌開發者網站后發現你需要在manifest.json添加chrome://favicon/的權限。

然后轉到chrome://extensions並按下重新加載以讀取清單更改。

注意：尾部斜杠很重要！