Tom
Tom

Reputation: 794

How can I get the bookmark icon in chrome?

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

Answers (4)

Luke Vo
Luke Vo

Reputation: 20638

Since MV3, you can no longer use chrome://favicon/. Instead you need the new Favicon Permission:

Add favicon to your permission

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

Access the favicon URL

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

user3444693
user3444693

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

  1. 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

  2. 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

Renārs Vilnis
Renārs Vilnis

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

Pixievolt No. 1
Pixievolt No. 1

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

Related Questions