Translate_DB

一个非常呆的翻译插件,点击百度翻译图标,输入内容,选择语言,翻译/需要开启跨域请求,请点击始终允许.

  1. // ==UserScript==
  2. // @name Translate_DB
  3. // @namespace https://zjzdmc.top
  4. // @version 0.6.8
  5. // @description 一个非常呆的翻译插件,点击百度翻译图标,输入内容,选择语言,翻译/需要开启跨域请求,请点击始终允许.
  6. // @author Datehoer
  7. // @match *://*/*
  8. // @icon https://zjzdmc.top/img/translate.png
  9. // @grant GM_xmlhttpRequest
  10. // @grant GM_download
  11. // @require https://code.jquery.com/jquery-3.6.0.min.js
  12. // ==/UserScript==
  13.  
  14. (function () {
  15. const body = document.querySelector('body');
  16. console.log("hello world");
  17. let translate_body = document.createElement("div");
  18. translate_body.className = "translate_body";
  19. translate_body.id = "translate_body"
  20. translate_body.setAttribute("style","background-image:url(https://zjzdmc.top/img/translate.png);background-repeat:no-repeat;background-size:100%;position:fixed;top:50px;right:50px;width:35px;height:35px;overflow:hidden;z-index:9999;cursor:pointer;");
  21. translate_body.title = "点击翻译";
  22. let translate_box = document.createElement("div");
  23. let translate_cover = document.createElement("div");
  24. translate_box.className = "translate_box";
  25. translate_cover.className = "translate_box";
  26. translate_cover.id = "translate_box";
  27. translate_box.setAttribute('style',"cursor:pointer;position:fixed;z-index:99999;top:100px;right:100px;width:400px;text-align: center;font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;background-image:linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);padding: 10px");
  28. translate_cover.setAttribute('style',"height:380px;width:400px;position:absolute;z-index:-1");
  29. let translate_box_input = document.createElement("textarea");
  30. let translate_box_change = document.createElement("input");
  31. let translate_box_close = document.createElement("input");
  32. let translate_box_show = document.createElement("textarea");
  33. let translate_box_input_language = document.createElement("input");
  34. let translate_box_show_language = document.createElement("input");
  35. translate_box_show.disabled = true;
  36. translate_box_close.type = "button";
  37. translate_box_close.value = "X";
  38. translate_box_close.setAttribute("style","background: #6cd735;border: 1px solid black;position: absolute;right: -16px;top: -16px;border-radius: 50%;width: 25px;height: 25px;color: white;")
  39. translate_box_input.placeholder = "请输入需要翻译的内容";
  40. translate_box_input.setAttribute('style','border: 0;border-radius: 5px;background-color: rgba(241, 241, 241, .98);width: 355px;height: 100px;padding: 10px;resize: none;');
  41. translate_box_show.setAttribute('style','border:1px solid #96c2f1;background:#eff7ff;width: 355px;height: 100px;padding: 10px;resize: none;border-radius: 5px;');
  42. translate_box_change.type = "button";
  43. translate_box_input_language.type = "text";
  44. translate_box_input_language.value = "auto";
  45. translate_box_show_language.type = "text";
  46. translate_box_show_language.value = "zh-CN";
  47. translate_box_change.value = "翻译";
  48. translate_box_change.setAttribute('style',"width: 250px;height: 50px;outline: none;border: 2px solid black;border-radius: 10px;background-color: white;font-size: 16px;cursor: pointer;margin: 10px;");
  49. translate_box_input_language.setAttribute('style',"color: #333;font-family: 'Microsoft YaHei', Tahoma, Verdana, SimSun;padding: 4px;font-size: 15px;outline-width: medium;outline-style: none;outline-color: invert;border-radius: 3px;text-shadow: 0px 1px 2px #fff;background-attachment: scroll;background-repeat: repeat-x;background-position-x: left;background-position-y: top;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);border: solid 1px #ccc;margin: 5px;");
  50. translate_box_show_language.setAttribute('style',"color: #333;font-family: 'Microsoft YaHei', Tahoma, Verdana, SimSun;padding: 4px;font-size: 15px;outline-width: medium;outline-style: none;outline-color: invert;border-radius: 3px;text-shadow: 0px 1px 2px #fff;background-attachment: scroll;background-repeat: repeat-x;background-position-x: left;background-position-y: top;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: rgb(255, 255, 255);border: solid 1px #ccc;margin: 5px;");
  51. translate_box.appendChild(translate_box_close)
  52. translate_box.appendChild(translate_cover)
  53. translate_box.appendChild(translate_box_input);
  54. translate_box.appendChild(translate_box_change);
  55. translate_box.appendChild(translate_box_input_language);
  56. translate_box.appendChild(translate_box_show_language);
  57. translate_box.appendChild(translate_box_show);
  58. body.appendChild(translate_box);
  59. body.appendChild(translate_body);
  60. if(location.origin == 'https://github.com'){
  61. translate_body.style.backgroundColor = "aqua";
  62. }
  63. let image_test = new Image();
  64. image_test.src = 'https://zjzdmc.top/img/translate.png';
  65. setTimeout(() => {
  66. if (image_test.width == 0) {
  67. translate_body.style.backgroundImage = "url(https://raw.githubusercontent.com/datehoer/translate_tampermonkey/main/translate.png)";
  68. }
  69. }, 1000)
  70. image_test.src = 'https://raw.githubusercontent.com/datehoer/translate_tampermonkey/main/translate.png';
  71. setTimeout(() => {
  72. if (image_test.width == 0) {
  73. translate_body.style.backgroundColor = "aqua";
  74. }
  75. }, 2000)
  76. $('.translate_box').hide()
  77. document.body.addEventListener('mousedown', () => {
  78. document.body.addEventListener('mouseup', () => {
  79. if (window.getSelection().toString().length > 0) {
  80. translate_box_input.value = window.getSelection().toString();
  81. }
  82. })
  83. })
  84. translate_body.addEventListener("click", () => {
  85. $('.translate_box').toggle();
  86. $('.translate_box').css("top", parseInt($('#translate_body').css('top'))+50+"px");
  87. $('.translate_box').css("left", parseInt($('#translate_body').css('left'))-450+"px");
  88. })
  89. translate_box_close.addEventListener("click", ()=>{
  90. $('.translate_box').hide()
  91. })
  92. translate_box_change.addEventListener("click", () => {
  93. let input_value = translate_box_input.value;
  94. let input_language = translate_box_input_language.value;
  95. let show_language = translate_box_show_language.value;
  96. let link = "https://translate.google.cn/m?sl=" + input_language + "&tl=" + show_language +
  97. "&hl=en&q=" + input_value;
  98. GM_xmlhttpRequest({
  99. method: "GET",
  100. url: link,
  101. onload: (res) => {
  102. let v = res.responseText;
  103. let pattern = /<div class="result-container">(.*?)<\/div>/;
  104. console.log(v.match(pattern)[1])
  105. translate_box_show.value = v.match(pattern)[1];
  106. }
  107. })
  108. })
  109. // 拖拽
  110. function dragFunc(id) {
  111. var Drag = document.getElementById(id);
  112. Drag.onmousedown = function(event) {
  113. var ev = event || window.event;
  114. event.stopPropagation();
  115. var disX = ev.clientX - Drag.offsetLeft;
  116. var disY = ev.clientY - Drag.offsetTop;
  117. document.onmousemove = function(event) {
  118. var ev = event || window.event;
  119. Drag.style.left = ev.clientX- disX+ "px";
  120. Drag.style.top = ev.clientY-disY + "px";
  121. Drag.style.cursor = "move";
  122. };
  123. };
  124. Drag.onmouseup = function() {
  125. document.onmousemove = null;
  126. Drag.style.cursor = "default";
  127. };
  128. }
  129. dragFunc("translate_box");
  130. dragFunc("translate_body")
  131. })();