CSS injection fails using declaration in content_scripts, but works when loaded via injected JavaScript

Question

I've noted that the expected way of injecting CSS into a third-party page does not seem to be working appropriately.

Relevant manifest.json portions:

  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/watch?v*"],
      "css": ["css/youTubeInject.css"],       
      "all_frames": true,
      "js": ["js/thirdParty/underscore.js", "js/thirdParty/jquery.js", "js/youTubeInject.js"]
    }   
  ]

Here I declare that I would like to inject some CSS and some JavaScript into pages which match the YouTube regex.

My JavaScript all injects fine. My CSS is not injected at all. I have triple-checked the file location and names.

The top of youTubeInject.js contains:

$(function () {

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

This causes my CSS to load properly and is a valid workaround for the issue.

Does anyone have any suggestions, or a bug I can track, for this issue? It'd be appreciated!

I simply have to disagree on this being a closed case. I have not been able to fix the issue. A simple test of doing body { background-color: red !important } shows the background-color changing when I insert the CSS file via javascript. Changing to loading via css in the manifest.json results in the CSS being lost. Observe: http://screencast.com/t/acp44sdtl This screencast reproduces my issue and shows where the CSS is lost after removing the JavaScript call. — Sean Anderson, Jul 03 '13 at 22:43

score 3 · Accepted Answer · answered Jul 03 '13 at 23:28

It appears that Chrome ignores the query string and location fragment when it checks whether the CSS file declared in the manifest file has to be applied.

http://www.youtube.com/watch?v=VIDEOID is seen as
http://www.youtube.com/watch.

Your match pattern includes a part of the query string, which causes the pattern to not match at all.

Currently, the behaviour of "matches" is inconsistent:

Documentation
    Pattern     : https://*.google.com/foo*bar
    What it does: Matches (...) path starts with /foo and ends with bar
"js" in manifest file
    Checks if pattern matches scheme://host/path?querystring
    Example     : https://google.com/foo?bar
    Non-example : https://google.com/foobar?
"css" in manifest file
    Checks if pattern matches scheme://host/path
    Example     : https://google.com/foobar?thisisignored
    Non-example : https://google.com/foo?bar
In all cases, the location fragment (aka location hash) is ignored.

This bug has been reported over 2 years ago, but it didn't catch up:

Issue 68561: Manifest content_scripts 'matches' inconsistently applied

There's another bug, possibly related, which has more followers:

Issue 100106: Excluding domains from content scripts doesn't work for CSS files

CSS injection fails using declaration in content_scripts, but works when loaded via injected JavaScript

1 Answers1

Linked

Related