☰

Google Auto Translate (Multilingual + Inline Translation)

Auto-translates pages using an iframe overlay and inline Google Translate.

当前为 2025-03-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Google Auto Translate (Multilingual + Inline Translation)
  3. // @namespace    https://greasyfork.org/en/users/1030895-universedev
  4. // @author      UniverseDev
  5. // @license     GPL-3.0-or-later
  6. // @version      1.0
  7. // @description  Auto-translates pages using an iframe overlay and inline Google Translate.
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     "use strict";
  14.  
  15.     const STORAGE_KEY = "userTranslateLang";
  16.     const DEFAULT_LANG = "en";
  17.  
  18.     const getUserLanguage = () => localStorage.getItem(STORAGE_KEY) || DEFAULT_LANG;
  19.  
  20.     const setUserLanguage = (lang) => {
  21.         localStorage.setItem(STORAGE_KEY, lang);
  22.         location.reload();
  23.     };
  24.  
  25.     const detectPageLanguage = () =>
  26.         document.documentElement.lang || document.querySelector("html")?.getAttribute("lang") || null;
  27.  
  28.     const isAlreadyTranslated = () => {
  29.         return document.querySelector("body").classList.contains("translated-ltr") ||
  30.                document.querySelector("body").classList.contains("translated-rtl");
  31.     };
  32.  
  33.     const createTranslateOverlay = (targetLang) => {
  34.         if (document.getElementById("googleTranslateIframe")) return;
  35.         const iframe = document.createElement("iframe");
  36.         iframe.id = "googleTranslateIframe";
  37.         iframe.src = `https://translate.google.com/translate?hl=${targetLang}&sl=auto&tl=${targetLang}&u=${encodeURIComponent(location.href)}`;
  38.         Object.assign(iframe.style, {
  39.             position: "fixed",
  40.             top: 0,
  41.             left: 0,
  42.             width: "100vw",
  43.             height: "100vh",
  44.             border: "none",
  45.             zIndex: 99999,
  46.             backgroundColor: "#fff",
  47.         });
  48.         document.body.appendChild(iframe);
  49.     };
  50.  
  51.     const insertGoogleTranslateWidget = () => {
  52.         if (document.getElementById("google_translate_element")) return;
  53.         const translateDiv = document.createElement("div");
  54.         translateDiv.id = "google_translate_element";
  55.         Object.assign(translateDiv.style, {
  56.             position: "fixed",
  57.             bottom: "10px",
  58.             right: "10px",
  59.             zIndex: 100000,
  60.         });
  61.         document.body.appendChild(translateDiv);
  62.  
  63.         const script = document.createElement("script");
  64.         script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateInit";
  65.         document.body.appendChild(script);
  66.     };
  67.  
  68.     window.googleTranslateInit = () => {
  69.         new google.translate.TranslateElement(
  70.             { pageLanguage: "auto", includedLanguages: getUserLanguage(), autoDisplay: false, multilanguagePage: true },
  71.             "google_translate_element"
  72.         );
  73.     };
  74.  
  75.     const autoTranslateIfNeeded = () => {
  76.         const targetLang = getUserLanguage();
  77.         const pageLang = detectPageLanguage();
  78.  
  79.         if ((!pageLang || pageLang.toLowerCase() !== targetLang.toLowerCase()) && !isAlreadyTranslated()) {
  80.             createTranslateOverlay(targetLang);
  81.         } else {
  82.             insertGoogleTranslateWidget();
  83.         }
  84.     };
  85.  
  86.     window.addEventListener("load", autoTranslateIfNeeded);
  87. })();