How to inject CSS using content script file in Chrome extension?

I'm trying to inject my CSS from JavaScript which is injected as content script:

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

I found similar question about injecting CSS, but I encountered a problem while using code from accepted answer. Here's my script.js contents:

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

After I load some page this message appears in console:

> Denying load of > chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Resources > must be listed in the web_accessible_resources manifest key in order > to be loaded by pages outside the extension.

Is there any way to fix this? Or, maybe, some other way to inject a CSS from that JavaScript file?

Note: I can't include style sheet directly from manifest.

You could add to the manifest's permissions field; See web_accessible_resources. So you would add this to the manifest:

    , "web_accessible_resources": [
        "fix.css"
    ]

---

See also "Programmatic injection". and insertCSS().

For most applications, forget all that createElement code and just add the CSS file to the manifest:

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

although I understand that you don't want to do that in this exact instance.

You can use element.classList.add("my_new_class") to add new class in the element and in css you can style that element by using the newly added class. So onClick only the class is going to be added and then only css for that element will run.