Live2D X.com Chrome Extension – Animation Overlay

Live2D x.com Overlay Extension

Claw2dx is a Chrome extension that injects an animated Live2D character overlay into X.com (formerly Twitter), powered by the live2d-helper.js library and inspired by the Clawdbot project. The extension renders a bundled Asuna model with a lightweight control console in the lower-left corner, enabling users to interact with the character through expressions, motions, head-tracking, and audio triggers while browsing social media.

Purpose and Significance

Claw2dx solves the technical challenge of embedding interactive 2D character animations into real-world web platforms. Rather than running Live2D in isolation, the extension injects the animation system directly into X.com's page context, maintaining a persistent, non-intrusive overlay. This approach is valuable for developers exploring character-driven UI enhancements, social media customization, and browser-based animation frameworks. The project bridges the gap between desktop Live2D implementations and modern web standards, providing a working reference for content script injection patterns and runtime compatibility patching.

Key Features

• Live2D Character Rendering: Bundled Asuna model with full Cubism SDK 2 WebGL runtime, rendering directly on X.com pages without background distraction.
• Interactive Control Console: On-page buttons trigger random expressions, idle and body motions, head-follow toggling, and sound playback with minimal visual footprint.
• Content Script Architecture: Injects CSS, JavaScript runtime, and helper libraries into page context while maintaining extension sandbox security via manifest.json web_accessible_resources.
• Runtime Patching: Includes patch-live2d-helper.js to monkey-patch the Live2D helper library, removing legacy API calls (modelsViewPointer) and ensuring optional components remain safe.
• Self-Contained Assets: All dependencies—lib/, dist/, and assets/—are included in the extension, eliminating external CDN requirements and ensuring offline functionality.
• Developer Logging: Integrated console logs motion groups, sound loading, and action execution for troubleshooting and extension development.

Getting Started

1. Open chrome://extensions (or edge://extensions for Edge) and enable Developer mode.
2. Click Load unpacked and select the extension directory.
3. Navigate to https://x.com; the Live2D overlay should appear automatically in the lower-left corner.
4. Use the control buttons to interact: trigger expressions, toggle head-following, play sounds, and log character actions.

Verification: If the overlay does not appear, confirm the extension is enabled in chrome://extensions and the current URL matches the https://x.com/* manifest pattern. Open DevTools (Ctrl+Shift+I) to check the console for motion group or asset loading errors.

Architecture Overview

manifest.json defines host permissions, injects content.js, and exposes helper scripts and assets via web_accessible_resources—the entry point for extension installation and permission scoping.

content.js runs as a content script with sandboxed access, injecting the stylesheet, Live2D runtime, runtime patch, and initialization script into the page context. This separation maintains security while allowing direct DOM manipulation.

patch-live2d-helper.js monkey-patches the Live2D helper to remove deprecated API calls and ensure optional features remain functional across different page states.

init-live2d.js executes in the page context, building the canvas and console UI, loading the Asuna model and assets, driving character actions, and maintaining a short activity log.

Supporting directories—lib/, dist/, and assets/—are copied from live2d-helper.js and include the Live2D.min.js runtime, the bundled helper, and model data, creating a completely self-contained extension.

Who This Is For

• Browser Extension Developers: Learn content script injection, asset bundling, runtime patching, and sandbox communication patterns in production Chrome extensions.
• Web Animation Engineers: Explore integrating Live2D and Cubism SDK 2 into web applications with practical workarounds for third-party library compatibility.
• Social Media Customization Enthusiasts: Use or fork the extension to personalize X.com browsing with interactive character overlays.
• Open-Source Learners: Study how to adapt existing libraries (live2d-helper.js) for new use cases while maintaining clean architecture and troubleshooting workflows.

Technical Dependencies

• Cubism SDK 2 WebGL (bundled as live2d.min.js)
• live2d-helper.js library (distributed in dist/ and lib/)
• Chrome Extension manifest v3 compatible browser (Chrome, Edge, Brave, etc.)
• JavaScript (content scripts, initialization, and patching)

Maintenance and Updates

When updating the underlying Live2D helper library, replace lib/live2d.min.js, dist/live2d-helper.min.js, and contents of assets/ with the latest versions from the upstream live2d-helper.js repository, then reload the extension in chrome://extensions.

Related Resources

• Original Live2D Helper: huiyadanli/live2d-helper.js — The foundation library providing Live2D runtime and model management.
• Cubism SDK 2: Official Live2D Cubism runtime for WebGL-based 2D character rendering.
• Chrome Extension Documentation: Content scripts, manifest configuration, and web_accessible_resources best practices.
• chrome-extension-content-scripts
• live2d-web-integration

Source: GitHub repository carzygod/claw2dx, updated February 2026. Built on live2d-helper.js (huiyadanli) and Cubism SDK 2 WebGL runtime.