This Chrome extension fixes the long-standing compatibility issues between Google Translate(including other translation plugins) and React (and other modern JavaScript frameworks) that have been plaguing user and developers since 2018.
Google Translate breaks React applications by:
- DOM Manipulation Conflicts: Google Translate wraps translated text in
<font>tags, changing the parent-child relationships that React relies on - Text Node Disruption: Moving and replacing text nodes breaks React's virtual DOM reconciliation
- Event Target Issues: DOM changes make
event.targetunreliable - Normalization Problems: DOM tree normalization breaks React's text node boundaries
This results in errors like:
Application error: a client-side exception has occurred while loading xxx.com (see the browser console for more information).
or
DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
✅ Prevents React Crashes: solves the "a client-side exception has occurred while loading" errors
✅ Framework Agnostic: Works with React, Vue, Angular, Svelte, and others
✅ Zero Configuration: Works automatically after installation
✅ Performance Optimized: Minimal overhead, only activates when needed
✅ Debug Interface: Popup shows status and debug information
✅ Error Recovery: Gracefully handles edge cases and provides fallbacks
- Chrome Version: 88+ (Manifest V3)
- Websites: All websites (activates automatically)
- Frameworks: React, Vue, Angular, Svelte, Solid.js, and others
- Google Translate: All translation features work normally
This extension provides a comprehensive fix by:
- Patching DOM Methods: Safely handles
removeChild,insertBefore,replaceChildoperations - Error Boundary Protection: Catches and handles DOM manipulation errors gracefully
- Translation Detection: Identifies Google Translate activity and adjusts behavior accordingly
- Text Node Preservation: Maintains original DOM structure where possible
- Framework Agnostic: Works with React, Vue, Angular, and other modern frameworks
- Edge Installation address
- Chrome Installation address
- Safari No plan for now.
- Download or clone this repository
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right
- Click "Load unpacked" and select the extension directory
- The extension will be loaded and active on all websites
The extension injects its fix script at document_start to ensure it runs before Google Translate or React.
// Example of how the extension patches DOM methods
Node.prototype.removeChild = function(child) {
try {
if (!this.contains(child)) {
return child; // Safely handle missing nodes
}
return originalRemoveChild.call(this, child);
} catch (error) {
// Handle Google Translate conflicts gracefully
return child;
}
};The extension detects Google Translate activity by:
- Monitoring for
translate_m.jsin stack traces - Checking for
window.google.translate - Identifying characteristic DOM patterns
When DOM operations fail, the extension provides safe fallbacks:
removeChilderrors are ignored when the node isn't actually a childinsertBeforefalls back toappendChildwhen reference nodes are missingreplaceChildattempts append operations when replacement fails
- Check that the extension is enabled in
chrome://extensions/ - Refresh the page after installing the extension
- Check the extension popup for status information
If you encounter issues:
- Note the specific website and steps to reproduce
- Check the browser console for error messages
- Include the extension popup debug information
- Test with the extension temporarily disabled to confirm it's related
The extension exposes debug information at window.__reactGoogleTranslateFixDebug for advanced users:
// Access debug information in browser console
console.log(window.__reactGoogleTranslateFixDebug);This extension addresses a critical compatibility issue that has affected countless developers. Contributions are welcome:
- Test the extension on various React applications
- Report compatibility issues with specific websites
- Suggest improvements to the DOM patching logic
- Help with additional framework testing
Unlike previous solutions that focused only on the <font> tag issue, this extension addresses the root cause: DOM manipulation conflicts between Google Translate and virtual DOM libraries.
The key insights:
- Error Prevention vs. Error Recovery: Instead of trying to prevent Google Translate from modifying the DOM, we make the modifications safe
- Graceful Degradation: When operations fail, we provide sensible fallbacks rather than crashing
- Context Awareness: We detect Google Translate context and adjust behavior accordingly
- Comprehensive Coverage: We patch all relevant DOM methods, not just the obvious ones
The extension has minimal performance impact:
- Only activates when DOM manipulation errors occur
- Uses WeakMap and WeakSet for efficient memory management
- Avoids unnecessary DOM traversals
- Patches are lightweight wrappers around native methods
- v1.1.0: Current version with comprehensive DOM manipulation fixes
MIT License - Feel free to use, modify, and distribute.
Note: This extension solves a 6-year-old compatibility issue between Google Translate and modern JavaScript frameworks. It's designed to be a temporary solution until Google addresses the root cause in Chrome itself.