LeetCode Draw

在 leetcode.cn 上添加绘图功能，右侧显示 Excalidraw 画板
اعتبارا من 02-01-2025. شاهد أحدث إصدار.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         LeetCode Draw
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在 leetcode.cn 上添加绘图功能，右侧显示 Excalidraw 画板
// @license      MIT
// @author       mxgxxx
// @match        https://leetcode.cn/*
// @grant        none
// ==/UserScript==

(() => {
  'use strict';

  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.top = '0';
  container.style.right = '0';
  container.style.width = '50%';
  container.style.height = '100%';
  container.style.display = 'none';
  container.style.zIndex = '9999';
  container.style.borderLeft = '1px solid #ccc';

  const iframe = document.createElement('iframe');
  iframe.src = 'https://excalidraw.com';
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  container.appendChild(iframe);

  const toggleButton = document.createElement('button');

  const iconSpan = document.createElement('span');
  iconSpan.textContent = '🖌';

  toggleButton.innerHTML = '';
  toggleButton.appendChild(iconSpan);

  toggleButton.style.position = 'fixed';
  toggleButton.style.right = '0';
  toggleButton.style.top = '50%';
  toggleButton.style.transform = 'translateY(-50%)';
  toggleButton.style.padding = '8px';
  toggleButton.style.borderRadius = '8px 0 0 8px';
  toggleButton.style.backgroundColor = '#ffa116';
  toggleButton.style.color = '#fff';
  toggleButton.style.cursor = 'pointer';
  toggleButton.style.opacity = '0.7';
  toggleButton.style.width = '40px';
  toggleButton.style.transition = 'opacity 0.3s';

  toggleButton.addEventListener('mouseover', () => {
    toggleButton.style.opacity = '1';
  });
  toggleButton.addEventListener('mouseout', () => {
    toggleButton.style.opacity = '0.7';
  });

  toggleButton.style.zIndex = '10000';

  toggleButton.addEventListener('click', () => {
    container.style.display = container.style.display === 'none' ? 'block' : 'none';
  });

  document.body.appendChild(toggleButton);
  document.body.appendChild(container);
})();