google-translate

add a Google Translate plug-in to the page
当前为 2024-04-25 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         google-translate
// @namespace    https://github.com/pansong291/
// @version      0.1
// @description  add a Google Translate plug-in to the page
// @author       paso
// @license      Apache-2.0
// @match        *://*/*
// @icon         https://ssl.gstatic.com/translate/favicon.ico
// @grant        none
// ==/UserScript==

;(function () {
  'use strict'
  const elementId = `google-translate-element-${Math.floor(Math.random() * 100_000_000)}`
  document.head.insertAdjacentHTML('beforeend', `
    <style>
        #${elementId} {
            position: fixed;
            left: 0;
            bottom: 4px;
            z-index: 99999;
            transform: translateX(-95%);
            transition: transform .3s;
        }
        #${elementId}.hold, #${elementId}:hover {
            transform: translateX(0);
        }
        #${elementId} > :first-child {
            background: white;
            padding: 4px;
            border-radius: 0 4px 4px 0;
            box-shadow: 0 0 4px rgba(0,0,0,50%);
        }
        #${elementId} span, #${elementId} a, #${elementId} img {
            display: inline;
        }
    </style>`)

  const divElm = createElement('div', { id: elementId, class: 'hold' })
  const onMouseLeave = () => {
    divElm.classList.remove('hold')
    divElm.removeEventListener('mouseleave', onMouseLeave)
  }
  divElm.addEventListener('mouseleave', onMouseLeave)
  document.body.append(divElm)

  window.googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement(null, elementId)
    console.log('%cGoogle Translate\n%cinit finished. ', 'color: #4286F3; font-size: 22px; font-weight: bold', 'font-size: 14px')
    clearInterval(window.googleTranslateElementInitLoopId)
    delete window.googleTranslateElementInit
  }

  const jsElm = createElement('script', { src: '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' })
  jsElm.onload = detectGoogleTranslate
  document.head.append(jsElm)

  function detectGoogleTranslate() {
    let count = 360
    window.googleTranslateElementInitLoopId = setInterval(() => {
      if (window.google?.translate?.TranslateElement) {
        window.googleTranslateElementInit()
      } else if (count <= 0) {
        console.warn('%cGoogle Translate\n%cinit failed! ', 'color: #EB4537; font-size: 22px; font-weight: bold', 'font-size: 14px')
        clearInterval(window.googleTranslateElementInitLoopId)
      }
      count--
    }, 500)
  }

  function createElement(tag, attrs, children) {
    const el = document.createElement(tag)
    if (attrs) {
      Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v))
    }
    if (typeof children === 'string') {
      el.innerHTML = children
    } else if (Array.isArray(children)) {
      el.append.apply(el, children)
    }
    return el
  }
})()
欢迎访问Greasy Fork镜像
