简单实现沉浸式翻译插件全文翻译效果

全文翻译

// 获取网页中的所有文本节点
function getTextNodes(node) {
    let textNodes = [];
    if (node.nodeType === Node.TEXT_NODE) {
        textNodes.push(node);
    } else {
        for (let child of node.childNodes) {
            textNodes = textNodes.concat(getTextNodes(child));
        }
    }
    return textNodes;
}

// 调用翻译API
async function translateText(text, targetLanguage = 'en') {
    const response = await fetch('https://api.example.com/translate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            q: text,
            target: targetLanguage,
        }),
    });
    const data = await response.json();
    return data.translatedText;
}

// 插入翻译结果
async function insertTranslations() {
    const textNodes = getTextNodes(document.body);
    for (let node of textNodes) {
        const originalText = node.nodeValue.trim();
        if (originalText) {
            const translatedText = await translateText(originalText);
            const span = document.createElement('span');
            span.style.color = 'blue'; // 设置翻译文本的样式
            span.textContent = ` (${translatedText})`;
            node.parentNode.insertBefore(span, node.nextSibling);
        }
    }
}

// 执行翻译插入
insertTranslations();

cmd + 鼠标悬停翻译

// 变量来跟踪Cmd键的状态
let isCmdPressed = false;

// 监听Cmd键的按下和松开事件
document.addEventListener('keydown', (event) => {
    if (event.key === 'Meta') {
        isCmdPressed = true;
    }
});

document.addEventListener('keyup', (event) => {
    if (event.key === 'Meta') {
        isCmdPressed = false;
    }
});

// 调用翻译API
async function translateText(text, targetLanguage = 'en') {
    const response = await fetch('https://api.example.com/translate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            q: text,
            target: targetLanguage,
        }),
    });
    const data = await response.json();
    return data.translatedText;
}

// 处理鼠标悬停事件
document.addEventListener('mousemove', async (event) => {
    if (isCmdPressed) {
        const target = event.target;
        if (target && target.nodeType === Node.ELEMENT_NODE && !target.dataset.translated) {
            const originalText = target.textContent.trim();
            if (originalText) {
                const translatedText = await translateText(originalText);
                const newElement = document.createElement(target.nodeName.toLowerCase());
                newElement.textContent = translatedText;
                newElement.style.color = 'blue'; // 设置翻译文本的样式
                target.parentNode.insertBefore(newElement, target.nextSibling);
                target.dataset.translated = 'true'; // 标记为已翻译
            }
        }
    }
});