挿入した CSS がコンテンツ スクリプトに適用されないのはなぜですか?

コンテンツ スクリプトでの CSS インジェクションの失敗のトラブルシューティング

コンテンツ スクリプトでは、CSS のインジェクションが困難になる場合があります。挿入された CSS が Web ページに表示されないという一般的な問題を詳しく見てみましょう。

問題ステートメント:

ユーザーが CSS ファイル ("myStyles" を挿入する際に問題が発生しています) .css") は、manifest.json ファイルの "css" 配列に含まれているにもかかわらず、コンテンツ スクリプトを通じて使用されます。

マニフェストの抜粋:

{
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

考えられる原因:

スタイルシートが挿入されていても、次のような要因により適用されない可能性があります:

• CSS ルールの競合: Web ページ上の他のスタイルは、挿入された CSS ルールをオーバーライドする可能性があります。

解決策:

この問題を解決するには、次のオプションを検討してください:

1. CSS ルールの特異性を高める

「myStyles.css」の CSS ルールの特異性を高めて、優先順位を確保します。

2. 「重要」宣言を利用します

「myStyles.css」の各 CSS ルールに「! important」を追加して、適用を強制します。

#test {
    margin: 0 10px !important;
    background: #fff !important;
    padding: 3px !important;
    color: #000 !important;
}

3.コンテンツ スクリプト経由で CSS を挿入します

または、「myScript.js」の JavaScript を通じて CSS を動的に挿入します:

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

マニフェストの変更:

"web_accessible_resources" キーがmanifest.json (マニフェスト バージョン 2 の場合) に含まれていることを確認し、拡張機能以外のページから "myStyles.css" ファイルにアクセスできるようにします。

{
  "web_accessible_resources": ["myStyles.css"]
}

実装することによりこれらのソリューションを使用すると、CSS 挿入の失敗の問題を効果的に解決し、挿入されたスタイルが意図したとおりに適用されるようにすることができます。

以上が挿入した CSS がコンテンツ スクリプトに適用されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。