Cr_oss — Track Changes for Outlook

Privacy-first Outlook compose add-in that brings Word-style track changes to email drafts. No backend, no login, no analytics — everything runs locally in the task pane.

Features

Draft redline — snapshot the compose body (or a selection), edit freely, then insert a formatted redline showing exactly what changed. Formatting and styling of the original email are preserved.

Live editor — bring a selection into the built-in editor and see track changes update in real time as you type. Copy the redlined output to paste anywhere in the draft.

Two workflows

1. Draft redline (Start Tracking → Insert Redline)

1. Optionally select text in the compose window (otherwise the full body is used).
2. Click Start tracking — the add-in snapshots the current content.
3. Edit the draft normally.
4. Click Insert Redline — the add-in diffs baseline vs. current and writes the styled result back into the compose body.

2. Live editor (Bring to editor / paste)

1. Select text in the compose window and click Bring to editor, or paste directly into the editor box.
2. Track Changes turns on automatically. Every edit you make is shown live in redline style.
3. Click Copy to copy the redlined HTML to the clipboard, then paste it wherever you want in the draft.

Try it in Outlook

No install or dev server required — the add-in is hosted at cr-oss-track.vercel.app.

Prerequisites: Outlook with permission to load a custom add-in.

1. Download the manifest

Outlook needs a local file, not a URL. Download manifest.xml using either method:

• GitHub Release (easiest): go to Releases → click on manifest.xml download from Assets.
• From the repo: open manifest.xml → click the download button (↓) on the file toolbar.
• Terminal: curl -LO https://github.com/thepranky/cr_oss/releases/latest/download/manifest.xml

2. Load the add-in on your Outlook

Outlook on the web

1. Open Outlook on the web and start a new email.
2. Apps (or Get Add-ins) → My add-ins → Custom add-ins → Add from file.
3. Select the manifest.xml you downloaded.
4. In the compose ribbon, open Cr_oss to launch the task pane.

New Outlook (Windows / Mac)

1. Settings → Manage add-ins.
2. My add-ins → Custom add-ins → Add from file → select manifest.xml.
3. Compose a new message and open Cr_oss from the ribbon.

Classic Outlook desktop

1. Get Add-ins → My Add-ins → Add a custom add-in → Add from file.
2. Select manifest.xml.

Tip: If the task pane is blank, check that cr-oss-track.vercel.app loads in your browser. Corporate networks that block Vercel may prevent the add-in from loading.

Note: This is a sideloaded add-in — it installs for your account only and is not published through Microsoft AppSource. You may need to re-add it after an update if Outlook prompts you, or remove and re-sideload the manifest.

Develop locally

Requires Node.js 20+ and npm.

npm install
npm run dev

The dev server runs at https://localhost:5173. Sideload manifest.dev.xml (not manifest.xml) so Outlook points at localhost.

Outlook for Mac (one-time setup)

Outlook on Mac uses Safari's WebKit engine, which blocks self-signed certificates. Use locally-trusted certs via mkcert:

brew install mkcert
mkcert -install          # prompts for your Mac password — adds a local CA to Keychain
npm run certs            # writes trusted certs to .certs/
npm run dev              # restart if already running

Verify in Safari: open https://localhost:5173 — it should load without a certificate warning.

Tip: If the task pane is blank during local dev, confirm the dev server is running and that you have trusted https://localhost:5173 in your browser first.

Scripts

Command	Description
npm run dev	HTTPS dev server on port 5173
npm run build	Production build to dist/
npm run preview	Preview production build
npm test	Run Vitest unit tests
npm run lint	ESLint
npm run certs	Generate locally-trusted dev certs via mkcert
npm run icons	Regenerate PNG icons in public/assets/

Manifest files

File	Use
manifest.xml	Production — points at cr-oss-track.vercel.app. Give this to users.
manifest.dev.xml	Local development — points at https://localhost:5173. Separate add-in ID so it can coexist with production.

HTTPS in development

Vite auto-uses .certs/localhost.pem when present (see vite.config.ts); otherwise it falls back to a self-signed cert via @vitejs/plugin-basic-ssl. The fallback works in browsers you can click through but not in Outlook for Mac — use mkcert there (see above).

Architecture

src/
  outlook/        Office.js wrappers (body I/O, selection, context detection)
  redline/        Diff engine and HTML rendering
    diff.ts         Word-level diff with char-level refinement
    htmlBlocks.ts   Block-aligned redline preserving paragraph/list structure
    htmlPlainMap.ts HTML ↔ plain-text index map for formatting-preserving render
    editorRedline.ts Live editor diff (baseline snapshot → styled output)
    workflow.ts     High-level redline entry points for both workflows
  components/     React UI components and contenteditable utilities
  hooks/          useTracking (draft workflow), useEditorRegion (bring-to-editor)
  utils/          Clipboard helpers

Key design decisions:

• Format preservation — the diff runs on plain text extracted from HTML, but the rendered output slices HTML segments from the original so inline styles, fonts, and bold/italic survive.
• Block alignment — paragraphs and list items are diffed as units so redline spans never cross block boundaries, keeping the output valid for email clients.
• No DOM mutation of the compose body — all transformations happen on the HTML string before writing it back via body.setAsync.

Validate the manifest

Use Microsoft's Office Add-in Validator or the Manifest Editor to check manifest.xml before sideloading.

License

MIT