Userstyles Suck: How to easily Convert an Userstyle to an Geasemonkey script for Friefox / Chrome ?

edited May 31 in Style Development Waterfox
Userstyles Suck: How to easily Convert an Userstyle to an Geasemonkey script for Friefox / Chrome ?
Any suggestions can be posted here....

Read :
Stylish and Userstyles.org have a new owner - [ghacks] Last Update:October 9, 2016

Comments

  • Waterfox
    Custom Widescreen CSS theme for userstyles.org and greasyFork / SleasyFork using a new way to use an userstyle in a GM directly - by usign the Library "addStyleEx" by leoncastro.

    With this Library we don't need to post before our Userstyle in PasteBin (by example).
    But we need to edit it when we build the userscript.

    leoncastro provide to me a template to help me :

    STYLESHEET DECLARATION SECTION:

    Template strings,
    you can copy-paste your code, but:
    1. grave symbols (`) are used as enclosure
    so you need to replace every grave symbol "`" with their html version "`"
    see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    see: http://en.wikipedia.org/wiki/Grave_accent
    2. octal literals are not allowed
    on character strings you can translate their values to unicode format: octal("\033") == unicode("\u001b")
    http://stackoverflow.com/questions/35624801/how-can-i-use-colors-in-ecmascript6-template-strings
    sometimes your values are already hexadecimal, like "\A" or "\25B6", so you just need to put "\u000A" or "\25B6".
    How to use:

    var css_example = `
    body {
    color: black;
    }
    div.someclass:before {
    content: "Normal text, `escape` text";
    }
    `;

    Replacements needed in this example:
    Find Count Replacement Comments
    ` 6 ` grave to html
    \A 100 \u000A hex to unicode
    \25B6 23 \u25B6 hex to unicode
    \25BA 1 \u25BA hex to unicode
    \01F53B 1 \u01F53B hex to unicode
    \270E 1 \u270E hex to unicode
    \2717 1 \u2717 hex to unicode



    AND :


    CONTROLLER SECTION:
    Used to filter styles used only in certain locations.
    How to use:

    if( location.href.match(/REGEXP/i) ) // REGEXP: see bellow table
    addStyleEx(css_example, uniqueid_example);

    REGEXP CONDITIONS:
    - Allways:
    Stylish-selector: (none)
    Userscript-header: @include *//*/*
    Userscript-regexp: (do not use conditions)
    Domain:

    - Stylish-selector: @-moz-document domain("domain.com")
    Userscript-header: @include http://domain.com/*
    and/or @include https://domain.com/*

    - Userscript-regexp: (https?:)?\/\/domain.com\/.*
    Prefix:
    Stylish-selector: @-moz-document url-prefix("http://urlprefix")
    Userscript-header: @include http://urlprefix*
    Userscript-regexp: (https?:)?\/\/domain.com\/.*

    - Direct URL:
    Stylish-selector: @-moz-document url("http://someurl")
    Userscript-header: @include http://someurl
    Userscript-regexp: http:\/\/someurl

    - RegExp:
    Stylish-selector: @-moz-document regexp("some\\reg\\exp")
    Userscript-header: @include /some\reg\exp/
    (replace \\ with \)
    Userscript-regexp: some\\reg\\exp

    - common style, do not use conditions
    addStyleEx(css_common_stylesheet);

    url-prefix("https://greasyfork.org/fr/scripts/19838-diep-io-by-terjanq")
    why not http://sleazyfork.org/en/scripts/19838-diep-io-by-terjanq ?, better use a regex:
    if( location.href.match(/(https?:)?\/\/(greasy|sleazy)fork\.org\/([\w-]+)?scripts\/19838-diep-io-by-terjanq\/.*/i) )
    addStyleEx(css_only_for_somescript);

    domain("sleazyfork.org")
    if( location.href.match(/(https?:)?\/\/sleazyfork\.org\/.*/i) )
    addStyleEx(css_only_for_sleasyfork);

    url-prefix("https://userstyles.org/help")
    if( location.href.match(/(https?:)?\/\/userstyles\.org\/help\/.*/i) )
    addStyleEx(css_only_for_userstyles);



    Thanks to the very active help of the author of "addStyleEx", leoncastro :
    Fine and Simple style : just a question about your "addStyleEx" and the library "addstylish lib"

    Here a (working...) Test :
    Userstyles TableView+Enhancer - Dark-Grey 57

    That's a previous version because my last version (v.59.1) seems not working....
Sign In or Register to comment.