Reputation: 794
when I use:
<img src="chrome://favicon/http://www.google.com.hk"/>
in my extension.It got something wrong.It warned
"Not allowed to load local resource:chrome://favicon/http://www.google.com.hk"
How can I fix it?
Upvotes: 9
Views: 4684
Reputation: 20638
Since MV3, you can no longer use chrome://favicon/
. Instead you need the new Favicon Permission:
favicon
to your permission{
"name": "Favicon API in a popup",
"manifest_version": 3,
...
"permissions": ["favicon"],
...
}
For my simple case:
const favIconUrl = `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;
From their example:
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);
Note: when fetching favicons in content scripts, the "_favicon/*" folder must be declared as a web accessible resource. For example:
"web_accessible_resources": [
{
"resources": ["_favicon/*"],
"matches": ["<all_urls>"],
"extension_ids": ["*"]
}
]
Upvotes: 3
Reputation: 454
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
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
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.
Upvotes: 4
Reputation: 1221
Had the same issue, found out after searching on google developers site that you need to add a permission to the chrome://favicon/
in the manifest.json
.
Then just go to chrome://extensions
and press the reload to read manifest changes.
Note: the trailing slash is important!
Upvotes: 3
Reputation: 815
Double-check to make sure you've added the "chrome://favicon/"
permission.
Is this a "manifest_version" : 2
extension? I'm not familiar with them, but they may require that you specify a Content Security Policy that allows this.
Upvotes: 5