Installing user styles from different sources & Style metadata

[dogancelik]

I see no documentation about this and I have few suggestions about it.
I think this is a must-have feature for the freedom of users.

A user should be able to install styles from other sources.

Example:

1. User goes to www.example.com
2. User clicks on the link (www.example.com/name_of_the_style.user.css)
3. Stylish detects the link by ".user.css" component
4. Stylish shows a dialog: "Would you like to add this site to allowed domains list?"
   └► This dialog is only shown once and shown when it is required
   └► Domains can be removed/set/added from User Styles tab in about:addons
5. User clicks "Yes"
6. Stylish shows another dialog "Would you like to install this style?"
7. User clicks "Yes"
8. The style is installed.

Metadata is required to differentiate user styles

There should be two userstyle files. First one is .user.css, containing the style content and "==UserStyle==" block.

Second, .meta.css is a just a CSS file containing only "==UserStyle==" block. This file is used for version checking. Downloading this file will help the network and it will use less resources.

Example "==UserStyle" block (this should be placed at the beginning of a file)

/* ==UserStyle==
@name An example style
@namespace example.com
@description Bla bla
@updateURL http://example.com/example.meta.css
@downloadURL http://example.com/example.user.css
@version 1.0
==/UserStyle== */

I should be able to install any style by simply linking to it from any site.
(A user can install a style from a.com when browsing b.com)
Greasemonkey install dialog is a good example for this.

http://forum.userstyles.org/discussion/comment/9774 is a related thread about it from 4 years ago.

[JasonBarnabe]

Users can currently install from other sources in these ways:

1. Visit a CSS file, click the Stylish icon, click Add File to Stylish (no metadata will be loaded, but updates will work)
2. From the Stylish tab in the Add-ons Manager, click Install from URL, and provide the URL to a CSS file (again, no metadata, but updates work)
3. Modify the setting extensions.stylish.install.allowedDomains in about:config and visit a site that implements the appropriate meta elements and something like this JavaScript and use its UI (supports metadata).
4. Use Install from URL and provide a URL that implements the appropriate meta elements. This way, the site does not need to implement any JS and does not need to be in extensions.stylish.install.allowedDomains (supports metadata)

So basically the missing portion to achieve what you want is some way to more easily add a site to extensions.stylish.install.allowedDomains. I would also to give some thought as to how to prevent abuse of this feature. For example, there's nothing currently stopping a site from opening infinite prompts until the user installs.

[dogancelik]

We developers have to think from a user's perspective. Users want to install things easily, with one click. They don't want to install x, go to y, do the z to install what they want. They want it now. They don't want to deal with options.

That's why every way you mentioned is not good for the users.
First way is obscure, users are not going to know this until somebody tell them.
Second way requires lots of work, lots of clicking, copying/pasting.

Third way is wrong in many levels.

• [User] Many users don't even know about about:config, unless they are advanced users. And most of them don't want to mess with it.
• [User] Nowhere in the site it is mentioned that there is an option "allowedDomains" and you need to use spaces to seperate "allowedDomains" (Being able to allow domains from User Styles tab in about:addons is a better way)
• [Website owner/web designer] "I don't know JavaScript, and I can't even include my own styles in my own website."
• [Developer] Using link tags is inefficient. What if I want to let people install 3 styles in one page, do I add 12 link tags to my page for each of them? That adds up to 36 link tags in one page.
• [Developer] Writing 600 lines of JavaScript just to put my user styles in my web page is pointless, even barebones of it require 80+ lines of code.
• [Developer] 12 link tags 1064 bytes vs. 12 metadata tags 862 bytes = 202 bytes saved

I don't quite understand the fourth way, I'm anticipating that the URL is a CSS file.

I think metadata in styles will make things easier.

If you implement metadata:

• You won't have to use link tags again. This means less coding in both client and server side of the site (userstyles.org).
• A website owner (he might be newbie, no JS knowledge, or a web designer) won't have to write JavaScript code to add style install page for his website.

Metadata dialogs

Option 1: When you go to a location that is a CSS file and ends with ".user.css"

Option 2: User clicks a link in a web page

[JasonBarnabe]

I'm not interested in doing it the Greasemonkey way.

I would consider a change that made it easier for sites to get into extensions.stylish.install.allowedDomains, but this would have to be paired with protections to prevent abuse.

[LouCypher]

I would consider a change that made it easier for sites to get into extensions.stylish.install.allowedDomains

We could use options.xul.

[JasonBarnabe]

See stylish-userstyles/userstyles#57

[noscript]

Sad to see this closed. I prefer to keep my scripts and styles on gist.github.com. While it works perfectly for Greasemonkey scripts, some extra clicks are required for styles.

I would consider a change that made it easier for sites to get into extensions.stylish.install.allowedDomains

If this would require some changes done on GitHub side for example, I do not think it's possible.

[Fironet]

Just commenting to add there doesn't seem to be a way to add stylesheets from sources other than userstyles.org for Stylish on the Android version of Firefox (at least with the user.css I've tried hosted on Github), nor is adding them manually possible with that version of the addon, so this suggestion to include a pop-up notification would be very much appreciated in that case.

Edit: I should also mention that there is no Manage or 'Install from URL' option in the Stylish version on FF for Android for me (using the latest version), only Disable and Uninstall. So per the workarounds @JasonBarnabe listed the only one that would apparently work here is creating a compatible web page with the appropriate Javascript and adding the page to the about:config whitelist.