TexCopyer

双击网页中的LaTex公式,将其复制到剪切板

当前为 2024-10-11 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name TexCopyer
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.1
  5. // @license GPLv3
  6. // @description 双击网页中的LaTex公式,将其复制到剪切板
  7. // @description:en Double click on a LaTeX formula on a webpage to copy it to the clipboard
  8. // @author yjy
  9. // @match *://*.wikipedia.org/*
  10. // @match *://*.zhihu.com/*
  11. // @match *://*.chatgpt.com/*
  12. // @match *://*.moonshot.cn/*
  13. // @match *://*.stackexchange.com/*
  14. // @match *://oi-wiki.org/*
  15. // @match *://*.luogu.com/*
  16. // @match *://*.luogu.com.cn/*
  17. // ==/UserScript==
  18.  
  19. (function () {
  20. 'use strict';
  21. // 插入样式表
  22. const css = `
  23. .latex-tooltip { position: fixed; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 11px; z-index: 1000; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
  24. .latex-copy-success { position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 12px; z-index: 1000; transition: opacity 0.2s; pointer-events: none; }
  25. `;
  26. const styleSheet = document.createElement("style");
  27. styleSheet.type = "text/css";
  28. styleSheet.innerText = css;
  29. document.head.appendChild(styleSheet);
  30.  
  31. // 创建提示框元素
  32. const tooltip = document.createElement('div');
  33. tooltip.classList.add('latex-tooltip');
  34. document.body.appendChild(tooltip);
  35.  
  36. // 获取对象和公式方法
  37. function getTarget(url) {
  38. let target = { elementSelector: '', getLatexString: null }
  39. // 格式化latex
  40. function formatLatex(input) {
  41. while (input.endsWith(' ') || input.endsWith('\\')) {
  42. input = input.slice(0, -1);
  43. }
  44. return '$' + input + '$';
  45. }
  46. if (url.includes('wikipedia.org')) {
  47. target.elementSelector = 'span.mwe-math-element';
  48. target.getLatexString = (element) => formatLatex(element.querySelector('math').getAttribute('alttext'));
  49. return target
  50.  
  51. } else if (url.includes('zhihu.com')) {
  52. target.elementSelector = 'span.ztext-math';
  53. target.getLatexString = (element) => formatLatex(element.getAttribute('data-tex'));
  54. return target
  55.  
  56. } else if (url.includes('chatgpt.com')) {
  57. target.elementSelector = 'span.katex';
  58. target.getLatexString = (element) => formatLatex(element.querySelector('annotation').textContent);
  59. return target
  60.  
  61. } else if (url.includes('moonshot.cn')) {
  62. target.elementSelector = 'span.katex';
  63. target.getLatexString = (element) => formatLatex(element.querySelector('annotation').textContent);
  64. return target
  65. } else if (url.includes('stackexchange.com')) {
  66. target.elementSelector = 'span.math-container';
  67. target.getLatexString = (element) => formatLatex(element.querySelector('script').textContent);
  68. return target
  69. }
  70. else if (url.includes('oi-wiki.org')) {
  71. target.elementSelector = 'mjx-container.MathJax';
  72. target.getLatexString = (element) => formatLatex(element.querySelector('img').title);
  73. return target
  74. }
  75. else if (url.includes('luogu.com')) {
  76. target.elementSelector = 'span.katex';
  77. target.getLatexString = (element) => formatLatex(element.querySelector('annotation').textContent);
  78. return target
  79. }
  80. // 待添加更多网站的条件
  81. return null;
  82. }
  83.  
  84. // 绑定事件到元素
  85. function addHandler() {
  86. let target = getTarget(window.location.href);
  87. if (!target) return;
  88.  
  89. let tooltipTimeout;
  90. document.querySelectorAll(target.elementSelector).forEach(element => {
  91. element.addEventListener('mouseenter', function () {
  92. element.style.cursor = "pointer";
  93. tooltipTimeout = setTimeout(function () {
  94. tooltip.textContent = getTarget(window.location.href).getLatexString(element);;
  95. const rect = element.getBoundingClientRect();
  96. tooltip.style.left = `${rect.left}px`;
  97. tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
  98. tooltip.style.display = 'block';
  99. tooltip.style.opacity = '0.8';
  100. }, 1000); // 进入延迟1秒
  101. });
  102.  
  103. element.addEventListener('mouseleave', function () {
  104. element.style.cursor = "auto";
  105. clearTimeout(tooltipTimeout);
  106. tooltip.style.display = 'none';
  107. tooltip.style.opacity = '0';
  108. });
  109.  
  110. element.ondblclick = function () {
  111. const latexString = target.getLatexString(element)
  112. if (latexString !== null) {
  113. console.log(`LaTeX copied: ${latexString}`) // for debug
  114. navigator.clipboard.writeText(latexString).then(() => {
  115. showCopySuccessTooltip();
  116. });
  117. }
  118. // 取消网页上的选中状态(不是很优雅)
  119. window.getSelection().removeAllRanges();
  120. };
  121. });
  122. }
  123.  
  124. // 显示复制成功提示
  125. function showCopySuccessTooltip() {
  126. const copyTooltip = document.createElement("div");
  127. copyTooltip.className = "latex-copy-success";
  128. copyTooltip.innerText = "已复制LaTeX公式";
  129. document.body.appendChild(copyTooltip);
  130. setTimeout(() => {
  131. copyTooltip.style.opacity = "0";
  132. setTimeout(() => {
  133. document.body.removeChild(copyTooltip);
  134. }, 200); // 与transition时间匹配
  135. }, 1000); // 提示短时间后消失
  136. }
  137.  
  138. // 监听页面加载或变化,绑定事件
  139. document.addEventListener('DOMContentLoaded', addHandler);
  140. new MutationObserver(addHandler).observe(document.documentElement, { childList: true, subtree: true });
  141.  
  142.  
  143. })();