最近在服务器上配置了code-server，但是由于平板上的移动端edge无法全屏，导致与桌面端vscode相比效果略有瑕疵。知乎上的大佬用gemini构建了一个主动实现全屏的油猴插件原帖链接，但经本人实测插件的click事件几乎无法触发，点击按钮大部分情况下触发的都是按钮的拖拽事件，进而导致此插件几乎无法使用。
于是本人使用deepseek修改此插件，改为完全使用拖拽事件处理全屏的触发。
并且现在进入全屏后按钮将自动隐藏。
// ==UserScript==
// @name Edge Android 全屏浏览 (可拖动按钮)
// @namespace http://tampermonkey.net/
// @version 0.5
// @description 在Android版Edge中添加可拖动的全屏按钮，全屏时自动隐藏。优化点按检测，不再依赖click事件。
// @author Gemini (优化版)、 DeepSeek
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// --- 创建悬浮按钮 ---
const fullscreenButton = document.createElement('button');
fullscreenButton.textContent = '进入全屏';
fullscreenButton.style.position = 'fixed';
fullscreenButton.style.bottom = '20px';
fullscreenButton.style.right = '20px';
fullscreenButton.style.zIndex = '9999';
fullscreenButton.style.padding = '10px 15px';
fullscreenButton.style.backgroundColor = '#0078D4';
fullscreenButton.style.color = 'white';
fullscreenButton.style.border = 'none';
fullscreenButton.style.borderRadius = '5px';
fullscreenButton.style.cursor = 'grab';
fullscreenButton.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
fullscreenButton.style.fontSize = '14px';
fullscreenButton.style.userSelect = 'none';
document.body.appendChild(fullscreenButton);
// --- 全屏状态判断 ---
function isFullscreen() {
return document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
}
// --- 切换全屏 ---
function toggleFullScreen() {
if (!isFullscreen()) {
const el = document.documentElement;
if (el.requestFullscreen) el.requestFullscreen();
else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
else if (el.msRequestFullscreen) el.msRequestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
else if (document.msExitFullscreen) document.msExitFullscreen();
}
}
// --- 按钮显隐控制：全屏时隐藏，退出后显示 ---
function updateButtonVisibility() {
if (isFullscreen()) {
fullscreenButton.style.display = 'none';
// 结束拖拽状态
if (isDragging) {
isDragging = false;
fullscreenButton.style.cursor = 'grab';
cleanupDragEvents();
}
} else {
fullscreenButton.style.display = 'block';
fullscreenButton.textContent = '进入全屏';
}
}
// --- 清理拖拽事件监听 ---
function cleanupDragEvents() {
document.removeEventListener('mousemove', dragMove);
document.removeEventListener('mouseup', dragEnd);
document.removeEventListener('touchmove', dragMove);
document.removeEventListener('touchend', dragEnd);
}
// --- 全屏变化监听 ---
document.addEventListener('fullscreenchange', updateButtonVisibility);
document.addEventListener('webkitfullscreenchange', updateButtonVisibility);
document.addEventListener('mozfullscreenchange', updateButtonVisibility);
document.addEventListener('MSFullscreenChange', updateButtonVisibility);
updateButtonVisibility(); // 初始化
// --- 拖动相关变量 ---
let isDragging = false;
let hasDraggedSignificantDistance = false; // 是否超过阈值（有效拖动）
let offsetX, offsetY;
let startX, startY; // 用于阈值判断的起始点
const DRAG_THRESHOLD = 20; // 阈值20像素，点按时不易误判
// --- 拖拽开始 ---
function dragStart(e) {
isDragging = true;
hasDraggedSignificantDistance = false;
fullscreenButton.style.cursor = 'grabbing';
// 获取初始坐标（兼容触摸/鼠标）
const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
startX = clientX;
startY = clientY;
const rect = fullscreenButton.getBoundingClientRect();
offsetX = clientX - rect.left;
offsetY = clientY - rect.top;
// 若按钮使用 right/bottom 定位，转换为 left/top 以便拖动
if (getComputedStyle(fullscreenButton).position === 'fixed') {
if (fullscreenButton.style.right !== 'auto' || fullscreenButton.style.bottom !== 'auto') {
fullscreenButton.style.left = rect.left + 'px';
fullscreenButton.style.top = rect.top + 'px';
fullscreenButton.style.right = 'auto';
fullscreenButton.style.bottom = 'auto';
}
}
e.preventDefault(); // 防止拖动时选中文本或页面滚动
// 根据事件类型添加相应监听
if (e.type === 'mousedown') {
document.addEventListener('mousemove', dragMove);
document.addEventListener('mouseup', dragEnd);
} else if (e.type === 'touchstart') {
document.addEventListener('touchmove', dragMove, { passive: false });
document.addEventListener('touchend', dragEnd);
}
}
// --- 拖拽移动 ---
function dragMove(e) {
if (!isDragging) return;
// 阻止触摸滚动
if (e.type === 'touchmove') e.preventDefault();
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
// 检查是否超过拖动阈值
if (!hasDraggedSignificantDistance) {
const dx = Math.abs(clientX - startX);
const dy = Math.abs(clientY - startY);
if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
hasDraggedSignificantDistance = true;
}
}
// 计算新位置并约束在视窗内
let newLeft = clientX - offsetX;
let newTop = clientY - offsetY;
const btnW = fullscreenButton.offsetWidth;
const btnH = fullscreenButton.offsetHeight;
newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - btnW));
newTop = Math.max(0, Math.min(newTop, window.innerHeight - btnH));
fullscreenButton.style.left = newLeft + 'px';
fullscreenButton.style.top = newTop + 'px';
}
// --- 拖拽结束（鼠标松开或手指抬起）---
function dragEnd(e) {
if (!isDragging) return;
isDragging = false;
fullscreenButton.style.cursor = 'grab';
// 如果没有发生有效拖动，则视为点击，切换全屏
if (!hasDraggedSignificantDistance) {
toggleFullScreen();
}
// 清理事件监听
cleanupDragEvents();
// 阻止可能的 click 事件
if (e && e.preventDefault) e.preventDefault();
if (e && e.stopPropagation) e.stopPropagation();
}
// --- 绑定开始拖动事件---
fullscreenButton.addEventListener('mousedown', dragStart);
fullscreenButton.addEventListener('touchstart', dragStart, { passive: false });
})();现经本人实测修改后的插件已完全可用。