I'm building a chrome extension which includes a content script that is linked to a CSS file. That's my manifest file:
{
"manifest_version": 2,
"name": "Cool name",
"version": "1.0",
"permissions": [
"http://*/*",
"https://*/*",
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"jquery.js",
"contentScript.js"
],
"css": [
"styles.css"
]
}
],
"web_accessible_resources": [
"styles.css"
]
}
These are the contents of styles.css
:
@import url(http://fonts.googleapis.com/css?family=Pacifico);
.testClass {
font-family: Pacifico;
}
As you can see, i'm trying to import a google font into my CSS file. However, the font doesn't seem to get loaded, because when I try to use this font, by applying testClass
to some text element using the content script, nothing changes (If I use any other standard web font it works).
May it be that chrome won't let @import
to execute in the extension context?
I tried to add the following line to my manifest file:
"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"
But it didn't help.
What am I doing wrong?
Thanks.