Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implementing userstyles #1

Closed
WorldLanguages opened this issue Jul 24, 2020 · 6 comments · Fixed by #88
Closed

Implementing userstyles #1

WorldLanguages opened this issue Jul 24, 2020 · 6 comments · Fixed by #88
Labels
scope: addon api Related to the addon.* JS APIs or other ways for addons to provide features type: enhancement New feature for the project

Comments

@WorldLanguages
Copy link
Member

We need to find a good way to support userstyles, that isn't porting them as a userscript.

cc @mxmou
@BoomerScratch
Copy link
Contributor

BoomerScratch commented Jul 24, 2020 •
edited

I think the only best way is to create a <style> element on the page. Although this "sandboxes" it, Stylus does basically the same.

@WorldLanguages
Copy link
Member Author

Yeah sure. The main thing to discuss is what APIs to provide so that userstyles don't have to be userscripts, and the addon manager can handle enabling or disabling them. We should specially discuss how to handle settings on userstyles.

@mxmou
Copy link
Member

mxmou commented Jul 25, 2020

I think the only best way is to create a <style> element on the page. Although this "sandboxes" it, Stylus does basically the same.

Of course. One interesting thing is that Stylus actually inserts styles after the <body> element, not inside it.

The complicated part is settings and variables, for example in my userstyle. In the old discussion several options were mentioned:

  • To handle Boolean variables, the userstyle could be split into multiple CSS files: one which is always loaded, one for dark mode only and so on. This could be done manually.
  • Other variables (colors, numbers) could be converted to CSS variables. This could probably be automated but we would have to actually parse the Stylus code - simply replacing all instances of text in my userstyle with var(--addon-text) would also change text-align to var(--addon-text)-align.
  • Alternatively, Stylus code could be converted to CSS at runtime every time a setting is changed. This is my favorite option because it should be easy to implement: we won't need to write the Stylus preprocessor ourselves because it already exists and almost no conversion is needed to get the addon working (except replacing userstyle settings with addon settings, which is easy to do manually).

@WorldLanguages
Copy link
Member Author

IMO the last one is pretty complex, even tho I admit it is a great challenge and not the easy way.
Let's be real, userstyles won't change very much with time, and most of them are small userstyles.
I'd go for the first option and then the second if we want to let users customize things in the userstyle that aren't simple booleans.
The third option could still work tho, but until we want to add more than one Stylus userstyle I don't think the addon handler should need to consider Stylus code.

@BoomerScratch
Copy link
Contributor

One interesting thing is that Stylus actually inserts styles after the <body> element, not inside it.

Scratch doesn't delete the <style> elements so we can put it in the body or head without any problems.

@BoomerScratch
Copy link
Contributor

BoomerScratch commented Jul 30, 2020 •
edited

Wait, we have chrome.tabs.insertCSS. I don't really know if addon.tab.insertCSS exists; I don't have firefox.

@WorldLanguages WorldLanguages added the scope: addon api Related to the addon.* JS APIs or other ways for addons to provide features label Aug 17, 2020
This was referenced Aug 21, 2020
Merged
Merged
@Hans5958 Hans5958 added type: enhancement New feature for the project and removed discussion labels Dec 20, 2020
@Marc92020 Marc92020 mentioned this issue Jan 12, 2021
Closed
GrahamSH-LLK pushed a commit that referenced this issue Sep 24, 2021
@RedGuy12
Merge pull request #1 from RedGuy12/userscript
4c38b6e 
Userscript
@Mbrick2 Mbrick2 mentioned this issue Jan 17, 2022
Closed
@OregSamSas OregSamSas mentioned this issue Aug 5, 2022
Open
GrahamSH-LLK added a commit that referenced this issue Jun 25, 2023
@GrahamSH-LLK
Merge pull request #1 from BackThePortal/vue3
bc7b7bd
GrahamSH-LLK pushed a commit that referenced this issue Jul 12, 2023
@nakasyou
Merge pull request #1 from nakasyou/move-to-btn
a551d9e 
Move to btn
@supervoidcoder supervoidcoder mentioned this issue Jan 17, 2024
Open
@WorldLanguages WorldLanguages mentioned this issue Mar 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
scope: addon api Related to the addon.* JS APIs or other ways for addons to provide features type: enhancement New feature for the project
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Experimental: Add userstyles WorldLanguages/ScratchAddons
4 participants
@Hans5958 @WorldLanguages @mxmou @BoomerScratch