コンテンツ スクリプトを使用して 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 サイトの他の関連記事を参照してください。