Javascript 在内容脚本中使用@import'；s关联CSS

我正在构建一个chrome扩展，其中包含一个链接到CSS文件的内容脚本。这是我的清单文件：

{
  "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"
  ]
}

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"

这些是

样式的内容。css

：

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.testClass {
  font-family: Pacifico;
}

如您所见，我正在尝试将google字体导入到CSS文件中。但是，字体似乎没有加载，因为当我尝试使用此字体时，通过使用内容脚本将

testClass

应用于某个文本元素，没有任何变化（如果我使用任何其他标准web字体，它就可以工作）

可能是chrome不允许在扩展上下文中执行

@import

我试图将以下行添加到清单文件：

{
  "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"
  ]
}

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"

但这没用

我做错了什么

---

谢谢。

您应该将

@import

放在样式块的顶部，否则它将无法工作。事实证明，避免

@import

对性能也有好处。而不是使用

标记

@import

。它位于样式块的顶部。。。或者我遗漏了什么？可能重复了您是否尝试过将

@import

更改为使用

https

或

/

而不是

http

或使用