LeetCode Draw

在 leetcode.cn 上添加绘图功能,右侧显示 Excalidraw 画板

As of 2025-01-02. See the latest version.

  1. // ==UserScript==
  2. // @name LeetCode Draw
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  5. // @description 在 leetcode.cn 上添加绘图功能,右侧显示 Excalidraw 画板
  6. // @license MIT
  7. // @author mxgxxx
  8. // @match https://leetcode.cn/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (() => {
  13. 'use strict';
  14.  
  15. const container = document.createElement('div');
  16. container.style.position = 'fixed';
  17. container.style.top = '0';
  18. container.style.right = '0';
  19. container.style.width = '50%';
  20. container.style.height = '100%';
  21. container.style.display = 'none';
  22. container.style.zIndex = '9999';
  23. container.style.borderLeft = '1px solid #ccc';
  24.  
  25. const iframe = document.createElement('iframe');
  26. iframe.src = 'https://excalidraw.com';
  27. iframe.style.width = '100%';
  28. iframe.style.height = '100%';
  29. container.appendChild(iframe);
  30.  
  31. const toggleButton = document.createElement('button');
  32.  
  33. const iconSpan = document.createElement('span');
  34. iconSpan.textContent = '🖌';
  35.  
  36. toggleButton.innerHTML = '';
  37. toggleButton.appendChild(iconSpan);
  38.  
  39. toggleButton.style.position = 'fixed';
  40. toggleButton.style.right = '0';
  41. toggleButton.style.top = '50%';
  42. toggleButton.style.transform = 'translateY(-50%)';
  43. toggleButton.style.padding = '8px';
  44. toggleButton.style.borderRadius = '8px 0 0 8px';
  45. toggleButton.style.backgroundColor = '#ffa116';
  46. toggleButton.style.color = '#fff';
  47. toggleButton.style.cursor = 'pointer';
  48. toggleButton.style.opacity = '0.7';
  49. toggleButton.style.width = '40px';
  50. toggleButton.style.transition = 'opacity 0.3s';
  51.  
  52. toggleButton.addEventListener('mouseover', () => {
  53. toggleButton.style.opacity = '1';
  54. });
  55. toggleButton.addEventListener('mouseout', () => {
  56. toggleButton.style.opacity = '0.7';
  57. });
  58.  
  59. toggleButton.style.zIndex = '10000';
  60.  
  61. toggleButton.addEventListener('click', () => {
  62. container.style.display = container.style.display === 'none' ? 'block' : 'none';
  63. });
  64.  
  65. document.body.appendChild(toggleButton);
  66. document.body.appendChild(container);
  67. })();