https://github.com/aryarkusuma/tchat-translator

• How to change mutate the dom of twitch chat in twitch stream website?

  • Javascript client doc query selector → make changes

  Ext.js

  In dev for youtube script

• Translator Server?

  • Free-Self-hosted

    • https://libretranslate.com/ ( AGPLV3 )

      • https://hub.docker.com/r/libretranslate/libretranslate - LibreTranslate Docker Hub

      

• Faced Problem

  • Issue with MutationObserver: The MutationObserver stops functioning correctly when clicking on a different streamer in the left-side streamer list on the Twitch live site.

    

    Why This Happens

    Twitch employs a single-page application (SPA) architecture, which means that navigating to another streamer does not trigger a full page refresh. As a result, the MutationObserver continues to reference the DOM elements associated with the previous streamer page memory location. Consequently, it fails to detect any new children or changes in the same DOM path since it’s still observing the old memory locations.

    Proposed Solution

    To resolve this issue, we can implement a mechanism to detect URL changes. When the URL changes (e.g., from twitch.tv/mazys to twitch.tv/appjack), we should disconnect the existing MutationObserver and reinitialize it. This ensures that the observer is now referencing the new DOM memory location corresponding to the currently active streamer.

    Implementation Steps

    Restart the MutationObserver: Upon detecting a URL change, disconnect the current observer and create a new one that targets the updated DOM.