私のCSSはコンテンツスクリプトを通して注入されていません

Question

誰も私にこのことを説明することはできますか？ Googleの拡張機能でcontent_scriptを使用してCSSファイルをWebページに挿入しようとしていますが、CSSファイルがWebページに追加されることはありません。誰かが私が間違っていることを教えてもらえますか？おかげ

マニフェスト：他のスタイルは、ルールを上書きするので

{ 
    "name": "Extension", 
    "version": "0", 
    "description": "", 


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

myStyles.css

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

Answer 1

スタイルシートは、実際に、注入されたが、適用されません。ルールを有効にするには、次のオプションがあります。

1. CSSルールのspecificityを増やしてください。

2. サフィックス!importantを持つすべてのルール：

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

3. コンテンツスクリプトを経由して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

   { 
       "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"] 
   } 
   

   manifest version 2がアクティブな場合、最後のキーであるweb_accessible_resourcesが必要です。そのため、非拡張ページからCSSファイルを読み取ることができます。