Tampermonkey脚本：实现Windows文件选择按钮及定位调整

1. 实现点击按钮唤起系统文件选择框 #

受浏览器安全机制限制，无法直接通过JS调用系统文件弹窗，但可以借助隐藏的<input type="file">元素实现需求：

• 创建一个隐藏的文件选择输入框，点击按钮时触发它的click事件，就能唤起Windows系统的文件选择窗口
• 监听输入框的change事件，可获取用户选中的文件信息，方便后续处理

2. 将按钮定位到屏幕中间 #

通过CSS固定定位结合位移实现绝对居中，适配不同屏幕尺寸：

• 给容器设置position: fixed，让元素脱离文档流固定在屏幕上
• 用top: 50%和left: 50%将容器左上角定位到屏幕中心，再通过transform: translate(-50%, -50%)把容器整体位移到真正的中心位置
• 添加z-index属性确保按钮在页面最上层，避免被其他元素遮挡

修改后的完整代码 #

// ==UserScript==
// @name         Test Tampermonkey Script
// @version      0.1
// @description  Test
// @author       Me
// @match        https://test.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_info
// ==/UserScript==
(function() {
    'use strict';

    // 创建容器div
    var zNode = document.createElement('div');
    zNode.innerHTML = `
        <button id="myButton" type="button">Browse a file:</button>
        <!-- 隐藏的文件选择输入框 -->
        <input type="file" id="fileInput" style="display: none;">
    `;
    zNode.setAttribute('id', 'myContainer');
    
    // 给容器添加居中样式
    zNode.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999; /* 确保按钮在最上层 */
    `;
    
    document.body.appendChild(zNode);

    // 按钮点击事件：触发文件选择框
    document.getElementById("myButton").addEventListener("click", function() {
        document.getElementById("fileInput").click();
    }, false);

    // 文件选择完成事件：处理选中的文件
    document.getElementById("fileInput").addEventListener("change", function(e) {
        const selectedFile = e.target.files[0];
        if (selectedFile) {
            console.log("选中的文件：", selectedFile.name);
            // 这里可以添加对文件的后续处理逻辑
        }
    }, false);

})();

内容的提问来源于stack exchange，提问作者JoeCastro