Native userstyles support in AdGuard #1367

Bluscream · 2016-11-05T07:35:28Z

First, yes i know you can get a userscript version of any userstyle on userstyles.org and it's not hard to port any css to a userscript, but it isn't recommended because it impacts the performance a bit per style then.

I would love to see a new Tab in the settings called Styles or Userstyles where you can add any *.css file and AdGuard implements the css directly into the website using already existing function.

You could even go a step further and implement the userstyle's settings in the "Install Userstyle" dialog ♥

It would also clean up the Extensions tab a lot if it only shows the scripts :)

The text was updated successfully, but these errors were encountered:

Bluscream · 2016-11-05T07:39:59Z

Example Userstyle Code:

@-moz-document domain("r4p3.net"), domain("rape.ru.com") {
/* Global dark style - changes everything to DARK (https://userstyles.org/styles/31267/)*/
* {
    color: #999;
}
body {
    background: transparent !important
}
@-moz-document domain("r4p3.net"), domain("rape.ru.com") {
/* USER SETTINGS */

/* start anonym_avatar_all */
/*[[anonym_avatar_all]]*/
/* anonym_avatar_all end */

/* start anonym_name_all */
/*[[anonym_name_all]]*/
/* anonym_name_all end */

/* start avatar_local */
/*[[avatar_local]]*/
/* avatar_local end */

/* start unixtime */
/*[[unixtime]]*/
/* unixtime end */

/* start names_team_color */
/*[[names_team_color]]*/
/* names_team_color end */
}

Bluscream · 2016-11-05T07:42:11Z

Example Userstyle Userscript Code:

// ==UserScript==
// @name          Dark R4P3
// @namespace     http://userstyles.org
// @description   This modifies the r4p3.net forum to become a dark look and saves your eyelight :)
// @author        Bluscream
// @homepage      https://userstyles.org/styles/120607
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @include       http://r4p3.net/*
// @include       https://r4p3.net/*
// @include       http://*.r4p3.net/*
// @include       https://*.r4p3.net/*
// @include       http://rape.ru.com/*
// @include       https://rape.ru.com/*
// @include       http://*.rape.ru.com/*
// @include       https://*.rape.ru.com/*
// @run-at        document-start
// @version       0.20160221115530
// ==/UserScript==
(function() {var css = "";
if (false || (document.domain == "r4p3.net" || document.domain.substring(document.domain.indexOf(".r4p3.net") + 1) == "r4p3.net") || (document.domain == "rape.ru.com" || document.domain.substring(document.domain.indexOf(".rape.ru.com") + 1) == "rape.ru.com"))
    css += [
        "/* Global dark style - changes everything to DARK (https://userstyles.org/styles/31267/)*/",
        "* {",
        "   color: #999;",
        "}",
        "body {",
        "   background: transparent !important",
        "}",
    ].join("\n");
if (false || (document.domain == "r4p3.net" || document.domain.substring(document.domain.indexOf(".r4p3.net") + 1) == "r4p3.net") || (document.domain == "rape.ru.com" || document.domain.substring(document.domain.indexOf(".rape.ru.com") + 1) == "rape.ru.com"))
    css += [
        "/* USER SETTINGS */",
        "",
        "/* start anonym_avatar_all */",
        "",
        "/* anonym_avatar_all end */",
        "",
        "/* start anonym_name_all */",
        "",
        "/* anonym_name_all end */",
        "",
        "/* start avatar_local */",
        "",
        "/* avatar_local end */",
        "",
        "/* start unixtime */",
        "",
        "/* unixtime end */",
        "",
        "/* start names_team_color */",
        "a[href=\"members/bluscream.53/\"].username:not(.visitorPanel) { color:cyan !important; }",
        "a[href=\"members/supervisor.10/\"].username:not(.visitorPanel) { color:rgb(210, 61, 25) !important }",
        "a[href=\"members/asphyxia.1/\"].username:not(.visitorPanel) { color:red !important }",
        "/* names_team_color end */"
    ].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);
    }
}
})();

Bluscream · 2016-11-05T07:46:34Z

Example Userstyle Settings: Docs

https://justpaste.it/102n2 ( Don't ask why it looks so shitty x)

ameshkov · 2016-11-07T09:56:31Z

I agree that we'd better distinguish userstyles from userscripts.

Bluscream · 2017-03-10T20:21:27Z

Any news on this? I'm hyped :DDD

ameshkov · 2017-03-14T12:49:01Z

Planned on v6.3, so it'll take some time

GollyJer · 2017-05-11T01:35:50Z

Just came looking to see if this was something you guys were working on. I'm frustrated with the takeover of Stylish and have removed it from my browsers.

But, userstyles as currently implemented in Adgaurd via userscripts only works correctly about half the time.

Can't wait for this to move forward and kill all the birds with a single AdGuard stone. :-D

ameshkov · 2017-05-23T08:58:43Z

@GollyJer could you please give an example of a userstyle not working with AG (when you convert it to a userscript)? I'd just like to understand what's the problem with it.

GollyJer · 2017-05-23T13:24:13Z

Hi @ameshkov. Here are a couple.

DarkSearch for Google - links aren't formatted correctly.
Dev's Dark StackOverflow - lots of style not applied

ameshkov · 2017-05-23T14:40:05Z

