76 lines
3.2 KiB
Markdown
76 lines
3.2 KiB
Markdown
# 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](https://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`
|