Migrating Chrome Extensions to Preact and Tailwind with AI: A Reality Check

Can Claude Code migrate VanillaJS/HTML/CSS to Preact/Tailwind?

Jonathan Tuzman attempted to refactor a Chrome Extension using Claude Code to shift from VanillaJS to a modern Preact, TypeScript, and Vite stack. The AI generated a three-phase migration plan but failed to produce a valid manifest configuration, requiring manual intervention to resolve build errors.

Why This Matters

The technical reality of AI-driven migrations often hits a wall when dealing with domain-specific configuration files like manifest.json. While LLMs excel at generating standard boilerplate, they struggle with the specific build-time requirements of tools like CRXJS, leading to inefficient ‘fixes’ like running full builds on watch loops rather than implementing correct configuration patterns. This highlights the gap between AI-assisted code generation and the specialized architectural knowledge required for browser extension development.

Key Insights

• Claude Code successfully generated a 3-phase migration path covering Vite, CRXJS, TypeScript, Preact, and Tailwind setup in 2026.
• The AI failed to recognize that manifest.json cannot natively import TypeScript files, leading to persistent build errors.
• Preact was selected as a 3kB lightweight alternative to React to minimize extension overhead while maintaining modern API features.
• Manual resolution required adopting the CRXJS documentation’s file tree, specifically implementing a manifest.config.ts file to bypass AI hallucinations.
• Initial performance benchmarks showed the Preact-based popup taking several seconds to load after installation, indicating potential UX regressions.

Working Examples

A suboptimal build command suggested by Claude Code to resolve manifest import issues.

npm run build -- --watch

Practical Applications

• Use Case: Developers migrating extensions to Vite/CRXJS should use manifest.config.ts to handle TypeScript integration properly rather than standard JSON manifests.
• Pitfall: Relying on AI for build-tool configuration often results in circular reasoning where the tool claims a fix is applied without addressing the underlying syntax error.

References:

• https://dev.to/tuzmusic/can-claude-code-migrate-vanillajshtmlcss-to-preacttailwind-36jl