ホームページ > 記事 > ウェブフロントエンド > コンテンツ スクリプトを使用して CSS スタイルを Web ページに挿入するにはどうすればよいですか?
コンテンツ スクリプトを使用して Web ページに CSS スタイルを挿入する際のトラブル
コンテンツ スクリプトを使用して CSS を挿入する開発者が遭遇する一般的な問題は、次のエラーです。 CSS スタイルを Web ページに適用するには。これらのスタイルは、挿入されているにもかかわらず、他のルールによってオーバーライドされる可能性があります。
これを解決するには、複数のアプローチを取ることができます。
1. CSS の特異性を高める
CSS ルールの特異性を高めて、より優位性を高めます。
2. 「! important」を使用します
各ルールの末尾に「! important」を付けて適用を強制し、他のルールをオーバーライドします。
3.コンテンツ スクリプト経由で CSS を挿入
コンテンツ スクリプトを使用して CSS を挿入します。 JavaScript ファイル (myScript.js など) を作成し、manifest.json:
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 を変更します。
{ "name": "Extension", "version": "0", "description": "", "manifest_version": 2, "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file:///*/*"], "js": ["myScript.js"], "all_frames": true } ], "web_accessible_resources": ["myStyles.css"] }
注: マニフェスト バージョン 2 を使用する場合、非拡張ページから CSS ファイルへのアクセスを許可するには、「web_accessible_resources」キーが必須です。
以上がコンテンツ スクリプトを使用して CSS スタイルを Web ページに挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。