Feature: Content Injection Scripts

[ashwu11]

📝 Description

1. Created content injection scripts that injects UI components into Piazza pages using Shadow DOM (see below for screenshots)

   • Semantic search bar on the left column below Piazza search bar
   • AI response card under each post and is re-rendered when switching posts
   • Check Duplicates composer button under composer area when creating a new post
   • Suggest Answer composer button under composer area when editing student answer under a post

2. Added a toggle in popup to enable and disable ui injections

3. Implemented messaging bridge to connect injected ui components with background service workers

   • AI Response Summary Card sends "REQUEST_AI_SUMMARY" > recieve "AI_SUMMARY_RESULT" whenever a post loads
   • Search Button sends "REQUEST_SEARCH" with input text as query > recieve "SEARCH_RESULT"
   • Suggest Answer button sends "REQUEST_AI_SUGGESTION" on click > recieve "AI_SUGGESTION_RESULT"
   • Check Duplicates button sends "REQUEST_DUPLICATE_CHECK" on click > recieve "DUPLICATE_CHECK_RESULT"

4. Added a README explaining injection points, selectors used, and testing instructions

Updated structure

src/
├── background/             # Background processes
│   └── service-worker.js   # Service worker for extension
├── config/                 # Configuration management
│   └── config.js           # Environment configuration loader
├── content/                # Content scripts (injected into Piazza)
│   ├── bridge/
│   │   └── bridge.js       # Message bridge to connect UI injections with background
│   ├── dom/                
│   │   └── root.js         # Shadow dom root used for UI injections
│   ├── observe
│   │   └── observer.js     # Monitor DOM changes for re-injection
│   ├── ui/                
│   │   ├── components.js   # UI injection components
│   │   ├── renders.js      # Renders components into shadow DOM
│   │   └── styles.js       # Component styles
│   └── piazza-enhancer.js  # Main content script
├── popup/                  # Extension popup interface
│   ├── popup.css           # Popup styling
│   ├── popup.html          # Popup UI
│   └── popup.js            # Popup functionality
└── shared/                 
    └── contracts.js        # Common definitions to avoid naming drift

Injection Points

Component	Position	Selector
Search Bar	Below the Piazza search bar (left column)	#feed_search_bar
AI Summary Response Card	Below each visible post (right column)	#qaContentViewId
Check Duplicates Composer Button	Below the new post composer area	#main-post > :nth-child(8)
Suggest Answer Composer Button	Below the student answer composer area	#s_answer_edit

🎯 Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🔨 Refactoring (no functional changes)
• 🧪 Tests (adding or updating tests)
• 🔧 Chore (dependency updates, config changes, etc.)

🧪 Testing

• I have tested this change locally
• I have added/updated tests for this change
• All existing tests pass

📋 Checklist

• My code follows the code style of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

📸 Screenshots

🔗 Related Issues

https://www.notion.so/launchpadubc/Content-Injection-Scripts-2901e489d9208008ab4ccbe7b14e31fc?source=copy_link