CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Andre Pena
Andre Pena

Reputation: 59336

Chrome Extension: Not allowed to load local resource

I'm creating a chrome extension to modify a website, and I'm having trouble loading a web-font.

After my webpack build, I generate a dist folder. Inside this folder, I have a main.css that contains this:

@font-face {
  font-family: 'FontAwesome';
  src: url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.eot);
  src: url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.eot?#iefix&v=4.6.3) format('embedded-opentype'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff2) format('woff2'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff) format('woff'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.ttf) format('truetype'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

This is my webpack publicPath:

chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle

All files are on the dist folder.

This is my relevant manifest configuration:

"web_accessible_resources": [
    "fontawesome-webfont.eot",
    "fontawesome-webfont.svg",
    "fontawesome-webfont.ttf",
    "fontawesome-webfont.woff",
    "fontawesome-webfont.woff2"
  ],

PS: I've tried everything on the web_accessible_resources section, including *.[format], *.* and others.

This is the error I get:

Not allowed to load local resource: chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff2

Screenshot:

https://i.sstatic.net/dBTi4.png

This is the dist folder I set as the extension root directory:

https://i.sstatic.net/yItCE.png

What may I be doing wrong?

Upvotes: 3

Views: 2396

Answers (1)

woxxom
woxxom

Reputation: 73596

The correct scheme is chrome-extension://.
See also i18n API for the list of allowed constants in JS/CSS files:

The special message @@extension_id can be used in the CSS and JavaScript files, whether or not the extension or app is localized. This message doesn't work in manifest files.

@font-face {
  font-family: 'FontAwesome';
  src: url(chrome-extension://__MSG_@@extension_id__/fontawesome-webfont.eot);
  /* ............. */
}

Upvotes: 2

Related Questions