Question: My CSS in my Chrome Extension is not loading for some reason. I did everything the browser told me to do, fix this, fix that, done that, but still not working.

```
{
  "manifest_version": 2,

  "name": "Emoticons",
  "description": "A collection of emoticons for Social Media, directly accessible in your browser!",
  "version": "1.0",
  "content_scripts": [{
        "js": [
               "js/jquery.min.js",
               "js/jquery-ui.min.js",
               "js/load.js"
              ],
        "css": [
                "css/emoticon.css",
                "css/style.css"
               ],
        "run_at": "document_end",
        "matches": ["http://*/"]
    }],
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "popup.html"
  }
}

```

What's wrong with my code?!

Answer: 
Are you sure it doesn't load *where the [match pattern](https://developer.chrome.com/extensions/match_patterns) you specified actually should work*?

Your match pattern, `"http://*/"` matches, say, `http://example.com/`, but not `http://example.com/some/path` or `https://example.com/`.

A match patter to catch "any http or https page" would be `"*://*/*"`. Note that in this case the first wildcard is specifically either `http` or `https`.

There's even an easier match pattern that captures every supported page, `"<all_urls>"`.
Probably problem in *match pattern*, see **@Xan** answer for that case...

In case if **js** loaded and css not follow suggestions below...

Might be situation that your css is loading but not applied. 
Try to add `!important` to each css rule.

Another option is to inject the CSS via a content script, to do it add code below to `load.js`:

```
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('css/emoticon.css');
(document.head||document.documentElement).appendChild(style);
style.href = chrome.extension.getURL('css/style.css');
(document.head||document.documentElement).appendChild(style);

```