Detección de la traducción de Google Chrome

Te traemos el arreglo a esta preocupación, o por lo menos eso esperamos. Si presentas alguna pregunta coméntalo, que con gusto te responderemos

Solución:

Tal vez intente usar js para detectar si el contenido del menú ha cambiado y luego aplique nuevos estilos.

ACTUALIZAR

Cuando Chrome traduce una página, agrega varios elementos a una página:

• dos script elementos a head etiqueta
• objeto global window.google
• class = "translated-ltr" para html etiqueta
• div id="goog-gt-tt" para body etiqueta

Puede observar los cambios en DOM para saber cuándo se traduce el contenido:

document.addEventListener('DOMSubtreeModified', function (e) 
    if(e.target.tagName === 'HTML' && window.google) 
        if(e.target.className.match('translated')) 
            // page has been translated
          else 
            // page has been translated and translation was canceled
        
   
, true);

Sé que esto es muy tarde… y no es una solución JS… pero si solo necesita poder asegurarse de que puede diseñar elementos en su página cuando se muestra la barra de Google Translate, puede usar CSS. El código de traducción agrega una clase de “translated-ltr” (o “translated-rtl” si el idioma es de derecha a izquierda y no de izquierda a derecha como el inglés) a la etiqueta del cuerpo.

Entonces puedes usar clases CSS como:

.translated-ltr .nav, .translated-rtl .nav 

sustituyendo la clase/identificación correcta para sus artículos según sea necesario.

¡Espero que esto ayude!

A partir de 2019, la respuesta seleccionada anteriormente no parece funcionar por completo, sin embargo, he podido usar la siguiente versión modificada para rastrear los cambios de nombre de clase en el elemento (document.documentElement) cuando se usa traducir o “Mostrar original”:

var observer = new MutationObserver(function (event) 
    if(document.documentElement.className.match('translated')) 
        alert("Page translate");
     else 
        alert("Page untranslate");
    
);

observer.observe(document.documentElement, 
  attributes: true,
  attributeFilter: ['class'],
  childList: false,
  characterData: false
);

Sin embargo, es importante tener en cuenta que esto se activará al comienzo de la traducción de la página, antes de que se haya cambiado el contenido individual.

Si necesita realizar una acción que depende de las características del texto traducido (p. ej., comprobar si ahora se desborda un div), entonces necesitará realizar un seguimiento de los cambios en los elementos con contenido de texto para ver si realmente se han traducido, mientras que también usando el código anterior para establecer una bandera para determinar si el cambio es el resultado de una traducción o una reversión al texto original.

Te mostramos reseñas y puntuaciones

Si estás contento con lo expuesto, puedes dejar un tutorial acerca de qué le añadirías a este enunciado.

---

---

Utiliza Nuestro Buscador