My CSS is not getting injected through my content script

The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:

1. Increase the specificity of your CSS rules.

2. Suffix every rule with !important:

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

3. Inject the CSS via a content script:

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

   The last key, web_accessible_resources is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.

If you want to target a specific website do:

"matches": ["https://*.google.com/*"]

That //* before .google is the real trick for me as using www doesn't works.