DeepL Integration for Twitter (Userscript)

deepl-integration-for-twitter.user.js

// ==UserScript==
// @name         DeepL integration for Twitter
// @namespace    http://icedream.tech/
// @version      0.3.2
// @description  Add "Translate tweet with DeepL" button
// @author       Carl Kittelberger <[email protected]> (https://icedream.tech)
// @collaborator Remonade
// @match        https://twitter.com/*
// @grant        none
// @require http://code.jquery.com/jquery-3.5.1.min.js
// ==/UserScript==

/*eslint-env jquery*/

(function() {
    'use strict';

    var injectInterval = null;
    var waitForHeadNodeInterval = null;

    function isHTML(str) {
        var doc = new DOMParser().parseFromString(str, "text/html");
        return Array.from(doc.body.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE);
    }

    function encodeTranslationBody(text) {
        return encodeURIComponent(text.replace(/\//g, "\\/"));
    }

    function injectDeeplTranslationButton() {
        $("div[lang]").each(function () {
            var tweetContainer = $(this);
            var injected = !!tweetContainer.data('deepl-integration-injected');
            if(!injected) {
                tweetContainer.data('deepl-integration-injected', true);
                var translateButton = tweetContainer.siblings().eq(0).children("span");
                if(translateButton.length > 0) {
                    // Create new button
                    var deeplButton = translateButton.parent().clone();
                    deeplButton.children("span").text(`${translateButton.text()} (DeepL)`);
                    deeplButton.insertAfter(translateButton.parent());

                    deeplButton.hover(function(){
                        $(this).css("text-decoration", "underline");
                    }, function(){
                        $(this).css("text-decoration", "none");
                    });

                    deeplButton.click(function() {
                        // Get the tweet content
                        var tweetLang = tweetContainer.attr("lang");
                        var tweetContent = [];
                        tweetContainer.children("span").each(function(index,item) {
                            tweetContent.push($(item).text());
                        });
                        var deeplUrl = "https://www.deepl.com/translator#" + tweetLang + "/en/" + encodeTranslationBody(tweetContent.join(' '));
                        window.open(deeplUrl, '_blank');
                    });
                }
            }
            else {
                clearInterval(injectInterval);
                injectInterval = null;
            }
        });
    }

    function addObserverIfHeadNodeAvailable() {
        var target = $("head > title")[0];
        if(!target) {
            return;
        }

        clearInterval(waitForHeadNodeInterval);

        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if(injectInterval == null) {
                    injectInterval = setInterval(injectDeeplTranslationButton, 100);
                }
            });
        });
        observer.observe(target, { subtree: true, characterData: true, childList: true });
    }

    $(document).ready(function() {
        waitForHeadNodeInterval = setInterval(addObserverIfHeadNodeAvailable, 100);
        injectInterval = setInterval(injectDeeplTranslationButton, 100);
    });
})();

@icedream Thanks a lot for your script! 😄
I have some issues with a few tweets like this one: https://twitter.com/tricot_band/status/1475755025599442950

Do you have any idea why?

@toxinu The slashes in the tweet's text broke it since DeepL also uses slashes in the URL to distinguish between languages and text. I've fixed it by replacing the / characters with \/ before sending it off to DeepL, please reinstall and it should work now.

@icedream Cool! Thanks 👍