@GollyJer apparently, the issue is with the style-to-script converter. The userscripts generated by it add style tag in the beginning of the head element, while stylish adds them right before the end of the body tag, which gives them higher priority.

ameshkov · 2017-05-23T14:43:02Z

Here is my version of Dev's Dark StackOverflow converted to a userscript:
https://gist.github.com/ameshkov/1245577d71e6fa3ab57d92f24faa25fd

What's done:

I've added proper @include meta attributes so that it was not executed for every website.
Replaced their style-adding code with a better one. Note, that this new code goes through the styles and makes them "high priority".

	// Add style tag
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	node.setAttribute('class', 'userstyle');
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}

	if (!node.sheet) {
		return;
	}

	// Filter all the rules and set priority to "important"
	var cssRules = node.sheet.cssRules;
	var iRules = cssRules.length;
	while (iRules--) {
		var cssRule = cssRules[iRules];

		// Now go through rule styles
		var iStyles = cssRule.style.length;
		while (iStyles--) {
			var styleName = cssRule.style[iStyles];
			var styleValue = cssRule.style.getPropertyValue(styleName);
			cssRule.style.setProperty(styleName, styleValue, "important");
		}
	}

ameshkov · 2017-11-30T13:50:09Z

Meanwhile, @seanl-adg has made a proper userstyle->userjs converter:
https://adguardteam.github.io/userstyles/converter.html

Code:
https://github.com/AdguardTeam/Userscripts/tree/master/userstyleConverter

We should reuse this code in order to add native userstyles support.

ameshkov · 2017-11-30T17:45:52Z

Also, I've reported the issue to userstyles.org (and suggested a possible solution). Should've reported it back then when we first discussed it.

GollyJer · 2018-10-11T21:54:59Z

@ameshkov I wanted to revisit this because I still can't get many userstyles to work with AdGuard for Windows.
Example...
Stack Overflow Dark

It works perfectly in Stylus but doesn't do anything when added to AdGuard via the Add Extension button.

Would love these styles to work across all my browsers. 😜

Thanks!
Jeremy

GollyJer · 2019-09-28T20:49:56Z

Pinging this thread again... now that Adguard for Android has Extensions support it would be AWESOME to also apply themes/styles via Adguard Extensions.

ameshkov · 2019-10-06T22:02:54Z

Yeah, time to resurrect this indeed, thanks for pinging us

ameshkov · 2020-02-18T15:07:31Z

Moved to CoreLibs:
AdguardTeam/CoreLibs#1272

ameshkov added this to the 6.2 milestone Nov 7, 2016

ameshkov modified the milestones: 6.3, 6.2 Feb 9, 2017

ameshkov removed this from the 6.3 milestone Oct 9, 2017

ameshkov mentioned this issue Nov 30, 2017

Add userstyles support #799

Closed

ameshkov changed the title ~~[Feature Request] Own Userstyles implementation~~ Native userstyles support in AdGuard Nov 30, 2017

ameshkov added Enhancement extensions & userscripts labels Nov 30, 2017

ameshkov mentioned this issue Nov 30, 2017

Some userstyles don't work in AdGuard #1986

Closed

ameshkov added the P2: High label Nov 30, 2017

ameshkov added this to the 7.5 milestone Oct 6, 2019

ameshkov mentioned this issue Feb 18, 2020

Userstyles support AdguardTeam/CoreLibs#1272

Open

ameshkov closed this as completed Feb 18, 2020

ameshkov added duplicate and removed P2: High Enhancement extensions & userscripts labels Feb 18, 2020

ameshkov removed this from the 7.6 milestone Feb 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Native userstyles support in AdGuard #1367

Native userstyles support in AdGuard #1367

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

ameshkov commented Nov 7, 2016

Bluscream commented Mar 10, 2017

ameshkov commented Mar 14, 2017

GollyJer commented May 11, 2017

ameshkov commented May 23, 2017

GollyJer commented May 23, 2017

ameshkov commented May 23, 2017 •

edited

Loading

ameshkov commented May 23, 2017

ameshkov commented Nov 30, 2017

ameshkov commented Nov 30, 2017

GollyJer commented Oct 11, 2018

GollyJer commented Sep 28, 2019

ameshkov commented Oct 6, 2019

ameshkov commented Feb 18, 2020

Native userstyles support in AdGuard #1367

Native userstyles support in AdGuard #1367

Comments

Bluscream commented Nov 5, 2016 • edited Loading

Bluscream commented Nov 5, 2016 • edited Loading

Bluscream commented Nov 5, 2016 • edited Loading

Bluscream commented Nov 5, 2016 • edited Loading

ameshkov commented Nov 7, 2016

Bluscream commented Mar 10, 2017

ameshkov commented Mar 14, 2017

GollyJer commented May 11, 2017

ameshkov commented May 23, 2017

GollyJer commented May 23, 2017

ameshkov commented May 23, 2017 • edited Loading

ameshkov commented May 23, 2017

ameshkov commented Nov 30, 2017

ameshkov commented Nov 30, 2017

GollyJer commented Oct 11, 2018

GollyJer commented Sep 28, 2019

ameshkov commented Oct 6, 2019

ameshkov commented Feb 18, 2020

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

Bluscream commented Nov 5, 2016 •

edited

Loading

ameshkov commented May 23, 2017 •

edited

Loading