基于论坛里一个哥们写的气泡翻译油猴插件

使用ai改写了一下,加入了aws,azure,deepl的翻译,填写对应的变量即可,
custom即为原作者提供的谷歌翻译请求api
选词气泡翻译,挺方便的,-原作者的文章找不到了-,直接贴代码了

加精了修改一下

// ==UserScript==
// @name         文本翻译脚本
// @namespace    https://example.com
// @version      1.7
// @description  鼠标左键选中文本后,自动请求选定的翻译服务进行翻译并显示结果
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/aws-sdk.min.js
// ==/UserScript==

(function() {
    'use strict';

    // 翻译服务配置
    const translateService = 'custom'; // 可选值: 'deepl', 'aws', 'azure', 'custom'

    // 目标翻译语言配置
    const targetLanguage = 'zh'; // 请填写目标翻译语言的语言代码,例如 'zh' 表示中文,'ko' 表示韩语,'ja' 表示日语等

    // DeepL API 配置
    const deeplApiKey = ''; // 请填写您的 DeepL API 密钥

    // AWS 配置
    const awsConfig = {
        region: '', // 请填写您的 AWS 区域
        accessKeyId: '', // 请填写您的 AWS 访问密钥 ID
        secretAccessKey: '' // 请填写您的 AWS 私有访问密钥
    };

    // Azure Translator API 配置
    const azureKey = ''; // 请填写您的 Azure Translator 密钥
    const azureRegion = ''; // 请填写您的 Azure Translator 区域

    // 自定义 URL 翻译服务配置
    const customTranslateUrl = 'https://findmyip.net/api/translate.php'; // 请填写您的自定义翻译服务 URL

    // 创建 AWS Translate 客户端
    const translate = new AWS.Translate(awsConfig);

    // 创建气泡样式
    const tooltipStyle = `
    position: absolute;
    z-index: 9999;
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    max-width: 450px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    line-height: 1.6;
    font-family: Arial, sans-serif;
    `;

    // 创建气泡元素
    function createTooltip() {
        const tooltip = document.createElement('div');
        tooltip.id = 'translation-tooltip';
        tooltip.style.cssText = tooltipStyle;
        return tooltip;
    }

    // 显示气泡
    function showTooltip(text, x, y) {
        let tooltip = document.getElementById('translation-tooltip');
        if (!tooltip) {
            tooltip = createTooltip();
            document.body.appendChild(tooltip);
        }
        tooltip.textContent = text;

        // 调整气泡位置
        const tooltipWidth = tooltip.offsetWidth;
        const tooltipHeight = tooltip.offsetHeight;
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const tooltipX = Math.max(0, Math.min(x - tooltipWidth / 2, windowWidth - tooltipWidth));
        const tooltipY = Math.max(0, y - tooltipHeight - 10);

        tooltip.style.left = tooltipX   'px';
        tooltip.style.top = tooltipY   'px';
    }

    // 隐藏气泡
    function hideTooltip() {
        const tooltip = document.getElementById('translation-tooltip');
        if (tooltip) {
            tooltip.remove();
        }
    }

    // DeepL 翻译
    function translateWithDeepL(text) {
        GM_xmlhttpRequest({
            method: 'POST',
            url: 'https://api-free.deepl.com/v2/translate',
            data: `text=${encodeURIComponent(text)}&target_lang=${targetLanguage}`,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': `DeepL-Auth-Key ${deeplApiKey}`
            },
            onload: function(response) {
                const translatedText = JSON.parse(response.responseText).translations[0].text;
                showTranslatedText(translatedText);
            },
            onerror: function(error) {
                console.error('DeepL 翻译请求失败:', error);
                showTooltip('DeepL 翻译请求失败,请检查网络连接和 API 密钥', event.pageX, event.pageY);
            }
        });
    }

    // AWS Translate 翻译
    function translateWithAws(text) {
        const params = {
            Text: text,
            SourceLanguageCode: 'auto',
            TargetLanguageCode: targetLanguage
        };

        translate.translateText(params, function(err, data) {
            if (err) {
                console.error('AWS Translate 翻译请求失败:', err);
                showTooltip('AWS Translate 翻译请求失败,请检查网络连接和 API 配置', event.pageX, event.pageY);
            } else {
                const translatedText = data.TranslatedText;
                showTranslatedText(translatedText);
            }
        });
    }

    // Azure Translator 翻译
    function translateWithAzure(text) {
        const params = {
            'api-version': '3.0',
            'to': targetLanguage
        };

        const body = [{
            'text': text
        }];

        GM_xmlhttpRequest({
            method: 'POST',
            url: `https://api.cognitive.microsofttranslator.com/translate?${new URLSearchParams(params)}`,
            data: JSON.stringify(body),
            headers: {
                'Content-Type': 'application/json',
                'Ocp-Apim-Subscription-Key': azureKey,
                'Ocp-Apim-Subscription-Region': azureRegion
            },
            onload: function(response) {
                const translatedText = JSON.parse(response.responseText)[0].translations[0].text;
                showTranslatedText(translatedText);
            },
            onerror: function(error) {
                console.error('Azure Translator 翻译请求失败:', error);
                showTooltip('Azure Translator 翻译请求失败,请检查网络连接和 API 配置', event.pageX, event.pageY);
            }
        });
    }

    // 检测语言
    function detectLanguage(text, callback) {
        const comprehend = new AWS.Comprehend(awsConfig);

        const params = {
            Text: text
        };

        comprehend.detectDominantLanguage(params, function(err, data) {
            if (err) {
                console.error('语言检测请求失败:', err);
                callback(null);
            } else {
                if (data.Languages && data.Languages.length > 0) {
                    const detectedLang = data.Languages[0].LanguageCode;
                    callback(detectedLang);
                } else {
                    console.error('未检测到语言:', data);
                    callback(null);
                }
            }
        });
    }

    // 自定义 URL 翻译
    function translateWithCustomUrl(text, sourceLang, targetLang) {
        const params = {
            text: text,
            source_lang: sourceLang || '',
            target_lang: targetLang || targetLanguage
        };

        GM_xmlhttpRequest({
            method: 'GET',
            url: `${customTranslateUrl}?${new URLSearchParams(params)}`,
            onload: function(response) {
                const Jresponse = JSON.parse(response.responseText);
                if (Jresponse.code === 200) {
                    const translatedText = Jresponse.data.translate_result;
                    showTranslatedText(translatedText);
                } else {
                    console.error('自定义 URL 翻译请求失败:', Jresponse);
                    showTooltip('自定义 URL 翻译请求失败,请检查接口返回信息', event.pageX, event.pageY);
                }
            },
            onerror: function(error) {
                console.error('自定义 URL 翻译请求失败:', error);
                showTooltip('自定义 URL 翻译请求失败,请检查网络连接和服务配置', event.pageX, event.pageY);
            }
        });
    }

    // 显示翻译结果
    function showTranslatedText(translatedText) {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            const rect = range.getBoundingClientRect();
            const x = rect.left   window.pageXOffset   rect.width / 2;
            const y = rect.top   window.pageYOffset;
            showTooltip(translatedText, x, y);
        }
    }

    // 发送翻译请求
    function translateText(text) {
        switch (translateService) {
            case 'deepl':
                translateWithDeepL(text);
                break;
            case 'aws':
                translateWithAws(text);
                break;
            case 'azure':
                translateWithAzure(text);
                break;
            case 'custom':
                detectLanguage(text, function(detectedLang) {
                    const sourceLang = detectedLang || ''; // 检测到的源语言,如果检测失败则留空
                    translateWithCustomUrl(text, sourceLang, targetLanguage);
                });
                break;
            default:
                console.error('无效的翻译服务配置');
        }
    }

    // 监听鼠标释放事件
    window.addEventListener('mouseup', function(event) {
        if (event.button === 0) { // 鼠标左键
            const selection = window.getSelection();
            const selectedText = selection.toString().trim();
            if (selectedText !== '') {
                translateText(selectedText);
            } else {
                hideTooltip();
            }
        }
    });

    // 初始化气泡元素
    window.addEventListener('DOMContentLoaded', function() {
        createTooltip();
    });
})();
点赞
  1. zcl520说道:

    怎么用,教一下

  2. Ghost说道:

    帖子在这里捏

  3. kurssy说道:

    @zcl520 #1 复制到油猴脚本编辑器里保存即可,网页上光标选词自动 弹出气泡翻译

发表回复

电子邮件地址不会被公开。必填项已用 * 标注

×
订阅图标按钮