DocFixer Extension

Browser extension for Firefox & Chrome — sort references A–Z and resize images while working in Microsoft Word Online, SharePoint, and OneDrive.

---

Features

Feature	Reliability	How it works
Paste Mode (References)	✅ Always works	Paste → Sort → Copy → Paste back in Word
Clipboard Sort (References)	✅ Very reliable	Reads clipboard, sorts, writes back
Live Selection (References)	⚡ Experimental	Reads DOM selection if accessible
Image Resizer	⚠ Limited	Tries to resize accessible DOM images

Honest note: Word Online renders documents in a protected iframe/canvas layer. Direct DOM access to the document editing area is generally blocked. The extension uses a clipboard-based workflow as the primary path and clearly flags limitations.

---

Install (Firefox)

Option A — Load as Temporary Add-on (development)

1. Build the extension:

   npm install
   npm run build
   

2. Open Firefox → address bar → about:debugging

3. Click This Firefox → Load Temporary Add-on…

4. Navigate to dist/ → select manifest.json

5. The DocFixer icon appears in the toolbar.

Option B — Package for permanent install

npm run build
cd dist && zip -r ../docfixer-extension.zip .

Then install the .zip via about:addons → gear icon → Install Add-on From File.

---

Install (Chrome)

1. Update manifest.json:

   • Change "manifest_version": 2 → 3
   • Change "browser_action" → "action"
   • Change "background": { "scripts": [...] } → "background": { "service_worker": "background/background.js" }
   • Remove "browser_specific_settings"

2. Build: npm run build

3. Chrome → chrome://extensions → Developer mode ON → Load unpacked → select dist/

---

How to use

Reference Sorter (Paste Mode — recommended)

1. In Word Online, select your references and copy them (Ctrl+C).
2. Click the DocFixer toolbar icon.
3. Paste into the Paste Mode textarea.
4. Click Sort A–Z.
5. Click Copy to Clipboard.
6. Click back in Word Online where your references are.
7. Select the old references, press Ctrl+V to paste the sorted version.

Reference Sorter (Clipboard Sort — convenient)

1. Select references in Word Online → Ctrl+C.
2. Click DocFixer → Sort Clipboard References.
3. Go back to Word → select old references → Ctrl+V.

Image Resizer

1. Open DocFixer on any Word Online page.
2. Switch to the Images tab.
3. Enter a width (and optionally height) in pixels.
4. Click Find & Resize Images in Page.
5. The extension scans accessible <img> elements on the page and applies CSS sizing.

Note: Images rendered inside Word Online’s protected document canvas usually cannot be accessed. Results depend on the page structure.

---

Project structure

docfixer-browser-extension/
├── manifest.json
├── package.json
├── tsconfig.json
├── webpack.config.js
├── public/
│   └── icons/
│       ├── icon-16.png
│       ├── icon-32.png
│       ├── icon-48.png
│       └── icon-128.png
├── src/
│   ├── popup/
│   │   ├── popup.html      Main popup UI (3 reference modes + image resizer)
│   │   ├── popup.ts        All popup logic
│   │   └── popup.css       Styles
│   ├── content/
│   │   └── contentScript.ts  Injected into Office/SharePoint pages
│   ├── background/
│   │   └── background.ts   Minimal event page
│   ├── features/
│   │   ├── referenceSorter.ts    Pure sort logic (strips numeric prefixes)
│   │   ├── imageResizer.ts       DOM image finder + CSS resizer
│   │   └── wordOnlineDetector.ts Detects if on Word Online
│   └── utils/
│       ├── messaging.ts    TypeScript message type contracts
│       ├── validation.ts   Input validation
│       └── domHelpers.ts   Image collection helpers
└── docs/
    └── USER_GUIDE.md

---

Tech stack

Layer	Technology
Extension APIs	WebExtension (MV2 Firefox, adaptable to MV3 Chrome)
Language	TypeScript
Bundler	Webpack 5 + ts-loader
Cross-browser shim	webextension-polyfill
Styling	Plain CSS (no framework)

No backend, no external API, no database.