This is userChrome Companion . .

. . a Firefox Extension to toggle & manage multiple userChrome styles

usability-stage-demo-6-6-2025.mp4

Full 4k Video uncropped on Youtube

End Goal

ⓘ To Toggle and Manage multiple userChrome styles

If you're familiar with userChrome Toggle. I attempted to recreate it from scratch (with some QOL adjustments). By appending any character 🐱, or code 123, or trigger ~, to the Firefox Window, userChrome styles can be communicated with via userChrome Companion ↔ userChrome. Originally, I wanted to mimic userChrome Toggle but manipulate post-title or title-modifier instead; that fell through when i realized there was a lack of API for it. But whatever.. As of 6/6/2025 userChrome Companion (alpha 0.6) is ready to use.

Functionality

Refer to Wiki

Design Stage Progress

• ⓘ Design Stage complete
  • Draft/Mock up created. Version bump to Alpha 0.1. 5/30/2025
  • Design State complete. Version bump to Alpha 0.8. 6/19/2025

Design Stage progress

• drag and drop functionality 5/6/2025
  • rearranging of options or folders (drag drop) 5/5/2025
  • rearranging of options in folders (drag drop) 5/5/2025
  • adding options to a list of folders (+1 behavior) (drag drop) 5/5/2025
  • nesting of folders and options for organization of userchrome toggle's 5/5/2025
  • trigger notify to dragging last option outside of folder, proceed y/n 5/6/2025
  • safeguards 5/6/2025
• custom context menu delayed 6/19/2025
  • delete folder or delete option (trigger notify to preserve internal options) 6/18/2025
  • rename folder or rename option 6/19/2025
  • toggle settings 6/18/2025
  • add option to folder 6/19/2025
  • turn on/off toggles 6/18/2025
• settings panel design 5/30/2025
  • settings ui 5/30/2025
  • allow import of options & folders (html specific format) 5/30/2025 (simple text format is better)
  • allowing import of preset's (like presets for userChrome themes) 5/30/2025
  • reset to default 5/30/2025
  • color scheme management delayed
  • Sidebar CSS - section to tweak sidebar appearance via internal css variables, colors, borders, shadows, etc. 6/13/2025
• custom module design uc Notify 5/6/2025
  • notification ui 5/5/2025
  • input text functionality 5/5/2025
  • summon priority (query all siblings when .ucnotified to cease further manipulation until confirmation recieved) 5/6/2025
  • yes/no summoning (calling uc-notify across script functions to handle dynamic confirmations) 5/5/2025
  • dynamic summons (summon for verifications, summon for yes/no procs, summon for input/value exchanges, etc) 5/6/2025
  • yes/no procs binded to element interaction allowing custom sure/maybe, 1/2, y/n, developer heaven basically) 5/6/2025
  • input focus grabbing on summon (type and Enter) 5/6/2025
  • safeguards 5/6/2025
  • portability (to other extensions) 5/6/2025
• allowing dynamic layout's while maintaining fluid control over dom structure
• edit mode 5/30/2025
  • edit mode, subtle ui 5/30/2025
  • toggle edit mode 5/30/2025
  • append delete/rename functions to options 5/30/2025
  • 6/2/2025 append hotkey button&function to the edit mode buttons moved to usability state
• Visual Design (will progress over time) 5/30/2025 (it has progressed over time)
  • Resize Handling - standard Sidebar width vs extremely small width 6/6/2025

Usability Stage Progress

• ⓘ Usability Stage complete
  • Main functionality started. Version bump to 0.5. 5/31/2025

Usability Stage progress

• Toggle on/off individual option(s) 5/31/2025 (double click, and single click ON indicator)
  • Handle window titles on new windows 5/31/2025
  • Handle window titles on firefox onStartup 6/5/2025
  • Handle visual toggles to UI (dom content loaded, entering/exiting edit mode, firefox startup) 6/5/2025
  • toggle states saved as "currentlyToggled" and "recentlyToggled" 6/5/2025
  • saving/restoring states (dom content loaded, entering/exiting edit mode, firefox startup) 6/5/2025
  • Safe guards to prevent corrupting of save (duplicates, bad format) 6/5/2025
• Toggle States
  • dynamic parsing of toggle state, when rearranged, saved, loaded 6/5/2025
  • Toggle userChrome works with recentlyToggled to toggle currentlyToggled on/off 6/6/2025
  • Toggle userChrome recentlyToggled state saved/restored 6/6/2025
  • Toggle userChrome can be used as a recentlyToggled on/off switch 6/6/2025
  • Toggle userChrome can be switched to work as Preset Chooser/Switcher delayed
• saving of options & folders and options in folders and folders in folders (position, dom structure, label preservation) 5/6?/2025
• element identification filtering and organization 5/30?/2025
• Import/export of preset's (options) 6/5/2025
  • through copy/paste 5/31/2025
  • through raw url or text files 5/31/2025
  • Parsing format 5/31/2025
  • Proper handling of any exported, imported, dynamic save/load 6/5/2025
