I want to translate a web with a database of words and terms

Question

There is a free wargame army builder in English that I want to make available for Spanish talking communities, so I want people can see the content in Spanish, automatic translation is not reliable enough for translating rules because you can't use synonyms, 've tried the following But I'd like to know what is wrong because it doesn't work.

Help me please, thank you. The code is the following

translations.json, database with terms.

{
  "Shark Club": "Garrote de tiburón",
  "Fireball": "Bola de fuego",
  "Health Potion": "Poción de salud",
  "Hero": "Héroe", 
  "Tough": "Resistente",
  "Predator": "Depredador"
}

manifest.json

{
    "manifest_version": 3,
    "name": "Traductor de páginas web",
    "version": "1.0",
    "description": "Esta extensión traduce las páginas web al español usando una base de datos propia",
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ],
    "permissions": ["activeTab"]
  }

content.js

// content.js
// Este archivo se ejecuta en el contexto de la página web y reemplaza el texto con las traducciones

// Esta función carga el archivo JSON con la base de datos de las traducciones
function loadTranslations() {
  // Usa la función fetch para obtener el contenido del archivo JSON
  fetch("translations.json")
    .then(response => response.json()) // Convierte la respuesta en un objeto JSON
    .then(data => translateText(data)) // Llama a la función translateText con el objeto JSON como argumento
    .catch(error => console.error(error)); // Muestra un error si hay algún problema
}

// Esta función reemplaza el texto de la página web con las traducciones del objeto JSON
function translateText(data) {
  // Obtiene todos los elementos de texto de la página web
  let textElements = document.querySelectorAll("p, h1, h2, h3, h4, h5, h6, span, a, li, button");
  // Recorre cada elemento de texto
  for (let element of textElements) {
    // Obtiene el texto original del elemento
    let originalText = element.textContent;
    // Recorre cada propiedad del objeto JSON
    for (let key in data) {
      // Crea una expresión regular con la propiedad (que es la palabra o frase en inglés)
      let regex = new RegExp(key, "g");
      // Si el texto original coincide con la expresión regular
      if (regex.test(originalText)) {
        // Reemplaza la expresión regular por el valor (que es la traducción en español)
        let translatedText = originalText.replace(regex, data[key]);
        // Asigna el texto traducido al elemento
        element.textContent = translatedText;
      }
    }
  }
}

// Llama a la función loadTranslations cuando se carga la página web
window.addEventListener("load", loadTranslations);