☰

无需梯子 谷歌划词翻译 translate.google.cn

基于 translate.google.cn，中译英，英译中，拼音、音标显示

  1. // ==UserScript==
  2. // @name        无需梯子 谷歌划词翻译 translate.google.cn
  3. // @namespace   https://violentmonkey.github.io
  4. // @version     1.18
  5. // @description 基于 translate.google.cn，中译英，英译中，拼音、音标显示
  6. // @license     https://www.apache.org/licenses/LICENSE-2.0
  7. // @author      zkrisj
  8. // @include     *
  9. // @exclude     https://juejin.cn/editor/drafts/*
  10. // @exclude     https://translate.google.cn/*
  11. // @run-at      document-end
  12. // @connect     translate.google.cn
  13. // @grant       GM_xmlhttpRequest
  14. // ==/UserScript==
  15. (function() {
  16.   'use strict';
  17.   // var googleUrl = 'https://translate.google.com/translate_a/single?client=gtx&dt=t&dt=bd&dj=1&source=input&hl=auto&sl=auto';
  18.   // 无需梯子
  19.   var googleUrl = 'https://translate.google.cn/_/TranslateWebserverUi/data/batchexecute?&source-path=%2F&rpcids=MkEWBc&soc-app=1&soc-platform=1&soc-device=1&_reqid=632656&rt=c';
  20.   var icon = document.createElement('div');
  21.   var word = '';
  22.   icon.innerHTML = '<svg style="position: absolute;margin: 4px;" width="24" height="24" viewBox="0 0 768 768">' +
  23.     '<path d="M672 640.5v-417c0-18-13.5-31.5-31.5-31.5h-282l37.5 129h61.5v-33h34.5v33h115.5v33h-40.5c-10.5 40.5-33 79.5-61.5 112.5l87 85.5-22.5 24-87-85.5-28.5 28.5 25.5 88.5-64.5 64.5h225c18 0 31.5-13.5 31.5-31.5zM447 388.5c7.5 15 19.5 34.5 36 54 39-46.5 49.5-88.5 49.5-88.5h-127.5l10.5 34.5h31.5zM423 412.5l19.5 70.5 18-16.5c-15-16.5-27-34.5-37.5-54zM355.5 339c0-7.381-0.211-16.921-3-22.5h-126v49.5h70.5c-4.5 19.5-24 48-67.5 48-42 0-76.5-36-76.5-78s34.5-78 76.5-78c24 0 39 10.5 48 19.5l3 1.5 39-37.5-3-1.5c-24-22.5-54-34.5-87-34.5-72 0-130.5 58.5-130.5 130.5s58.5 130.5 130.5 130.5c73.5 0 126-52.5 126-127.5zM640.5 160.5c34.5 0 63 28.5 63 63v417c0 34.5-28.5 63-63 63h-256.5l-31.5-96h-225c-34.5 0-63-28.5-63-63v-417c0-34.5 28.5-63 63-63h192l28.5 96h292.5z" style="fill:#3e84f4;"/></svg>';
  24.   icon.setAttribute('style', 'width:32px;' + 'height:32px;' + 'display:none;' + 'background:#fff;' + 'border-radius:16px;' +
  25.     'box-shadow:4px 4px 8px #888;' + 'position:absolute;' + 'z-index:2147483647;');
  26.   // 添加翻译图标到 DOM
  27.   document.documentElement.appendChild(icon);
  28.   document.addEventListener('mousedown', function(e) {
  29.     if (e.target == icon || (e.target.parentNode && e.target.parentNode == icon) || (e.target.parentNode.parentNode && e.target.parentNode
  30.         .parentNode == icon)) { // 点击翻译图标时阻止选中的文本消失
  31.       e.preventDefault();
  32.     }
  33.   });
  34.   // 选中变化事件
  35.   document.addEventListener("selectionchange", function() {
  36.     if (!window.getSelection().toString().trim()) {
  37.       icon.style.display = 'none';
  38.       // server.containerDestroy();
  39.     }
  40.   });
  41.   // 显示、隐藏翻译图标
  42.   document.addEventListener('mouseup', function(e) {
  43.     if (e.target == icon || (e.target.parentNode && e.target.parentNode == icon) || (e.target.parentNode.parentNode && e.target.parentNode
  44.         .parentNode == icon)) { // 点击了翻译图标
  45.       e.preventDefault();
  46.       return;
  47.     }
  48.     var text = window.getSelection().toString().trim();
  49.     if (text && text.length < 800 && icon.style.display == 'none') {
  50.       icon.style.top = e.pageY + 12 + 'px';
  51.       icon.style.left = e.pageX + 'px';
  52.       icon.style.display = 'block';
  53.     } else if (!text) {
  54.       icon.style.display = 'none';
  55.       for (var i = 0; i < server.rendered.length; i++) { // 点击了翻译内容面板
  56.         if (e.target == server.rendered[i]) return; // 不再创建翻译图标
  57.       }
  58.       server.containerDestroy(); // 销毁翻译内容面板
  59.     }
  60.   });
  61.   // 翻译图标点击事件
  62.   icon.addEventListener('click', function(e) {
  63.     var text = window.getSelection().toString().trim();
  64.     if (text) {
  65.       icon.style.display = 'none';
  66.       server.containerDestroy(); // 销毁翻译内容面板
  67.       // 新建翻译内容面板
  68.       var container = server.container();
  69.       container.style.top = e.pageY + 'px';
  70.       if (e.pageX + 350 <= document.body.clientWidth) // container 面板css最大宽度为250px
  71.         container.style.left = e.pageX + 'px';
  72.       else container.style.left = document.body.clientWidth - 350 + 'px';
  73.       document.body.appendChild(container);
  74.       server.rendered.push(container);
  75.       if (isChina(text)) {
  76.         // ajax(googleUrl + '&tl=en&q=' + encodeURIComponent(text), container);
  77.         ajax(googleUrl, container, 'POST', "f.req=" + JSON.stringify([[["MkEWBc", "[[" + encodeURIComponent(text) + ",'zh-CN','en']]"]]]));
  78.       } else {
  79.         // ajax(googleUrl + '&tl=zh&dt=t&q=' + encodeURIComponent(text), container);
  80.         text = text.replace(/[A-Z][^A-Z ]/g, function(v) { return ' ' + v.toLowerCase() }).replace(/\p{P}/gu, ' ').replace(/  /g, ' ').trim();
  81.         word = text;
  82.         ajax(googleUrl, container, 'POST', "f.req=" + JSON.stringify([[["MkEWBc", "[[" + encodeURIComponent(text) + ",'auto','zh-CN']]"]]]));
  83.       }
  84.     }
  85.   });
  86.  
  87.   function isChina(str) {
  88.     var reg = /^([\u4E00-\u9FA5]|[\uFF00-\uFF20]|[\u3000-\u301C])+$/;
  89.     return reg.test(str);
  90.   }
  91.  
  92.   function ajax(url, element, method, data, headers) {
  93.     if (!method) method = 'GET';
  94.     // 因为Tampermonkey跨域访问(a.com)时会自动携带对应域名(a.com)的对应cookie，不会携带当前域名的cookie
  95.     // 所以，GM_xmlhttpRequest【不存在】cookie跨域访问安全性问题
  96.     if (!headers) headers = { "content-type": "application/x-www-form-urlencoded;charset=UTF-8", };
  97.     GM_xmlhttpRequest({
  98.       method: method,
  99.       url: url,
  100.       headers: headers,
  101.       data: data,
  102.       onload: function(res) {
  103.         console.log(url, data, res);
  104.         // google(res.responseText, element);
  105.         googleCn(res.responseText, element);
  106.       },
  107.       onerror: function(res) {
  108.         displaycontainer("连接失败", element);
  109.       }
  110.     });
  111.   }
  112.  
  113.   function googleCn(res, element) {
  114.     if (res.startsWith('<!DOCTYPE html>')) {
  115.       displaycontainer("获取失败", element);
  116.     } else {
  117.       res = JSON.parse(JSON.parse(res.match(/^\)]}'\n\n\d+\n(\[\[.*(?!\n\d)\]\])/)[1])[0][2]);
  118.       var phonetic = res[0][0] ? res[0][0] + "\r\n" : "";
  119.       var translation = res[1][0][0][5][0][0];
  120.       if (res[3] && word === res[3][0] && res[3][5] && res[3][5][0] && res[3][5][0][0] && res[3][5][0][0][1] && res[3][5][0][0][1][0]) translation =
  121.         res[3][5][0][0][1][0][0];
  122.       displaycontainer(phonetic.toLowerCase() + translation, element);
  123.     }
  124.   }
  125.  
  126.   function google(res, element) {
  127.     displaycontainer(JSON.parse(res).sentences.map(item => item.trans).join(), element);
  128.   }
  129.  
  130.   function displaycontainer(text, element) {
  131.     element.textContent = text;
  132.     element.style.display = 'block'; // 显示结果
  133.   }
  134.   var server = {
  135.     // 存放已经生成的翻译内容面板（销毁的时候用）
  136.     rendered: [],
  137.     // 销毁已经生成的翻译内容面板
  138.     containerDestroy: function() {
  139.       for (var i = this.rendered.length - 1; i >= 0; i--) {
  140.         if (this.rendered[i] && this.rendered[i].parentNode) {
  141.           this.rendered[i].parentNode.removeChild(this.rendered[i]);
  142.         }
  143.       }
  144.     },
  145.     // 生成翻译结果面板 DOM （此时还未添加到页面）
  146.     container: function() {
  147.       var pre = document.createElement('pre');
  148.       pre.setAttribute('style', 'display:none;' + 'position:absolute;' + 'font-size:13px;' + 'overflow:auto;' + 'background:#fff;' +
  149.         'font-family:sans-serif,Arial;' + 'font-weight:normal;' + 'text-align:left;' + 'color:#000;' + 'padding:0.5em 1em;' +
  150.         'line-height:1.5em;' + 'border-radius:5px;' + 'border:1px solid #ccc;' + 'box-shadow:4px 4px 8px #888;' + 'max-width:350px;' +
  151.         'max-height:216px;' + 'z-index:2147483647;');
  152.       return pre;
  153.     }
  154.   };
  155. })();