☰

TexCopyer

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

当前为 2024-08-14 提交的版本，查看 最新版本。

  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. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.     // 插入样式表
  19.     const css = `
  20.         .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; }
  21.         .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; }
  22.     `;
  23.     const styleSheet = document.createElement("style");
  24.     styleSheet.type = "text/css";
  25.     styleSheet.innerText = css;
  26.     document.head.appendChild(styleSheet);
  27.  
  28.     // 创建提示框元素
  29.     const tooltip = document.createElement('div');
  30.     tooltip.classList.add('latex-tooltip');
  31.     document.body.appendChild(tooltip);
  32.  
  33.     // 获取对象和公式方法
  34.     function getTarget(url) {
  35.         let target = {elementSelector: '', getLatexString: null}
  36.         // 格式化latex
  37.         function formatLatex(input) {
  38.             while (input.endsWith(' ') || input.endsWith('\\')) {
  39.                 input = input.slice(0, -1);
  40.             }
  41.             return '$' + input + '$';
  42.         }
  43.         if (url.includes('wikipedia.org')) {
  44.             target.elementSelector = 'span.mwe-math-element';
  45.             target.getLatexString = (element) => formatLatex(element.querySelector('math').getAttribute('alttext'));
  46.             return target
  47.  
  48.         } else if (url.includes('zhihu.com')) {
  49.             target.elementSelector = 'span.ztext-math';
  50.             target.getLatexString = (element) => formatLatex(element.getAttribute('data-tex'));
  51.             return target
  52.  
  53.         } else if (url.includes('chatgpt.com')) {
  54.             target.elementSelector = 'span.katex';
  55.             target.getLatexString = (element) => formatLatex(element.querySelector('annotation').textContent);
  56.             return target
  57.         
  58.         } else if (url.includes('moonshot.cn')) {
  59.             target.elementSelector = 'span.katex';
  60.             target.getLatexString = (element) => formatLatex(element.querySelector('annotation').textContent);
  61.             return target
  62.         } else if (url.includes('stackexchange.com')) {
  63.             target.elementSelector = 'span.math-container';
  64.             target.getLatexString = (element) => formatLatex(element.querySelector('script').textContent);
  65.             return target
  66.         }
  67.         // 待添加更多网站的条件
  68.         return null;
  69.     }
  70.  
  71.     // 绑定事件到元素
  72.     function addHandler() {
  73.         let target = getTarget(window.location.href);
  74.         if (!target) return;
  75.  
  76.         let tooltipTimeout;
  77.         document.querySelectorAll(target.elementSelector).forEach(element => {
  78.             element.addEventListener('mouseenter', function () {
  79.                 element.style.cursor = "pointer";
  80.                 tooltipTimeout = setTimeout(function () {
  81.                     tooltip.textContent = getTarget(window.location.href).getLatexString(element);;
  82.                     const rect = element.getBoundingClientRect();
  83.                     tooltip.style.left = `${rect.left}px`;
  84.                     tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
  85.                     tooltip.style.display = 'block';
  86.                     tooltip.style.opacity = '0.8';
  87.                 }, 1000); // 进入延迟1秒
  88.             });
  89.  
  90.             element.addEventListener('mouseleave', function () {
  91.                 element.style.cursor = "auto";
  92.                 clearTimeout(tooltipTimeout);
  93.                 tooltip.style.display = 'none';
  94.                 tooltip.style.opacity = '0';
  95.             });
  96.             
  97.             element.ondblclick = function() {
  98.                 const latexString = target.getLatexString(element)
  99.                 if (latexString !== null) {
  100.                     console.log(`LaTeX copied: ${latexString}`) // for debug
  101.                     navigator.clipboard.writeText(latexString).then(() => {
  102.                         showCopySuccessTooltip();
  103.                     });
  104.                 }
  105.                 // 取消网页上的选中状态(不是很优雅)
  106.                 window.getSelection().removeAllRanges();
  107.             };
  108.         });
  109.     }
  110.     
  111.     // 显示复制成功提示
  112.     function showCopySuccessTooltip() {
  113.         const copyTooltip = document.createElement("div");
  114.         copyTooltip.className = "latex-copy-success";
  115.         copyTooltip.innerText = "已复制LaTeX公式";
  116.         document.body.appendChild(copyTooltip);
  117.         setTimeout(() => {
  118.             copyTooltip.style.opacity = "0";
  119.             setTimeout(() => {
  120.                 document.body.removeChild(copyTooltip);
  121.             }, 200); // 与transition时间匹配
  122.         }, 1000); // 提示短时间后消失
  123.     }
  124.  
  125.     // 监听页面加载或变化，绑定事件
  126.     document.addEventListener('DOMContentLoaded', addHandler);
  127.     new MutationObserver(addHandler).observe(document.documentElement, {childList: true, subtree: true});
  128.  
  129.  
  130. })();