Greasy Fork

Is there a Converter to Convert CSS to User Script?

Is there a converter that can convert CSS to user script?

I think I've seen one a long time ago but there is another way which is quite usable for the existing styles on userstyles.org: disable Stylish and open a style page on userstyles.org, the install button will offer to install the style as a cross-browser userscript - the example.

As you can see the conversion itself is utterly simple and you can use the above userscript as a template for any CSS - remove all linebreaks and comments from your css, replace all double quotes with single quotes and put the result into css = "".

Then do the @include lines:

Does it really need to be converted, or can you just bulk inject it into the page using DOM methods:

var my_css = 'body{background:#ccc; /* et cetera */}';
var new_sty = document.createElement("style");
new_sty.setAttribute("type", "text/css");
new_sty.appendChild(document.createTextNode(my_css));
document.body.appendChild(new_sty);

I think I've seen one a long time ago but there is another way which is quite usable for the existing styles on userstyles.org: disable Stylish and open a style page on userstyles.org, the install button will offer to install the style as a cross-browser userscript - the example.

As you can see the conversion itself is utterly simple and you can use the above userscript as a template for any CSS - remove all linebreaks and comments from your css, replace all double quotes with single quotes and put the result into css = "".

Then do the @include lines:

CSS userscript @-moz-document domain("domain.com") @include http://domain.com/*
and/or @include https://domain.com/* @-moz-document url-prefix("http://urlprefix") @include http://urlprefix* @-moz-document url("http://someurl") @include http://someurl @-moz-document regexp("some\\reg\\exp") @include /some\reg\exp/
(replace \\ with \)

Hi, wOxxOm. Thanks for the reply. I'll be looking into it. Thanks man.

Hey, wOxxOm.

Thanks man!!!!!

@koolxx, that's something you should do yourself I guess.

@koolxx, that's something you should do yourself I guess.

But how? Where in the code specifically do I tweak this?

1. this is offtopic here 2. by learning CSS I suppose.

1. this is offtopic here 2. by learning CSS I suppose.

Ok, thanks man.

I use :
Marti / GM_setStyle [OpenUserJS)

../..
"Overview:
Alternative to using GM_addStyle with validation and "pretty" simple formatting"
.../...

Here an example of script using it (by me, with all the help of Marty):
UserScripts WideScreen Dark/Grey

The core is to publish your css on Pastebin (without special formatting!).
And add in your script something like that (from my script):

// @require https://greasyfork.org/libraries/GM_setStyle/0.0.15/GM_setStyle.js
// @resource css http://pastebin.com/raw.php?i=MNNMVxWg
//
// @grant GM_getResourceText


Hey guys! I hope I'm not too late, but I took a shot at making a converter for making userscripts out of CSS. I have tested the generated scripts on Chrome with TamperMonkey and it seems to work pretty well. I hope this would be useful.

Download: https://www.dropbox.com/s/y8x77nr0cwser90/CSStoUserScript.rar?dl=0
VirusTotal: https://www.virustotal.com/en/file/2ffcce59356871e0030c9f342c31a8b0be3a601b952d29b9959541799b4639b0/analysis/1436659445/

@Stanley Lim

This is awesome! Do you know if there's a way to reverse this process as well? To take a userscript containing CSS and convert it to CSS?

Thanks , good idea !
Work on Firefox 40.0.

I test it from an userstyles i build :

We need to remove all the specific stuff for userstyles if we want the script work .
Can be done directly (Userstyles > Usercript) by your program and converting the namespace(s) used in it ?

A minor request :
Can you add a "Copy the script" button ?

I'm glad to see that the program was useful. I'll probably work on it and add some new features in the future. I may also create a project page when there is enough interest.

;-)

Hello @decembre I see what you mean now. I'll see if I could create to modes (Chrome and Mozilla). I just need to figure out how to format for GreaseMonkey first.

shall be great !

Sorry for the delay folks! The updated version should be coming out soon.

UPDATE: I will be moving the topic of the converter to a new post. https://greasyfork.org/en/forum/discussion/6210/css-to-script-converter

:-)

The new version is out now. Check it out in the new thread: https://greasyfork.org/en/forum/discussion/6210/css-to-script-converter