Basically, whenever I edit firefox-profile-path/chrome/userChrome.css, I want firefox to automatically apply the file again. The only posts I found on this are old and not straightforward. I’m wondering what currently works.
The simple solution would be to do your edits using browser toolbox - that should get reloaded “live” while you edit it.
But if you truly want Firefox to reload the file while some external editor is modifying it then that’s going to require some serious hackery. Like, writing you own custom functionality using autoconfig that would poll the filesystem for changes for userChrome.css and the reload it if file modification date changes. I donmt see why it wouldn’t work, but it’s pretty stupid if you ask me. More sensible would be to have a button which reloads the file when clicked - this would of course need to be created using autoconfig as well.
This is a script for automatically refreshing the file: https://gist.github.com/jscher2000/ad268422c3187dbcbc0d15216a3a8060
Could I just plop it in as a
<filename>.sys.mjsfile with fx-autoconfig? https://github.com/MrOtherGuy/fx-autoconfigWell you can, but it would only run (and thus reload) once very early on startup, which is probably not what you want.
If you use fx-autoconfig, it also has a helper function for loading userChrome.css (or other stylesheets) that you can call like this:
UC_API.Scripts.reloadStyleSheet()Still, the complex part is in figuring out when exactly you want to do the reloading. For example, you coud set it up so that it get reloaded when hitting some hotkey (Ctrl + F8 in this example):
import { Scripts, Hotkeys } from "chrome://userchromejs/content/uc_api.sys.mjs"; Hotkeys.define({ id: "reload-userchrome", modifiers: "ctrl", key: "F8", command: () => { console.log("reloading..."); Scripts.reloadStyleSheet() } }).autoAttach()Adding that as
<filename>.sys.mjsshould work (unless something else on your system is stealing the Ctrl+F8 shortcut). Note, even though the styles should get reloaded, the window might not re-render immediately - which may require you to move your mouse or do some other stuff before you see the changes.Actually I got a
.uc.mjsfile working with the snippet that refresh every 1 sec: https://gist.github.com/jscher2000/ad268422c3187dbcbc0d15216a3a8060?permalink_comment_id=3259657#gistcomment-3259657Sure, you can apply reloading like that if you want. But I would be careful when using that as
.uc.mjsbecause if you don’t tag that script with@onlyonce- and you have like 10 windows, then Firefox will reload userChrome.css once a second for each window so potentially 10 times a second. That could be quite a lot of cpu usage for constantly invalidating and computing the browser UI styles.Also, I don’t think that function can handle the case where you use
@importstatements in your css.Thanks for the advice, and it works with @imports too (at least local files).
