在 leetcode.cn 上添加绘图功能,右侧显示 Excalidraw 画板
当前为
// ==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);
})();