title: Content Scripts CSS doesn't overwrite the original
body: <p>My problem that I want to modify a style of a site with my custom settings. I tried with <a href="http://code.google.com/chrome/extensions/content_scripts.html" rel="nofollow">Content Scripts</a>, but this dosent work, because they can't overwrite the original css files. Here is an example:</p>
  
  <p>foo/manifest.json</p>
  
  <pre><code>{
    "name": "test",
    "version": "1.0",
    "content_scripts": [
      {
        "matches": ["file://*/*test.html"],
        "css": ["main.css"]
      }
    ]
  }
  </code></pre>
  
  <p>foo/main.css</p>
  
  <pre><code>body {
    background: #0f0;
  }
  </code></pre>
  
  <p>test.html</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;foobar&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body style="background:#f00;"&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then i <a href="http://code.google.com/chrome/extensions/getstarted.html" rel="nofollow">loaded</a> the the extension foo folder into my google chrome, and opened the test.html but the background color still red. I inspected the element and i saw that:</p>
  
  <p><strong>Element Style</strong>   </p>
  
  <p><code>body {</code><br>
  <code>background: #f00;</code><br>
  <code>}</code></p>
  
  <p><em>user stylesheet</em></p>
  
  <p><code>body {</code><br>
      <strike><code>background: #0f0;</code></strike><br>
  <code>}</code></p>
  
  <hr>
  
  <p>How can I modify an existing css file with my custom css with Content Scripts?<br>
  If this not possible, how can i automatically modify an existing css with my custom when page loads in google chrome specially.</p>