Cannot access local resources using an iframe injected from my Chrome extension
Tamar Yankelevich
I am new to chrome extensions and would like some help.
I want to style the font of an iframe that I inject from my chrome extension.
As a first step, I tried to add a link to Google Fonts in the iframe's head tag:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">
But got the following error:
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://app.getbeamer.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
I tried adding CSP to the meta tag/to the manifest file, but it did not help,
So, I wanted to host google fonts locally.
I downloaded the required files from here, and import font-face with src url to those files, e.g:
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('chrome-extension://extension_id/../fonts/open-sans-v29-latin- regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('chrome-extension://extension_id/../fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
I also included those files in the web_accessible_resources section in my manifest.json.
None of these attempts helped me import the fonts file properly.
I get the following err in the console:
Failed to load resource: net::ERR_FAILED
And of course, the font is not displaying as expected.
I searched for articles related to Chrome extensions and iframes, but couldn't find a viable workaround solution.
Any help will be appreciated!
I create the Iframe like this:
const frame = document.createElement('iframe');
frame.srcdoc = `
<!doctype html>
<html>
<head>
<style>
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('chrome-extension://extension_id/../fonts/open-sans-v29-latin- regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('chrome-extension://extension_id/../fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
.example{
font-family: 'Open Sans';
}
</style>
</head>
<body>
<div class="example">
an example
</div>
</body>
`;
