Install from URLs and toggle automatic updates per style

[randomish]

In the Stylish Firefox addon there is a button in the user styles manager called Install from URLs... Basically a way to install a style from any css file on the web, and automatically keep it up to date by regularly checking that link (I see there is already a configurable global update check interval - good).

I've been waiting for this to be added to Stylish for Chrome for a long time, but it never happened. I discovered this fork today (reading about the GA/privacy issues in Stylish) and switched to it immediately, and I hope this feature will be added fairly soon.

That way I can host a css file on Dropbox/Github or wherever and have any changes automatically sync to all my devices or to anyone else I've shared the raw/css URL with, with no need to be logged in anywhere or to upload to userstyles.org (it may be a private style or a style with no interest to other users).

I guess the current globe icon with a clickable link next to userstyles.org styles in the manager is a good enough indicator of a style installed from the web as opposed to written or imported from a local file, but I would also like a way to toggle automatic updates for each individual style. There are cases where I may not want the automatic update for certain styles, if I want to use my own local changes or review any remote changes manually before I update.

[tophf]

Update: styles in usercss mode can be installed from URLs directly. All you need is to add a valid header in the comment at the start and increase style version on updates. Example: JishoDeepDark.user.css.

[Quenz]

Seconded. I want to add one of the .css styles from the Minimal browser extension as a userstyle. They are essentially userstyles, but not technically "UserStyles", with a <name>.user.css file name and a ==UserStyle== header. Rather, they are just written to be used with the extension.

I have manually added the style, but whenever it is updated, I will have to manually update it.

@tophf This won't work if it's someone else's style not formatted as a proper UserStyle. You'd have to fork it, and manually update whenever the original style is updated.

I suggest Stylus allow regular .css file to be installed, and let the user specify which sites (e.g. www.youtube.com) it's supposed to run on, and then for it to update from the URL it was installed from as if that were it's @updateURL.

Perhaps this could be achieved via a special install or import option, where the user can add a .css style (which has no ==UserStyle== header) from a given URL, then a header is generated (separate from the raw CSS), with the @updateURL automatically being added based on the URL it was installed from. Or, the user could write this separate header manually.

[tophf]

You can probably use the standard CSS @import statement for the original URL in your local userstyle.

[Quenz]

@tophf I'm not sure it's appropriate to keep asking here, is there a better place? I'm not experienced with CSS and have very minimal programming knowledge. I looked at @import on MDN, here is my attempt:

/* ==UserStyle==
@name           Minimal YouTube
@version        0.4.1
@description    A minimal, less attention grabbing, YouTube experience. Lifted from the Minimal browser extension.
@namespace      minimal.aupya.org
@author         Tristan Dhellemmes, Tim Krief, Jeremy Dufour (https://gitlab.com/aupya/minimal/-/project_members)
==/UserStyle== */

@-moz-document domain("www.youtube.com") {

    @import url(https://gitlab.com/aupya/minimal/-/raw/master/styles/youtube.css) print;

}

I get this error:

5:5 Expected }
5:5 @import not allowed here.
7:1 Unexpected token '}'

Does Stylus maybe not support @import, or have I just written the CSS wrong?

[tophf]

Use a standard userstyle, not usercss, because imports can't be used inside other blocks. The switch is to the right of "write style" button in the style manager/dashboard.

[Quenz]

My code is now simply

@import url(https://gitlab.com/aupya/minimal/-/raw/master/styles/youtube.css) print;

with "Applies to URLs on the domain" set to www.youtube.com

I also tried

@import url(https://gitlab.com/aupya/minimal/-/raw/master/styles/youtube.css);

The style works if I just paste the code in from the original file, but not when I try to use @import like this.

[tophf]

Chrome says in devtools console:

• Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://gitlab.com/aupya/minimal/-/raw/master/styles/youtube.css".
• Cross-Origin Read Blocking (CORB) blocked cross-origin response https://gitlab.com/aupya/minimal/-/raw/master/styles/youtube.css with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

So I guess you would have to use another extension that patches the response headers like ModHeader since no one was interested in implementing this feature so far.

[Quenz]

Seems to be a new can of worms to me, I wouldn't know where to start. Is this an issue with Stylus that I can maybe open a new issue for, or a bug with the browser, or..?

[tophf]

Blocking a resource with an incorrect MIME type is the new intended behavior in Chrome so there is no bug here. I've suggested a workaround: set Content-Type header for this URL to text/css in ModHeader extension for example.

[Quenz]

This seems right, but I don't know how to make it specific to the URL.

I assume by URL you mean the URL to youtube.css? Also, I'm using Firefox.

[tophf]

My bad, I didn't really test those extensions. Forget about ModHeader. Searching for "header" on AMO I see another one: header-editor.

P.S. yes, the url of the imported css.

[Quenz]

Is this right? Doesn't seem to work.

[tophf]

text/css not test/css

[Quenz]

Typo! 😅 Now it works! Thank you! I should ask though, is this an issue at all with Stylus? Could something be changed with Stylus so that I wouldn't have have another extension installed?

[tophf]

Stylus could patch the headers automatically for imported resources, but it's not really trivial and it'd be a rare feature anyway because usually people import fonts or publicly available css, all of which have a proper content-type.

[MulverineX]

Is there a workaround for this? I want to have the automatically installable theme link, but I also want the user to get automatic updates to the theme

[tophf]

@MulverineX yes, there's an alternative available for several years: usercss. We could probably just close this issue.

[MulverineX]

I was not aware that usercss did automatic updates, it's fine then

[tophf]

usercss