fix: inline external CSS in translated pages for new window compatibility

- Fetch external uncloseai CSS files and inline them as <style> tags
- Replace body content with translated version while preserving page structure
- Ensure new window is self-contained and doesn't need external CSS requests
- Maintain new window approach to avoid breaking current page

src/translation.js

@@ -368,5 +368,35 @@ export async function translateCurrentPage(targetLanguage) {
 			? `${pageContent.substring(0, maxLength)}...`
 			: pageContent;
 
-	return await translateText(contentToTranslate, targetLanguage);
+	// Translate the content
+	const translatedContent = await translateText(contentToTranslate, targetLanguage);
+	
+	// Parse the translated content to replace the original content
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(pageContent, 'text/html');
+	
+	// Replace the body content with translated content
+	doc.body.innerHTML = translatedContent;
+	
+	// Inline any external CSS that might be needed for the new window
+	const cssLinks = doc.querySelectorAll('link[rel="stylesheet"][href*="uncloseai"]');
+	
+	for (const link of cssLinks) {
+		try {
+			const response = await fetch(link.href);
+			const cssContent = await response.text();
+			
+			// Create a style element with the CSS content
+			const styleElement = doc.createElement('style');
+			styleElement.textContent = cssContent;
+			
+			// Replace the link with the inline style
+			link.parentNode.replaceChild(styleElement, link);
+		} catch (error) {
+			console.warn('Failed to inline CSS:', link.href, error);
+			// Keep the original link if fetching fails
+		}
+	}
+	
+	return doc.documentElement.outerHTML;
 }