Greasy Fork

This is what I want:

On any web page, the script spawns a box (div) on the bottom-right corner of the screen and will remain at the bottom-right corner of the screen no matter the scrolling. It is also in the foreground-most so no page elements would overlap it. I would assume it is a div CSS whose value are:

position: fixed;
bottom: 40px;
right: 40px;
z-index: 999;

Inside that element are populated with <input> tags, intended to act as a controller for the script. If they get modified, such as checking a checkbox, or change a number, they'll execute a code to save those settings (GM.setValue("Name", "Value")) and the script will remember these values across page reloads.

I am aware that there are several Userscript templates such as GM_config or MonkeyConfig, however, none of them have a proper complete example code that works (they don't have a complete demo userscript, and I do not know how to invoke them to make the menu appear), and there's no tutorial videos either.

I would like something as simple as a box on the bottom-right, with only a checkbox that remember its state when the page reloads. Box must be opaque and not have negative space behind the checkbox (so it kinda looks like a window box)

Study this 42-85 and 105-113 https://greasyfork.org/en/scripts/424595-night-mode/code

Script seems to not work. (tested on https://www.eff.org/). No on-screen menus or anything.

Read the description
It is a time based script, it only work on the times you set it up for.

But is has default times that it will work on.

Remove those lines of code or manually on the storage input your time. Or wait till late at night.

https://github.com/sizzlemctwizzle/GM_config is a great script.

Greasy Fork ++ uses it.

I found this github template: https://github.com/ArchivingToolsForWBM/AdvancedInternetArchiving/blob/main/GreasemonkeyScripts/Template.js

Solved.