☰

BlueSky Dynamic Translation Display

Insert the translation result into the previous sibling element of the parent element when the translate button is clicked.

// ==UserScript==
// @name         BlueSky Dynamic Translation Display
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  Insert the translation result into the previous sibling element of the parent element when the translate button is clicked.
// @author       littelsix
// @match        https://bsky.app/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    console.log('Script loaded successfully！');

    const supportedLanguages = {
        'zh-CN': '中文',
        'en': 'English',
        'es': 'Español',
        'fr': 'Français',
        'de': 'Deutsch',
        'ja': '日本語'
    };

    function detectDefaultLanguage() {
        const browserLanguage = navigator.language || navigator.languages[0];
        console.log(`Detected browser language：${browserLanguage}`);
        return supportedLanguages[browserLanguage] ? browserLanguage : 'zh-CN';
    }

    let userLanguage = localStorage.getItem('bsky-translate-language') || detectDefaultLanguage();

    async function translateText(text, targetLang = 'zh-CN') {
        const apiUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`;
        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`HTTP error：${response.status}`);
            }
            const result = await response.json();
            return result[0].map(segment => segment[0]).join('');
        } catch (error) {
            console.error(`Translation failed：${error.message || 'Unable to connect to the translation service. Please try again later'}`);
            throw error;
        }
    }

    function ensureTranslationContainer(referenceElement) {
        let translationDiv = referenceElement.querySelector('.translated-text');
        if (!translationDiv) {
            translationDiv = document.createElement('div');
            translationDiv.className = 'css-146c3p1 translated-text';
            translationDiv.style.color = 'rgb(16, 131, 254)';
            translationDiv.style.marginTop = '10px';
            translationDiv.textContent = 'Translation results will appear here';
            referenceElement.appendChild(translationDiv);
        }
        return translationDiv;
    }

    function createLanguageSelector(button) {
        let languageSelector = button.parentElement.querySelector('.language-selector');
        if (!languageSelector) {
            languageSelector = document.createElement('select');
            languageSelector.className = 'language-selector';
            languageSelector.style.marginLeft = '10px';
            languageSelector.style.border = '1px solid #ccc';
            languageSelector.style.borderRadius = '4px';
            languageSelector.style.padding = '2px';

            for (const [code, name] of Object.entries(supportedLanguages)) {
                const option = document.createElement('option');
                option.value = code;
                option.textContent = name;
                if (code === userLanguage) {
                    option.selected = true;
                }
                languageSelector.appendChild(option);
            }

            languageSelector.addEventListener('change', (event) => {
                userLanguage = event.target.value;
                localStorage.setItem('bsky-translate-language', userLanguage);
                console.log(`Language switched to：${supportedLanguages[userLanguage]}`);
            });

            button.parentElement.appendChild(languageSelector);
        }
    }

    function bindTranslateButtons() {
        const translateButtons = document.querySelectorAll('a[href*="https://translate.google.com"]');
        console.log(`Found ${translateButtons.length} translate buttons.`);

        translateButtons.forEach(button => {
            if (!button.dataset.bound) {
                button.dataset.bound = true;

                createLanguageSelector(button);

                button.addEventListener('click', async (event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    console.log('Translate button clicked!');

                    const parentElement = button.parentElement.parentElement;
                    if (!parentElement) {
                        console.error('Parent element not found。');
                        return;
                    }

                    const postTextDiv = parentElement.previousElementSibling;
                    if (!postTextDiv) {
                        console.error('Previous sibling element not found, unable to translate.');
                        return;
                    }

                    const textToTranslate = postTextDiv.textContent.trim();
                    if (!textToTranslate) {
                        console.error('Text is empty, unable to translate.');
                        return;
                    }

                    const translationDiv = ensureTranslationContainer(postTextDiv);

                    translationDiv.textContent = 'Translating...';
                    try {
                        const translatedText = await translateText(textToTranslate, userLanguage);
                        console.log(`Original text：${textToTranslate}`);
                        console.log(`Translation result：${translatedText}`);
                        translationDiv.textContent = translatedText;
                        translationDiv.dataset.translated = 'true';
                    } catch (error) {
                        translationDiv.textContent = 'Translation failed, please try again later.。';
                        console.error('Translation failed. Check console logs for details.');
                    }
                });
            }
        });
    }

    bindTranslateButtons();

    const observer = new MutationObserver(() => {
        bindTranslateButtons();
    });

    const targetNode = document.body;
    const config = { childList: true, subtree: true };
    observer.observe(targetNode, config);
})();