Chrome userscript is not applying remote CSS stylesheet

Question

Direct link to script: https://github.com/MosheBerman/MinimalOverflow/blob/master/styleswitcher.user.js

I downloaded a script from https://stackapps.com/questions/2143/minimaloverflow-a-themescript-for-stack-exchange and drag and dropped the *.user.js file into my extensions tab in Chrome. The script runs, which I verified by using an alert. I even alerted the href attribute in the script to verify that it was changing it properly.

However whenever the script changes the CSS, there is no styling applied:

Essentially the code looks for the link tag and changes the href attribute.

line 64

function switchToStylesheet(sheet){

    for(var i=0; i<linkElements.length; i++){   
        if(linkElements[i].getAttribute("rel") == "stylesheet"){

            //apply the new stylesheet
            linkElements[i].href = sheet;

            alert(linksElements[i].href); 
// shows https://github.com/MosheBerman/MinimalOverflow/raw/master/clean.css as expected

            //We only want to replace the first stylesheet, so return.
            //If SO decides to change any styles, just put it in a 
            //second stylesheet and link tag. The script should safely ignore it.
            return;
        }
    }
}

I have Version 25.0.1364.152 And I'm running Windows 7 64-bit

Can anyone verify if this is a Chrome, Javascript, or Userscript issue?

This is not what you want, but as an alternative method you might want to try: Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe ( The plugin is also available for _other browsers_ ). The search for stackoverfllow styles ( http://userstyles.org/styles/browse/stackoverflow ) didn't seem to come up with similar styles, but it's fairly easy to just inspect elements in a website and overwrite them with your own css with Stylish... — Joonas, May 02 '13 at 10:47

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

See "Referencing a .css file in github repo as stylesheet in a .html file". Git serves up the CSS file (.../raw/master/clean.css) with the wrong mime type; so browsers like Chrome and Firefox will not (normally) process/apply such CSS.

The quick fix is to host that CSS file on your own server, or one of the free file hosting sites. Then change the script setting to:

var pathToNewStylesheet = "http://YOUR_SERVER.COM/YOUR_PATH/clean.css";

edited May 23 '17 at 12:09

Community

1
1

answered May 02 '13 at 10:38

Brock Adams

90,639
22
233
295

Thanks..can't believe how many hoops I had to jump through..There's no such thing as 'accessibility' anymore. – May 02 '13 at 11:16

Chrome userscript is not applying remote CSS stylesheet

1 Answers1