CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Sean Anderson
Sean Anderson

Reputation: 29371

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

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!

Upvotes: 0

Views: 430

Answers (1)

Rob W
Rob W

Reputation: 349252

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:

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

Upvotes: 3

Related Questions