designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename: Outlook Relook → Outcut, add keyboard presets, remove design UI from popup

Browse Source 
- Rename extension to "Outcut" throughout all source files and console logs
- Add KEY_PRESETS object (gmail/outlook) and matchesAction() helper to keyboard.js
- Rewrite handleKeydown to use preset-based dispatch instead of hardcoded switch
- Update updateSettings to re-init when keyboardPreset changes
- Add keyboardPreset: 'gmail' default to settings-defaults.js
- Replace popup Design Tweaks UI with preset dropdown + dynamic help text
- Keep all design tweak content script logic intact (activatable via storage)
- Update manifest: version 1.0.0, remove activeTab, add homepage_url
This commit is contained in:
Joel Brock
2026-04-27 14:11:45 -07:00
parent 93a5888d83
commit 3de2db7d89
10 changed files with 199 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
README.md
View File

@@ -1,75 +1,62 @@
# Outlook Relook
# Outcut
A Chrome extension that reskins Outlook Web App (outlook.office.com) with minimalist themes and granular control over visual clutter.
Keyboard shortcuts for Outlook Web App — Gmail-style multi-select, delete, archive, and more.
## 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
- **Gmail or Outlook shortcut presets** — choose your preferred key bindings
- **Multi-select** — select multiple messages and act on them at once
- **Batch actions** — delete, archive, flag, pin, move, read/unread on selected messages
- **Works everywhere** — outlook.office.com, outlook.cloud.microsoft, and Outlook PWA
## Install (Development)
### Gmail Preset (default)
| Key | Action |
|-----|--------|
| j / Down | Next message |
| k / Up | Previous message |
| x / Space | Toggle select |
| Shift+Down/Up | Extend selection |
| # | Delete |
| e | Archive |
| Shift+i / Shift+u | Toggle read/unread |
| v | Move to folder |
| f | Flag/unflag |
| p | Pin/unpin |
| Escape | Deselect all |
| Enter / o | Open message |
### Outlook Preset
| Key | Action |
|-----|--------|
| Down / j | Next message |
| Up / k | Previous message |
| Space | Toggle select |
| Shift+Down/Up | Extend selection |
| Delete / Backspace | Delete |
| e | Archive |
| q / Shift+i | Toggle read/unread |
| v | Move to folder |
| f / Insert | Flag/unflag |
| p | Pin/unpin |
| Escape | Deselect all |
| Enter | Open message |
## Install
### From Chrome Web Store
Coming soon.
### Development
1. Clone this repo
2. Open `chrome://extensions` in Chrome
3. Enable "Developer mode" (top-right toggle)
3. Enable "Developer mode"
4. Click "Load unpacked" and select this directory
5. Open [outlook.office.com](https://outlook.office.com) — the extension activates automatically
5. Open Outlook Web App — the extension activates automatically
## Usage
Click the extension icon to open the settings panel. Changes apply immediately — no page reload needed.
Click the extension icon to choose your shortcut preset (Gmail or Outlook) and toggle keyboard navigation on/off.
### Keyboard Shortcuts
## Privacy
**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`
Outcut stores only your preferences locally. No data is collected or transmitted. See [PRIVACY.md](PRIVACY.md).