拡張機能のコンテンツ スクリプトを使用して Web ページに CSS を挿入できないのはなぜですか?

拡張機能のコンテンツ スクリプトにおける CSS インジェクションの問題

マニフェストで CSS インジェクションを定義しているにもかかわらず、CSS ファイルが Web ページに存在しないままになります。考えられる原因と解決策は次のとおりです:

理由: CSS ルールが競合しています

スタイル シートは挿入されましたが、他のスタイルがそのルールをオーバーライドしているため適用されません。

解決策:

• CSS の詳細度を高める: CSS ルールにさらに具体的なセレクターを追加します。
• 「」を使用します。 ! important": 既存のスタイルをオーバーライドするには、すべてのルールの末尾に「! important」を付けます。

理由: コンテンツ スクリプト インジェクション制限

マニフェスト バージョン 3コンテンツ スクリプトによる CSS の直接挿入を制限します。

解決策: 次のようにコンテンツ スクリプト経由で CSS を挿入します。

myScript.js:

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);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

注: マニフェスト バージョン 2 を使用する場合、へのアクセスを許可するには「web_accessible_resources」キーが必要です。非拡張ページの CSS ファイル。

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