クロムエクステンションでCSSをオーバーライド

Question

クロムエクステンションを開発して、特定のウェブサイトでCSSスタイルをオーバーライドすることができます。

manifest.jsonを：

{ 
    "manifest_version": 2, 

    "name": "Modify CSS and HTML", 
    "version": "0.1.0", 
    "description": "Lateral blog post demo extension", 

    "content_scripts": [{ 
    "css": ["styles.css"], 
    "matches": ["http://www.record.pt/*"] 
    }] 

} 

Styles.cssを：

@import url('https://fonts.googleapis.com/css?family=Indie+Flower'); 

.thumb-info h3 { 
    font-family: 'Indie Flower', cursive !important; 
} 

私はGoogleのフォントを動作させることはできません

だからここにファイルです。それは筆記体の種類を想定していますが、Googleフォントは想定していません。 Chromeバージョン60.0.3112.113（公式ビルド）（64ビット版）を使用

これが起こる理由は何ですか？ 誰かがChromeでテストしてフィードバックをお願いできますか？

Answer 1

私は過去に外部ファイル（主にjs）を参照しようとしましたが、決して成功しませんでした。私が思い出したように、外部ファイルに対するクロムの制限がありました。私はまた、ウェブサイトにいくつかのクロスドメインアクセス制限があることに気づいた。この種の輸入が可能かどうかはわかりません。また、Webサイトにはjsバグがあります。そのために特定のコードが実行されないことがありますが、そのためにCSSが実行されるとは思われません。

jsファイルでこの問題が発生していたとき、さまざまな方法でインポートしたところ、jsファイルをダウンロードしてマニフェストで参照しました。あなたは同じことを試すことができます。フォントの内容を別のファイルに保存するか、styles.cssファイル内に保存します。