javascript - 如何在 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

I met the same problem. I tried and see that chrome://favicon/ only work with extension own pages such as popup or tabs your extension created. It doesn't work if you load it in the normal tabs from injected content script.

There are several ways if you want to load favicon from injected content script

1. The first ones is to use request to some sevices to get favicon of a web. For an example: http://www.google.com/s2/favicons?domain=https://stackoverflow.com/ This way works fine except the content script is injected in pages which are loading via https. The reason is due to Mixed Content blocking

2. The second ones is to load favicon in background from chrome://favicon/ then transfer to content script.

Example: This function is used to run in background script

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

I'm using this way for my extension, and it's working fine. Please take a look at Super Focus Tabs extension.

Answer 3

有同样的问题，在谷歌开发者网站上搜索后发现你需要chrome://favicon/在manifest.json.

然后只需转到chrome://extensions并按重新加载即可读取清单更改。

注意：斜线很重要！