Detecting Google Chrome Translation

Maybe try using js to detect if menu content has changed and then apply new styles.

UPDATE

When Chrome translates a page it adds several elements to a page:

  • two script elements to head tag
  • global object window.google
  • class = "translated-ltr" to html tag
  • div id="goog-gt-tt" to body tag

You can watch for changes in DOM to find out when content is translated:

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);

I know this is way late... and it's not a JS solution... but if you just need to be able to ensure you can style elements on your page when the Google Translate bar is being displayed, you can use CSS. The Translate code adds a class of "translated-ltr" (or "translated-rtl" if the language is right-to-left and not left-to-right like English) to the body tag.

So you can use CSS classess like:

.translated-ltr .nav, .translated-rtl .nav {}

substituting the correct class/ID for your items as needed.

Hope this helps!


I just wrote an article on detecting automatic machine-translations in Google Chrome, Yandex Browser, and Microsoft Translate Extension. I haven’t figured out how to detect Naver Whale browser yet, which is the last browser with a built-in page translation feature.

The short and sweet of it is watching out for the following DOM markers:

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

You can detect web-based proxy translation services from a list of domain names (found in the linked article.)


As of 2019 the selected answer above doesn't seem to entirely work, however I have been able to use the following modified version to track the class name changes to the <html> element (document.documentElement) when translate or "Show Original" is used:

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
});

However it's important to note that this will trigger at the beginning of page translation, before the individual content has actually been changed.

If you need to perform an action which depends on the characteristics of the translated text (e.g. to check if it now overflows a div), then you would need to track changes on elements with text content to see if they have actually been translated, while also using the above code to set a flag to determine whether the change is a result of a translation, or a reversion to the original text.

Tags:

Javascript

Google Chrome

Translation

Recent Posts