Outlook Relook

A Chrome extension that reskins Outlook Web App (outlook.office.com) with minimalist themes and granular control over visual clutter.

Features

• Switchable themes: Swiss (Helvetica minimalism) and Material (clean, subtle elevation)
• Light & Dark modes with system preference detection
• ~40 granular toggles for density, element hiding, readability, and behavior
• MutationObserver suppresses dynamically injected clutter (Copilot, banners, suggested replies)
• Behavior patches: auto-collapse ribbon, suppress contact hover cards, auto-advance after delete, toast management
• Gmail-style keyboard navigation: j/k to move, x/Space to multi-select, # delete, e archive, Shift+i/u read/unread, v move
• Quick actions: "Mark all as read" button, Ctrl+Shift+K folder jump
• Settings sync across Chrome instances via chrome.storage.sync
• Export/Import/Reset settings

Install (Development)

1. Clone this repo
2. Open chrome://extensions in Chrome
3. Enable "Developer mode" (top-right toggle)
4. Click "Load unpacked" and select this directory
5. Open outlook.office.com — the extension activates automatically

Usage

Click the extension icon to open the settings panel. Changes apply immediately — no page reload needed.

Keyboard Shortcuts

Message list (Gmail-style):

• j / Down Arrow — Next message
• k / Up Arrow — Previous message
• x / Space — Toggle select
• Shift+Down / Shift+Up — Extend selection
• # — Delete selected
• e — Archive selected
• Shift+i — Mark read
• Shift+u — Mark unread
• v — Move to folder
• Escape — Deselect all
• Enter / o — Open message

Global:

• Ctrl+Shift+K (or Cmd+Shift+K on Mac) — Quick folder jump

Development

No build step. Edit files, reload the extension at chrome://extensions, refresh the OWA tab.

• themes/base.css — density/spacing/hiding rules (always loaded)
• themes/swiss.css / themes/material.css — theme-specific styles
• content/ — content scripts (observer, behavior, injector)
• popup/ — settings panel
• selectors-test.html — offline selector verification

Selector Strategy

OWA uses obfuscated class names. Selectors prioritize aria-label, data-*, and role attributes over class names. See content/selectors.js for the registry.

When selectors break after an OWA update, check the console for [Outlook Relook] warnings, inspect the live DOM, and update selectors.js.

Adding a New Theme

1. Create themes/yourtheme.css — define the same CSS custom properties as swiss.css
2. Add an option to the theme dropdown in popup/popup.html
3. That's it — the content script handles injection automatically

Adding a New Toggle

1. Add the key and default to DEFAULTS in both content/settings-defaults.js and popup/popup.js
2. Add the toggle HTML to the appropriate section in popup/popup.html
3. If CSS-based: add a data-or-* attribute mapping in content/content.js and the CSS rule in themes/base.css
4. If observer-based: add a selector entry to content/selectors.js and a mapping in content/observer.js
5. If behavior-based: add a setup function in content/behavior.js