GitHub - IHaBiS02/SideNote

2 min read Original article ↗

A simple notes browser extension that provides a note-taking interface in the browser's side panel. SideNote supports Markdown editing with live preview, syntax highlighting, dark/light modes, and import/export functionality.

Features

  • Markdown Support: Write notes in Markdown with live preview
  • Soft Line Breaks: Preview renders normal newlines without requiring trailing spaces
  • Syntax Highlighting: Code blocks with syntax highlighting using highlight.js
  • Dark/Light Mode: Toggle between themes for comfortable viewing
  • Import/Export: Save and load notes in .snote and .snotes formats
  • Image Support: Paste and embed images directly into notes
  • Recycle Bin: Soft delete with 30-day auto-cleanup
  • Browser Integration: Works in Chrome AND Firefox (Firefox is in development)
  • Keyboard Shortcut: Quick access with Shift+Alt+W

Installation

From Store

Chrome
Firefox

For Development

  1. Clone this repository:

    git clone https://github.com/IHaBiS02/SideNote
cd SideNote

  2. Install dependencies:

  3. Build the extension:

  4. Load the extension:

    • Chrome: Go to chrome://extensions/, enable Developer mode, click "Load unpacked", select build/chrome/
    • Firefox: Go to about:debugging, click "This Firefox", click "Load Temporary Add-on", select the built extension

Usage

  1. Click the SideNote icon in your browser toolbar or use Shift+Alt+W
  2. The side panel will open with the notes interface
  3. Make a new note and write notes
  4. Press ESC or Shift+Enter to save edit and return to preview

You can paste image on the clipboard directly into notes by Ctrl+V.
Legacy text-processing options are available in settings for older Markdown workflows that used trailing spaces for line breaks.

In settings, you can choose theme, Mode of Title (Default use first line as title, Custom let user type own title by double-click title in note), text size, code block header behavior, image deletion behavior, and legacy Markdown line-break behavior.

Images button show all images used in the notes, showing that which one is used in which note. Recycle bin shows all soft-deleted notes and images, and let user delete all at once. Licenses show license of libraries used in this project.

Export buttons keep the default .snote / .snotes behavior on left click. Right-click an export button to choose .zip or .snote / .snotes; right-click the .zip option to show original Markdown and two-space line-break Markdown export options above the .zip row. All-notes .zip exports use sanitized note titles as folder names, with suffixes added when titles collide.

Development

Build Commands

# Install dependencies
npm install

# Build for both Chrome and Firefox
npm run build

License

See LICENSE file for details.