Edge Extension Quick Start Guide

🚀 Quick Setup (5 minutes)

Step 1: Load Extension in Edge

1. Open Microsoft Edge
2. Go to edge://extensions/
3. Turn on “Developer mode” (toggle in top-right)
4. Click “Load unpacked”
5. Select the extension-edge folder
6. Extension should appear with green “On” toggle

Step 2: Test Basic Functionality

1. Click the Anchored extension icon in toolbar
2. Popup should open (400x600px window)
3. Try creating a test note
4. Verify note saves and appears in list

Step 3: Test on Different Websites

1. Visit different websites (github.com, stackoverflow.com, etc.)
2. Open extension popup on each site
3. Verify domain detection works correctly
4. Test note creation and retrieval per domain

🔧 Development Workflow

Making Changes

1. Edit files in extension-edge/ directory
2. Go to edge://extensions/
3. Click refresh icon on Anchored extension
4. Test changes immediately

Debugging Tools

Popup Debugging

Right-click extension icon → "Inspect popup"
OR
Open popup → Press F12

Background Script Debugging

edge://extensions/ → Find Anchored → "Inspect views: background page"

Content Script Debugging

Open any webpage → F12 → Sources → Content scripts

✅ Validation Checklist

Before considering Edge setup complete, verify:

• Extension loads without errors in edge://extensions/
• Popup opens and displays correctly (400x600px)
• Can create and save notes
• Notes persist after browser restart
• Background script runs (check in edge://extensions/)
• Content scripts inject on websites
• Keyboard shortcuts work (Alt+O, Alt+N)
• Context menus appear when right-clicking
• Storage operations work (local notes save)
• Sync functionality operates (if premium account available)

🐛 Common Issues & Solutions

Extension Won’t Load

• Check: manifest.json syntax with Get-Content extension-edge\manifest.json | ConvertFrom-Json
• Fix: Correct any JSON syntax errors

Popup Won’t Open

• Check: popup.html exists and popup.js has no errors
• Debug: Right-click extension icon → Inspect popup → Check console

Background Script Issues

• Check: background.js syntax and service worker registration
• Debug: edge://extensions/ → Inspect views: background page

Content Script Not Working

• Check: content.js loads on target websites
• Debug: F12 on webpage → Sources → Content scripts

📊 Performance Testing

Expected Performance (should match Chrome version)

• Popup load time: < 200ms
• Local search: < 100ms response
• Note creation: < 50ms save time
• Memory usage: < 50MB typical

Testing Commands

# Validate manifest
Get-Content extension-edge\manifest.json | ConvertFrom-Json

# Check file structure
Get-ChildItem extension-edge -Recurse -File | Measure-Object

# Run setup test (open in browser)
# Navigate to extension-edge/test-edge-setup.js in browser console

🎯 Next Steps

After successful Edge setup:

1. Cross-browser testing: Compare functionality with Chrome version
2. Performance benchmarking: Ensure parity with Chrome performance
3. Edge-specific features: Test Edge’s unique extension capabilities
4. Store preparation: Prepare for Edge Add-ons store submission

📝 Development Notes

Edge vs Chrome Differences

• APIs: Identical (both use chrome.* namespace)
• Manifest: Same Manifest V3 support
• Performance: Nearly identical (same Chromium engine)
• Store: Different submission process (Edge Add-ons vs Chrome Web Store)

Edge-Specific Advantages

• Same Chromium engine as Chrome = minimal compatibility issues
• Manifest V3 support identical to Chrome
• No API abstraction layer needed (unlike Firefox)
• Direct code reuse from Chrome version possible

✅ Setup Complete! Your Edge extension development environment is ready.

Run the validation checklist above to confirm everything works correctly.