"Not allowed to load local resource: chrome://favicon/..." after migrating to manifest V3

Question

I'm getting the error

Not allowed to load local resource: chrome://favicon/size/16@1x/https://google.com/

This happened when I tried to migrate a manifest for a chrome extension from v2 to v3.

I need to fetch favicons for bookmarked links, but unable to load local resource. How do I fix it?

{
   "background": {
      "service_worker": "./src/background.js"
   },
   "action": {
      "default_popup": "./src/popup.html",
      "default_title": "Minimal Homepage"
   },
   "chrome_url_overrides": {
      "newtab": "./src/new-tab-page.html"
   },
   "description": "Minimal new tab page",
   "icons": {
      "128": "src/images/icon/icon_128.png",
      "16": "src/images/icon/icon_16.png",
      "32": "src/images/icon/icon_32.png",
      "48": "src/images/icon/icon_48.png"
   },
   "manifest_version": 3,
   "name": "Minimal Homepage",
   "permissions": [ "bookmarks", "storage", "sessions", "tabs", "favicon" ],
   "web_accessible_resources": [
      {
        "resources": ["_favicon/*"],
        "matches": ["<all_urls>"],
        "extension_ids": ["*"]
      }
    ],
   "version": "1.0"
}

    /* append (almost) every tab */
      for (let tab of tabs) {
        let element = el(
          'div.link.truncate',
          el(
            'div.favicon',
            el(
              'img',
              {
                src: `chrome://favicon/size/16@1x/${tab.url}`,
                srcset: `
                  chrome://favicon/size/16@1x/${tab.url},
                  chrome://favicon/size/16@2x/${tab.url} 2x
                `
              }
            )
          ),
          tab.deviceName + ' › ' + tab.title,
          {
            href: '#',
            title: tab.title,
            'data-type': 'shortcut',
            click: () => {
              chrome.sessions.restore(tab.sessionId)
            },
            dragstart: (event) => {
              event.dataTransfer.setData('text/plain', tab.url)
            }
          }
        )

        if (box.children.length < 5) {
          box.appendChild(element)
        }
      }

I've tried following Google documentation about migrating from v2 to v3, but it hasn't worked.

I expect this to fetch favicons for bookmarked links, but I'm unable to load local resource.

Answer 1

In Manifest V3, the way favicons are loaded has changed slightly. There's a full guide for migrating here: https://developer.chrome.com/docs/extensions/mv3/favicon/.

As a TLDR, you'll want to request the favicon permission in your manifest. Then, if you need to load the favicons in to non-extension pages, you'll need to expose the URL under web_accessible_resources in your manifest:

"web_accessible_resources": [
  {
    "resources": ["_favicon/*"],
    "matches": ["<all_urls>"],
    "extension_ids": ["*"]
  }
]

You should then be able to load favicons as follows:

chrome-extension://[YOUR_EXTENSION_ID]/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32