Hello Highlighter - Microsoft Word Office Add-in

A Microsoft Word Office Add-in that automatically highlights all occurrences of the word "hello" (or any custom word) in your document using Office.js API.

Features

• Automatic Search: Searches for all occurrences of a specified word in the document
• Yellow Highlighting: Highlights found words with a bright yellow background
• Placeholder Conversion: Convert highlighted words to placeholder format (e.g., "hello" → "{{hello}}")
• Customizable: Change the search word and toggle case sensitivity
• Clear Function: Remove all highlights with one click
• Status Updates: Real-time feedback on search results
• Task Pane Interface: Clean, user-friendly interface

Project Structure

hello-highlighter-addin/
├── manifest.xml          # Add-in manifest file
├── taskpane.html         # Main UI for the task pane
├── taskpane.js           # JavaScript logic for highlighting
├── commands.html         # Commands page (required by manifest)
├── server.js             # Express server for local development
├── package.json          # Node.js dependencies
├── assets/               # Directory for icon files
└── README.md            # This file

Installation

1. Install Dependencies

npm install

2. Start the Development Server

npm start

The server will start with HTTPS support and display:

Generated self-signed HTTPS certificates for localhost
Hello Highlighter Add-in server running on https://localhost:3000
Manifest available at: https://localhost:3000/manifest.xml
Task pane available at: https://localhost:3000/taskpane.html
HTTPS enabled - compatible with Word Online!

3. Sideload the Add-in in Microsoft Word

Method 1: Word Online (Recommended)

Accept HTTPS Certificate:

1. Open Edge browser and navigate to https://localhost:3000
2. Click "Advanced" → "Continue to localhost (unsafe)" when you see the security warning
3. Verify you see the server page

Upload Add-in:

1. Open Word Online in Edge (office.com → Word)
2. Create a new document
3. Go to Insert → Add-ins → More Add-ins
4. Click "Upload My Add-in" or "Advanced Options"
5. Select the manifest.xml file and upload

Use the Add-in:

1. Find "Hello Highlighter" in the Home tab ribbon
2. Click "Show Taskpane" to open the interface
3. The add-in will automatically highlight all instances of "hello"

Method 2: Desktop Word

1. Open Microsoft Word (desktop version)
2. Create a new document
3. Go to Insert → Office Add-ins
4. Click "Upload My Add-in"
5. Select the manifest.xml file and upload

4. Using the Add-in

1. Click "Show Taskpane" in the Home tab
2. The add-in automatically searches for "hello" and highlights all occurrences
3. Highlight Words: Search and highlight occurrences of your chosen word
4. Convert to Placeholders: Transform highlighted words into placeholder format (e.g., "hello" becomes "{{hello}}")
5. Clear Highlights: Remove all highlighting from the document
6. Customize your search by changing the word or toggling case sensitivity

How It Works

The add-in uses the Word JavaScript API to search documents using body.search(), apply yellow highlighting with font.highlightColor, track ranges for clearing, and provide user feedback.

Key code:

const searchResults = body.search(searchWord, {
    matchCase: caseSensitive,
    matchWholeWord: false,
    matchWildcards: false
});

for (let i = 0; i < searchResults.items.length; i++) {
    const range = searchResults.items[i];
    range.font.highlightColor = '#FFFF00'; // Yellow
}

Quick Demo Instructions

1. Clone and setup:

   git clone [your-repo-url]
   cd add-in
   npm install
   npm start

2. Accept certificate: Go to https://localhost:3000 in Edge, click "Advanced" → "Continue to localhost"

3. Test in Word Online: Open Word Online → Insert → Add-ins → Upload manifest.xml

4. See it work: Type "hello world" in the document, the add-in will highlight "hello" automatically!

Troubleshooting

Most Common Issues & Solutions

1. "Add-in Error" - Something went wrong (SOLVED)

Problem: SSL/Certificate errors in Word Online

Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

Solution:

1. Ensure HTTPS server is running (look for "HTTPS enabled" in console)
2. Accept the certificate: Open https://localhost:3000, click "Advanced" → "Continue to localhost"
3. Reload Word Online and try the add-in again

2. Server not starting with HTTPS

Problem: Server falls back to HTTP

HTTPS setup failed, falling back to HTTP
Hello Highlighter Add-in server running on http://localhost:3000

Solution:

npm install --save-dev selfsigned
npm start

3. Add-in doesn't appear after upload

Solutions:

• Check server is running: Visit https://localhost:3000/taskpane.html directly
• Clear browser cache: Ctrl+Shift+R in Word Online
• Re-upload manifest: Remove and re-add the add-in
• Check manifest URLs point to https://localhost:3000

4. "Upload My Add-in" option missing

Word Online: Go to Insert → Add-ins → More Add-ins → "Upload My Add-in" or "Advanced Options" Desktop Word: Insert → Office Add-ins → Upload My Add-in

5. Certificate warnings persist

1. Restart Edge completely
2. Clear certificates: Edge Settings → Privacy → Clear browsing data → Cookies
3. Re-accept certificate: Visit https://localhost:3000 again
4. Alternative: Use Firefox or Chrome for testing

Debugging Tools

Debug in Word Online:

1. Press F12 in Word Online
2. Console tab: Look for JavaScript errors
3. Network tab: Check for failed requests to localhost:3000
4. Right-click in task pane: Select "Inspect Element"

Normal console messages (ignore):

[Violation] Potential permissions policy violation: autoplay is not allowed
Some icons were re-registered

Error messages to watch for:

• Bad: Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID
• Good: Office.js is ready and 200 GET https://localhost:3000/taskpane.html

Testing Steps

Test server: curl -k https://localhost:3000 (should return HTML)

Test files:

• Manifest: https://localhost:3000/manifest.xml
• Task Pane: https://localhost:3000/taskpane.html
• JavaScript: https://localhost:3000/taskpane.js

Test environments: Word Online, Desktop Word, different browsers

API Reference

Main functions: highlightWords(), convertToPlaceholders(), clearHighlights(), searchAndHighlight(), getDocumentStats()

Office.js APIs: Word.run(), context.document.body, body.search(), range.font.highlightColor, context.sync()