CODEWITHSUNDEEP
google-chrome-extension
Jonah Katz
Jonah Katz

Reputation: 5288

"Not allowed to load local resource: chrome://favicon/"

Im trying to load a url's favicon using chromes favicon url: 

<img class='icon' src='chrome://favicon/yahoo.com' />

But im getting the error :

"Not allowed to load local resource: chrome://favicon/yahoo.com"

And in the manifest i have:

  "permissions": [
    "chrome://favicon/"
],

There isnt much available online about this topic. Any suggestions?

Upvotes: 6

Views: 11657

Answers (6)

Profesor08
Profesor08

Reputation: 1258

Unfurtunely it will not work as it was in manifest v2. You have to use it differently.

Method 1 (lazy)

https://www.google.com/s2/favicons?domain=https://stackoverflow.com/

Method 2 (official)

manifest.json

  "permissions": [
    "favicon"
  ],

export const favicon = (pageUrl: string, size: number = 24) => {
  const url = new URL(`chrome-extension://${chrome.runtime.id}/_favicon/`);
  url.searchParams.append("pageUrl", pageUrl);
  url.searchParams.append("size", size.toString());

  return url.href;
};


favicon("https://stackoverflow.com/");

Additionaly add loading="lazy" attribute for you image, to prevent hundreds request.

Upvotes: 0

msaidzengin
msaidzengin

Reputation: 1

You can now use favicon as the permission with _favicon/?pageUrl=${url}&size=32 to load icons

Here is an example

Upvotes: 0

myat myat
myat myat

Reputation: 1

Well, I know it's an old post but for those who are here to find this answer, why it is showing like this is basically because chrome://favicon/ and chrome://favicon/* both should be added in your mainfest.json

"permissions": ["chrome://favicon/", "chrome://favicon/*"]

NOTICE: mainfest v3 will have API dedicated to this but for now we don't have much blogs on that and also mainfest v2 will be no longer supported after 2023.

Upvotes: 0

Wizek
Wizek

Reputation: 4993

Just ran into this issue and both

"permissions": ["chrome://favicon/"] and "permissions": ["chrome://favicon/*"]

worked as expected.

Chrome version 52.0.2743.116

Upvotes: 0

Sudarshan
Sudarshan

Reputation: 18534

Problems in your code

  • "permissions": ["chrome://favicon/"], is an invalid pattern in manifest file

If you want to use the URL of the tab's favicon use chrome.tabs API in extension pages.

Demonstration

manifest.json

Registered background page and added necessary permissions.

{
    "name": "Fav Icon",
    "description": "http://stackoverflow.com/questions/14800881/not-allowed-to-load-local-resource-chrome-favicon",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

background.js

chrome.tabs.query({
    "active": true,//fetch active tabs
    "currentWindow": true,//fetch tabs in current window
    "status": "complete",//fetch completely loaded windows
    "windowType": "normal"//fetch normal windows
}, function (tabs) {
    for (tab in tabs) {
        console.log(tabs[tab].favIconUrl);// Use this URL as needed
    }
});

chrome.tabs.query will work in extension pages, if you want to use in content scripts use message passing to communicate URL.

References

Upvotes: 6

Josh Lee
Josh Lee

Reputation: 177614

The URL needs to include the scheme as well:

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

Upvotes: 1

Related Questions