Search code examples
google-chrome-extension

"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?

Solution

  • 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