YouTube QA Extension

This extension injects a QA button into YouTube's video watch page, providing additional question answering functionality. It leverages React for dynamic rendering and uses the modern createRoot API from React 18+ to mount the component into the YouTube DOM.

Features

• Dynamic Injection:
  Waits for YouTube's subscribe button container to be available, then inserts a QA button right after it.

• SPA Navigation Support:
  Uses a MutationObserver to detect video changes on YouTube, ensuring that the QA button is re-injected when navigating between videos.

• React-Powered UI:
  Utilizes React for efficient and dynamic component rendering.

File Overview

• content.ts:
  The main script responsible for:
  • Injecting the QA button into the page.
  • Observing YouTube’s DOM for changes (i.e., video navigation).
  • Initializing and cleaning up the React component accordingly.

How It Works

1. Initial Injection:

   • The script continuously checks for the YouTube subscribe button container.
   • Once detected, it creates a new container (div with id youtube-qa-root), inserts it after the subscribe button, and mounts the React component (YouTubeQAButton).

2. Handling Video Changes:

   • A MutationObserver monitors the video title element.
   • When the title changes (indicating a new video), the observer unmounts and removes the previous instance of the QA button.
   • It then reinjects a fresh instance for the new video.

3. Initialization:

   • The init function starts the process by calling both the injection logic and the observer.
   • It ensures proper timing by waiting for the DOM to be fully loaded if necessary.

Installation

1. Clone the Repository:

   git clone https://github.com/yourusername/youtube-qa-extension.git
   cd youtube-qa-extension