explaingit

jjspscl/zen-notes

★ 13JavaScriptAudience · generalComplexity · 2/5LicenseSetup · moderate

TLDR

A sticky-note widget that lives in the Zen Browser sidebar, giving you a persistent rich-text notepad with auto-save, five color themes, and resize support that survives browser restarts.

Mindmap

mindmap
  root((zen-notes))
    Features
      Rich text editing
      Auto-save
      5 color themes
      Resize and collapse
    Setup
      fx-autoconfig loader
      Browser profile files
      CSS import
      Cache clear restart
    Compatibility
      Zen Browser 1.7+
      Light and dark themes
    Data
      Browser local storage
      Last edited date
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Keep a persistent to-do list or reminder visible in your browser sidebar without switching apps

USE CASE 2

Jot down research notes that auto-save and persist across browser sessions without a separate notes app

USE CASE 3

Color-code different note topics using five pastel backgrounds that blend with Zen Browser's light or dark theme

Tech stack

JavaScriptCSSuserChrome.js

Getting it running

Difficulty · moderate Time to first run · 30min

Requires manually installing a userChrome.js loader (fx-autoconfig) and copying files into your browser profile, not available through any extension store.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Zen Notes is a sticky-note widget that lives inside the Zen Browser sidebar, pinned just above the workspace switcher at the bottom. It gives you a persistent notepad that survives browser restarts, styled to look like a classic sticky note and blending with both light and dark browser themes. The widget supports basic rich text: you can make text bold or italic using toolbar buttons or standard keyboard shortcuts. Notes save automatically as you type without requiring any manual save action. You can pick from five pastel background colors (yellow, orange, purple, green, blue) for the note card, collapse the widget by clicking the header when you do not need it, and resize it by dragging a bar above it. The last-edited date is shown on the note header. Installation requires a bit of setup because Zen Browser (which is built on Firefox) does not natively support custom JavaScript injections in the sidebar. You first need to install a userChrome.js loader such as fx-autoconfig, then copy the widget files into your browser profile's chrome folder, add a CSS import line, and clear the browser's startup cache before restarting. The README links to a detailed install guide and mentions that uninstalling is equally manual: remove the files and delete the saved preference from the browser's about:config page. The project is at version 1.0.1, requires Zen Browser 1.7.0 or later, and is licensed under MIT.

Copy-paste prompts

Prompt 1
Walk me through installing zen-notes in Zen Browser 1.7, specifically setting up fx-autoconfig and copying the widget files into my browser profile's chrome folder
Prompt 2
Help me modify zen-notes to add a sixth color option and change the default font size of the sticky note
Prompt 3
Show me how to completely uninstall zen-notes from my Zen Browser profile, including removing the saved preference from about:config
Open on GitHub → Explain another repo

← jjspscl on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.