fix: use base tag to resolve relative URLs in translated pages

This commit is contained in:
Russell Ballestrini 2025-07-09 16:30:14 -04:00
parent 275f9e02fa
commit bf9d7da770

View file

@ -378,53 +378,22 @@ export async function translateCurrentPage(targetLanguage) {
// Replace the body content with translated content
doc.body.innerHTML = translatedContent;
// Convert ALL relative URLs to absolute URLs so they work in new window
const currentOrigin = window.location.origin;
// Add a base tag to resolve all relative URLs correctly
const currentUrl = window.location.href;
const baseUrl = new URL('.', currentUrl).href; // Get base URL (without filename)
// Convert CSS links
const cssLinks = doc.querySelectorAll('link[rel="stylesheet"]');
cssLinks.forEach(link => {
const href = link.getAttribute('href');
if (href && !href.startsWith('http') && !href.startsWith('//')) {
const absoluteUrl = new URL(href, currentUrl).href;
link.setAttribute('href', absoluteUrl);
console.log('Converted CSS URL:', href, '->', absoluteUrl);
}
});
// Remove any existing base tag
const existingBase = doc.querySelector('base');
if (existingBase) {
existingBase.remove();
}
// Convert script sources
const scripts = doc.querySelectorAll('script[src]');
scripts.forEach(script => {
const src = script.getAttribute('src');
if (src && !src.startsWith('http') && !src.startsWith('//')) {
const absoluteUrl = new URL(src, currentUrl).href;
script.setAttribute('src', absoluteUrl);
console.log('Converted script URL:', src, '->', absoluteUrl);
}
});
// Add new base tag to head
const baseTag = doc.createElement('base');
baseTag.setAttribute('href', baseUrl);
doc.head.insertBefore(baseTag, doc.head.firstChild);
// Convert image sources
const images = doc.querySelectorAll('img[src]');
images.forEach(img => {
const src = img.getAttribute('src');
if (src && !src.startsWith('http') && !src.startsWith('//') && !src.startsWith('data:')) {
const absoluteUrl = new URL(src, currentUrl).href;
img.setAttribute('src', absoluteUrl);
console.log('Converted image URL:', src, '->', absoluteUrl);
}
});
// Convert link hrefs (for navigation)
const links = doc.querySelectorAll('a[href]');
links.forEach(link => {
const href = link.getAttribute('href');
if (href && !href.startsWith('http') && !href.startsWith('//') && !href.startsWith('#') && !href.startsWith('mailto:') && !href.startsWith('tel:')) {
const absoluteUrl = new URL(href, currentUrl).href;
link.setAttribute('href', absoluteUrl);
console.log('Converted link URL:', href, '->', absoluteUrl);
}
});
console.log('Added base tag with href:', baseUrl);
return doc.documentElement.outerHTML;
}