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 chrome.google.com/webstore/detail/stylish/… ( The plugin is also available for other browsers ). The search for stackoverfllow styles ( 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
– Joonas, Commented May 2, 2013 at 10:47

Community · Accepted Answer · 2017-05-23 12:09:49Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered May 2, 2013 at 10:38

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1508519 Over a year ago

Thanks..can't believe how many hoops I had to jump through..There's no such thing as 'accessibility' anymore.

Collectives™ on Stack Overflow

Chrome userscript is not applying remote CSS stylesheet

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related