☰

Discussions » Development

How to modify @run-at for automatically converted CSS into userscript?

§
Posted: 2026-04-19

Hi all,

I'm relatively new to actually writing UserScripts. I wrote a dark theme for a site using CSS and Stylus and I uploaded it on here and let GF to automatically convert it into a Userscript. The problem I ran into was how Tampermonkey/Violentmonkey loads scripts. Since the site can have multiple Userscripts running and since some modify colors, they end up modifying colors after my script was loaded and colors don't looks right. It all depends on sequencing and the order in which TM/VM load scripts.

The fix was to change:
// @run-at document-start
to:
// @run-at document-end

And then my script modifies colors last.

However, I have no control over this and I haven't been able to figure out how to tell GF to use "// @run-at document-end" instead.

Does anyone know how to fix this?

Thanks!!

§
Posted: 2026-04-19

There's no way to tell Greasy Fork to use @run-at document-end.

It sounds like you would want to ensure your CSS has a higher specificity so that it always has the highest priority.

§
Posted: 2026-10-01

Two things that might help, since you can't set @run-at on the auto-generated version:

  1. Make the load order irrelevant. At equal specificity the rule that comes later wins, so the other scripts' colours beat yours because their styles land after yours. Prefixing your selectors with html or :root (or adding !important to the colour declarations) lets your theme win whatever order the managers load things in. For a dark theme that is usually the least fragile fix.

  2. Take control of the timing. Publish a hand-written .user.js instead of relying on the conversion — then @run-at document-end is yours to set. If other scripts keep injecting styles after that, keep your <style> element last in <head>:

const style = document.createElement('style');
style.textContent = css; // your theme
const keepLast = () => document.head.appendChild(style);
keepLast();
new MutationObserver(() => {
  if (document.head.lastElementChild !== style) keepLast();
}).observe(document.head, { childList: true });

appendChild on an element that is already in the page just moves it, so this costs nothing when nothing changes.

Post reply

Sign in to post a reply.