YouTube GIF Comments

A Chrome extension that allows users to seamlessly insert and render inline GIFs in YouTube comments.

Rather than relying on external links, this extension integrates directly into YouTube's native comment box UI and handles the rendering of GIF tags ([gif:provider:id]) directly in the DOM for anyone who has the extension installed.

Features

• Native UI Integration: Injects a custom "GIF" button directly into the YouTube comment box footer, right next to the native emoji picker.
• Giphy Search: A lightweight, fast search interface connecting directly to the Giphy API.
• Attachment Architecture: Bypasses YouTube's strict React state lifecycle. Selected GIFs are kept out of the text input area visually but attached to the comment state, rendering a clean preview below the comment box before submission.
• Inline Rendering: Scans YouTube comment threads and replaces raw [gif:...] tags with actual images seamlessly without breaking the page layout.
• React State Interception: Uses a proxy-button overlay and Zero-Width Non-Joiner characters to safely trick YouTube's frontend into accepting "image-only" comments without causing React re-render conflicts.

Installation

For Chrome, Brave, and Edge

1. Clone or download this repository.
2. Open your browser and navigate to chrome://extensions/.
3. Enable Developer mode in the top right corner.
4. Click Load unpacked and select the extension folder.

For Firefox

1. Clone or download this repository.
2. Open Firefox and navigate to about:debugging.
3. Click on This Firefox in the left sidebar.
4. Click Load Temporary Add-on... and select the manifest.json file inside the extension folder.

Setup & API Key

To enable GIF searching, you need to provide your own Giphy API key.

1. Navigate to the extension directory.
2. Create a copy of config.example.js and rename it to config.js.
3. Go to the Giphy Developer Portal and create a free API key.
4. Paste your API key into config.js:

   const CONFIG = {
     GIPHY_API_KEY: 'your_api_key_here'
   };

Note: config.js is included in the .gitignore to prevent accidental public commits of your private keys.

Architecture

The extension is split into core, UI, and content layers to respect YouTube's DOM constraints:

• core/parser.js & core/resolver.js: Handles regex string matching and resolves raw provider IDs into direct CDN media URLs.
• ui/picker.js: Manages the search UI, API requests, and the complex injection logic required to bind our custom UI to YouTube's contenteditable component safely.
• content/scanner.js & content/renderer.js: Uses a heavily optimized TreeWalker to scan the DOM for text nodes containing our tags without freezing the browser during scrolling.
• content/observer.js: Uses MutationObserver to watch for newly loaded comments or dynamically injected comment boxes.

License

This project is released under a Custom License.

You are free to view and learn from the source code for educational purposes. However, you are not permitted to modify, redistribute, re-upload, or share this extension or its codebase anywhere else. The author retains all exclusive rights to publish and distribute this software. See the LICENSE file for full details.