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

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

理由: Conflicting CSS Rules

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

解決策:

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

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

マニフェスト バージョン 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 を使用する場合、非拡張ページから CSS ファイルへのアクセスを許可するには、「web_accessible_resources」キーが必要です。