Display a favicon in a Chrome extension newtab page using manifest v3

user_1645925 0
Viewed 809

I have recently migrated my chrome extension to manifest v3 using this guide: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

The v3 manifest.json file no longer supports using chrome://favicon/. Looking through the documentation I could not find an alternative. There were some articles I found that said it might be moved to a new favicon permission and be available under the google.favicon namespace. However they were all older and speculative, I tried these speculations to no avail.

manifest.json google-chrome-extension
3 Answers

it seems like they forget to build this api, you can star this issue on the page or leave a comment to tell them.

user_106994310

The new API was just released as part of Chrome 104!

To use it, first add the favicon permission to your manifest.json:

{
    ...
    "permissions": ["favicon"],
    ...
}

Then you can load the favicon using your chrome extension's id, for example:

const faviconSrc = `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;
user_29466340

Issue 104102: Create a new API permission for access to favicons was fixed on June 13, 2022.

chrome://favicon Replacement for Extensions document mentions the API:

var faviconUrl = new URL('chrome-extension://<id>/_favicon');
faviconUrl.searchParams.append('page_url', 'http://example.com');
let image = document.createElement('img');
image.src = faviconUrl.href;
// src is 'chrome-extension://<id>/?page_url=http%3A%2F%2Fexample.com%2F'

Note that there's a mistake on the last line. It should be:

// src is 'chrome-extension://<id>/_favicon?page_url=http%3A%2F%2Fexample.com%2F'

Unfortunately, I still hasn't been able to get this API working on Chrome Canary 105.0.5174.0, which should include the changes from the resolved bug already. I'm getting Failed to load resource: net::ERR_FAILED errors.

user_161850
Related