• Full Import/export (options & toggles) this will be handled via the "Preset Chooser/Switcher"
  • through copy/paste
  • through raw url or text files
  • Parsing format
  • Proper handling of any exported, imported, dynamic save/load 6/5/2025
• hotkey support (visually taking the place of the ON indicator) delayed
• Wiki References 6/6/2025

Progression Journal/Timeline

• Days worked on UC: 9
  • I try to journal progress here, with notes and video of progress

Progression Journal/Timeline

05/03/2025 - 05/05/2025 v0.1

A rough draft to start off the Design Stage. Drag and drop mostly complete. A notification's system is needed for dynamic messages and inputs. I may have went overboard.

userchrome.companion.preview.mp4

05/06/2025

uc Notify (Notification UI/UX kit) completed. Tabs renamed to Folders (logical). And "options" look more like tabs. Visual design adds subtle drop shadows to the list of options. And background Sidebar content is blurred (visually) upon Notify summons to simulate focus. Spacing Corrections.

uc-notifymockup-resize.mp4

05/31/2025 v0.5

A Sidebar Toolbar added to the bottom of options list. It includes a New Tab (option) button, New Folder button, and Edit Mode Button. Functionality of all three buttons are complete. New Tab & New Folder allows the creation of new options and folders through notify input. Edit Mode enters Sidebar State that allows quick renaming and deletion of options in the list. All functionality complete. Settings UI complete (with Presets, add to options, overwrite options, import @, import file, delete all options). Preset Testing done, adding options/folders via text parsed from files locally (like a .txt file), or globally (like a raw github link) complete. Toggling on/off of individual options started. Save/load of toggle state started. Appending options character to Window Title started. version bump to 0.5 (ready for userchrome toggling)

./presets/readme

userChrome-Companion/presets/preset-example

Lines 1 to 4 in b3165a4

	🌀 an example of an option
	Folder: An Example of a Folder
	🌀 with an option inside of it
	🌀 options inside of folders are indented

design.stage.demo.5-31-2025.mp4

06/05/2025 - 06/06/2025

Toggling logic seperated for UI toggling on/off state & titlepreface in window, Toggling logic centralized via syncing function (globally). Toggling and Syncing are now considerate of Sidebar states & changes (like: deletion of options, renaming, edit mode, sidebar open/close, firefox startup/window-creation). Safe guards in place. Limited access to Settings when edit mode is in progress. Limited access to toggles when edit mode is in progress. Added new Presets container for toggling options (toggle all, export toggles, import toggles), not functional yet. Added new ? buttons, to help Users who may not understand Preset containers' buttons - it sends Users to a new & relevant userChrome Companion Wiki Page. Added a Resize helper module to assist .css with shrinking elements - for smaller than standard sidebar sizes. Code organization - I definitely feel like I'm learning js now. Toggle userChrome button now toggles all options on/off by toggling a recentlyToggled list with a currentlyToggled list, persistent globally. Eventually the functionality of the button can be switched to do a different task: Opening a Preset Switcher to quickly pick a preset list of options that you want toggled on/off.

Full 4k Video uncropped on Youtube

usability-stage-demo-6-6-2025.mp4

06/12/2025

Well bug fixes & bug fixes. The add-on is now on the Mozilla store 🎉. Drag & drop takes into account every possible scenario, options from root to folder, from folder to folder, from folder to root, etc; Good. Toggling on/off states are showing as persistent accross dom loads and browser restarts, option orders show as persistent, class structure remains intact; Good. Logically, importing and exporting toggles seperately from options is starting to make less sense so I'm axing the idea from the usability stage. Instead focus on what comes next. A preset switcher ✨ (that can serve as a CSS layout switcher) allowing the User to click Toggle userChrome (or trigger via hotkey) to open a full screen window (full sidebar) and quickly choose from a list of saved "presets", with options already set to be toggled on/off. This preset switcher view can include the ability to fine tune their list of presets, etc. For another day. Version bump 0.6.

One last final touch for the night.. for the morning.. Mock draft of the final goal in settings panel design section of the Design Stage. Custom Sidebar CSS implementation:

sidebar.css.settings.mockup.mp4

Version bump 0.6.1. Next Version bump will address in organize in source CSS documentation, then the two goals above will be worked on.

06/13/2025

The frustration in getting this working. After a while of figuring this out blindfolded.. settings-CSS.js now fully handles the ability to fully theme userChrome Companion's sidebar via the existing Variables. Persistance is good. Version bump to 0.7

sidebarc.mp4

06/18/2025 - 06/19/2025

Settings CSS - option height, toolbar button hover background, & settings height are now controllable metrics. Custom context menu (right click menu) design started.

Context menu design finalized. Population of menu items, good. Consistent targetting, good.

Source has been organized a bit, the functions for the edit-module are now well defined so that they can be reused elsewhere (like the context menu). Functions for new option, new folder, and toggling have also been well defined for use in the context menu (example: Right click -> Toggle All ON, on a folder). Design Stage can be considered - Complete. Version bump to 0.8.

Completing this project relies on:

• Keybind functionality - 0.9
• Full Import/exports (with toggle states intact) (may require rethinking how I append elements between states) - 1.0
• A Preset Switcher (last priority) - x