Обговорення » Розробка

CSS to Script Converter

§
Опубліковано: 19.09.2015
Edited: 16.04.2017

CSS to Script Converter

Hey guys. So recently I have developed a small utility to convert CSS to Userscripts since I can't seem to find one that already exists.

Features:
- Convert CSS to Userscripts
- GreaseMonkey and TamperMonkey support.
- Simple user interface.

I hope you guys will find this tool helpful!

Repo: https://github.com/Spiderpig86/CSStoUserScriptConverter

Requirements: Windows XP SP3 or above.
(Sorry OSX/Linux users) :(

§
Опубліковано: 24.09.2015

Woo download link has been added.

§
Опубліковано: 24.09.2015

awesome work, thank you, this will be useful!

§
Опубліковано: 24.09.2015

Seems Ok, if "Chrome" Checked.

But don't work if "Firefox" checked:
It copy just the CSS in the generated script place...

Can you give us what this version provide new.
I observe "just" a new design and the browser option.

.... I know i ask you that previously :
And option to directly convert an Userstyles ???
:-)

§
Опубліковано: 24.09.2015
Edited: 24.09.2015

I'll look more into this issue. Thanks for the report. So far I have not found the time to implement reversing Userscripts into plain CSS. I will also try to implement that in the future.

PS: @decembre Those are pretty much the only changes in 1.0.1. I will attach a changelog in the future.

§
Опубліковано: 25.09.2015

I'm really confused as to what the issue is. I've tested the converter to target Firefox with Stylish and everything works.

§
Опубліковано: 26.09.2015

I have retested:
I don't know, but , for my , if i use the firefox option, that's give only the CSS i provide...
Strange...

i am on win7 64bits

§
Опубліковано: 27.09.2015

Can you give me a sample of what a userstyle should look like on Firefox?

§
Опубліковано: 27.09.2015
Edited: 27.09.2015

by example (for your username in this forum):

.Username[href$="/forum/profile/5720/Stanley%20Lim"] {
border-radius: 5px !important;
padding: 5px !important;
background: red !important;
}


give (with "Chrome" option) :

// ==UserScript==
// @name STY - TEST - For CSS to Script Converter
// @description STY - TEST - For CSS to Script Converter
// @author decembre
// @homepage greasyfork.org
// @include greasyfork.org
// @version v.1
// ==/UserScript==
(function() {var css = [".Username[href$='/forum/profile/5720/Stanley%20Lim'] {",
"border-radius: 5px !important;",
"padding: 5px !important;",
"background: red !important;",
"}"
].join("\n");
if (typeof GM_addStyle != 'undefined') {
GM_addStyle(css);
} else if (typeof PRO_addStyle != 'undefined') {
PRO_addStyle(css);
} else if (typeof addStyle != 'undefined') {
addStyle(css);
} else {
var node = document.createElement('style');
node.type = 'text/css';
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName('head');
if (heads.length > 0) { heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}})();


With firefox option:
that's just the original CSS without any change....

§
Опубліковано: 30.09.2015

But there is a change when you use the Firefox option. It specifies that it is meant to be rendered for Firefox. I've tested conversions from CSS to Userscripts for Firefox and tried it out in GeaseMonkey and Stylish and both worked.

§
Опубліковано: 01.10.2015

strange...

§
Опубліковано: 19.10.2015

Now it work for Chrome ...
I don't know why but work !
:-)
A question:
How to use your tool for a style which have some different CSS for different domain or pref url ?

§
Опубліковано: 29.03.2017

Hey does anyone still have a copy of this they could send me or post an updated link since his original dropbox link is dead?

§
Опубліковано: 16.04.2017
Hey does anyone still have a copy of this they could send me or post an updated link since his original dropbox link is dead?

Sorry for the inactivity and thanks for reporting the broken link. An update rolled out and this time I put the application on Github. If there are any issues, please report it there.

§
Опубліковано: 17.04.2017

How to install it ?

§
Опубліковано: 07.05.2017
How to install it ?

You can download the project at https://github.com/Spiderpig86/CSStoUserScriptConverter/releases . The .exe is portable so you can run it anywhere after you extract it. It should be in ./CSStoUserScript/bin/Release/CSStoUserScript.exe

§
Опубліковано: 08.05.2017

Thanks !

§
Опубліковано: 08.05.2017
Edited: 08.05.2017
A question:
How to use your tool for an userststyle which have some different CSS for different domain or pref url ?

by example my userstyle:
Userstyles TableView+Enhancer - Dark-Grey
Use these:

@-moz-document domain("userstyles.org")
, domain("greasyfork.org")
, domain("sleazyfork.org")
, url-prefix("https://greasyfork.org/forum/") ,
url-prefix("https://74.86.192.75/")

@-moz-document url-prefix("https://userstyles.org/")
@-moz-document url-prefix("https://forum.userstyles.org")
@-moz-document url-prefix("https://userstyles.org/help")
@-moz-document domain("sleazyfork.org")
@-moz-document url-prefix("https://greasyfork.org/fr/scripts/19838-diep-io-by-terjanq")

For firefox, what i need to use as @include?
If i use all al them i can have some problem because by example i don't want use the same
CSS for usertyle.or or greasyfor.org.

Chrome need a separate block for each domain or url-prefix

§
Опубліковано: 25.12.2018

Any news ?

§
Опубліковано: 27.06.2019

Wow it's been a while. Anyway, I noticed that there was some renewed interest in this tool recently. I can see if I have time to update the tool and create a cross-platform version (using Electron for example). Please let me know of any issues and missing features.

§
Опубліковано: 28.06.2019

I test your tool when you have a new version :smile:

§
Опубліковано: 04.08.2019

I think, you can do like this:

// ==UserScript==
// @name         InsertUserCSS
// @include      *://example.com/*
// ==/UserScript==
'use strict'

document.body.insertAdjacentHTML('beforeend', `<style>

body {
  background: #000;
}

</style>`)
§
Опубліковано: 05.08.2019

@kkocdko a dit : I think, you can do like this...

Thanks, but it seems not working with "complexe" usertyles (pref-url, etc) In chrome, I test it with my userstyle: Userstyles / Greasy Fork Enhancer Dark-Grey I inserted its code between

§
Опубліковано: 28.12.2019

no news ?

Опублікувати відповідь

Sign in to post a reply.