Question

i have a working userstyles.org solution for this. however, i’d like to get some custom css to override that of a given website via a userscript, as well.

this is what i have so far:

// ==UserScript==
// @id            Custom_Style
// @name          Custom CSS for domain.com
// @version       1.0
// @author        vulgarbulgar
// @description   Changes the default css for domain.com
// @include       http://site.com/*
// @include       https://site.com/*
// @include       http://*.site.com/*
// @include       https://*.site.com/*
// @resource      css http://userstyles.org/custom.css
// ==/UserScript==

$(document).ready(function() {
    GM_addStyle(GM_getResourceText("css"));
});

doesn’t seem to work.

i don’t have any js knowledge, but have pieced together the above from some examples. installing the above userscript into chrome doesn’t seem to trigger the changes when visiting the targeted site.

thanks.

Answer 1

That script is using $(document).ready() but does not have a @require directive for jQuery!

Also, $(document).ready() is not needed in (most) GM scripts because Greasemonkey runs at the correct time by default.

Another thing that will save your sanity is: don’t use such short, overloaded names as variables. Instead of “css” use something searchable.

So your current script would become:

// ==UserScript==
// @id            Custom_Style
// @name          Custom CSS for domain.com
// @version       1.0
// @author        vulgarbulgar
// @description   Changes the default css for domain.com
// @include       http://site.com/*
// @include       https://site.com/*
// @include       http://*.site.com/*
// @include       https://*.site.com/*
// @resource      myCustomCss http://userstyles.org/custom.css
// @grant         GM_addStyle
// @grant         GM_getResourceText
// ==/UserScript==

GM_addStyle (GM_getResourceText ("myCustomCss") );