原创：使用 Tampermonkey5.1.1_0加自定义编写的js脚本实现自动填充表单

52pjdana

最近有碰到要使用单点登录的需求，最开始是按照固定流程使用OAuth2.0或者jwt等技术
通过父子系统交互的方式实现单点登录。
缺点：代码繁琐，而且需要子系统配合提供单点登录接口，并且跳转时子系统需要携带其token等参数
优点：安全，通过系统交互的方式鉴权访问接口。

由于要集成的子系统很多，而且类似企业邮箱这种很少能提供标准的鉴权接口，所以便想了一个非常取巧的方式实现：
浏览器控制台可以执行js文件，例如console.log("xxx"),可不可以直接通过js获取表单元素直接填充登录账号和密码实现另类的单点登录？

找了半天发现浏览器扩展油猴脚本Tampermonkey可以解决这个问题，于是便有了这篇文章，使用Tampermonkey插件监听访问的网站，
用户通过访问url携带参数来交给油猴脚本（也就是js代码）截取，js代码中通过获取表单元素，然后填充截取的参数到表单，再给登录按钮一个
点击事件。完成

执行样例使用网易企业邮箱为例，示例图在文末，此处单独拉出js代码进行分析
文末提供油猴插件下载链接和js脚本链接，感兴趣的可以在浏览器安装扩展并使用此脚本自定义自己的填充策略。不止可以登录哦，表单元素获取填充
还可以去除繁重的表单录入工作

脚本样例代码和油猴脚本插件，在浏览器安装扩展即可
我用夸克网盘分享了「Desktop.zip」，点击链接即可保存。
链接：https://pan.quark.cn/s/88807341ef49

js代码分析：其中@match是拦截所需要的请求网址，这里以网易企业邮箱为例，最后的访问路径为https://qy.163.com/login/?username=username.cn&password=password
// ==UserScript==
// @name         Auto Fill Login with URL Params
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  自动填充多个登录页面
// @AuThor       You


// @match        https://qy.163.com/login/*

// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 解析URL参数的函数
    function getQueryParam(param) {
        let url = window.location.search
        if(url == '' && window.location.href.includes('#')){
            let split = window.location.href.split('?')
            if(split.length == 2){
                url = '?' + split[1]
            }
        }
        let urlParams = new URLSearchParams(url);
        return urlParams.get(param);
    }

    // 强制页面滚动，触发懒加载
    window.scrollTo(0, document.body.scrollHeight);

    const username = getQueryParam('username');
    const password = getQueryParam('password');

    if (!username || !password) {
        console.log('未找到参数!');
        return;
    }

    const maxRetries = 10;
    let retryCount = 0;

    const intervalId = setInterval(function() {
        let usernameField, passwordField, loginButton;

        // 根据不同的URL匹配不同的元素
       if (window.location.href.includes("https://qy.163.com/login/")) {
            console.log('企业邮箱页面');
            usernameField = document.querySelector('#accname');
            passwordField = document.querySelector('#accpwd');
            loginButton = document.querySelector('.w-button.w-button-account.js-loginbtn');
        }

        if (usernameField && passwordField) {
            // 填充
            usernameField.value = username;
            usernameField.dispatchEvent(new Event('input', { bubbles: true }));

            // 填充
            passwordField.value = password;
            passwordField.dispatchEvent(new Event('input', { bubbles: true }));

            console.log('已填充');

            // 如果需要自动点击登录按钮
            if (loginButton) {
                loginButton.click();
                console.log('已点击');
            }

            // 清除定时器，停止继续查找
            clearInterval(intervalId);
        } else {
            retryCount++;
            console.log('等待表单加载...');
        }

        if (retryCount >= maxRetries) {
            console.log('未能找到表单元素，停止尝试');
            clearInterval(intervalId);
        }
    }, 1000); // 每隔 1000ms 尝试查找一次

})();

52pjdana

mmdg13142 发表于 2024-8-28 10:01
这个怎么用？没看明白呢，是提前保存账号和密码，登录的时候手动点一下自动填充吗？

这个demo是将账号密码携带在链接的参数上，脚本会自动填充账号密码和点击登录按钮。  这个脚本可以扩展啊，目前是一个小demo，扩展就例如把参数换成读取本地或者网页的文件，甚至发请求调用api拿到账号密码等参数。然后自动填充输入框和自动点击登录按钮需要获取当前网页的这些表单元素

52pjdana

icho 发表于 2024-8-27 17:07
这个强，楼主厉害

油猴脚本扩展安装过程我没截图，可以在浏览器打开开发者模式然后加载本地脚本文件夹，加载这个5.1.1_0文件夹就自动安装了，表单元素f12可以直接获取，不止能填充账号密码，一些繁琐固定的表单也可以脚本加载

icho

这个强，楼主厉害

netpeng

省去了多次输入的麻烦，感谢分享。

HWSH4

厉害了，谢谢楼主分享

ouguo88

曾经想弄给这样的脚本，奈何不懂代码。感谢分享

wasm2023

请问，假设两个html，一个html是在线的，需要这个html一个标签里的某个参数，去传递给第二个html（本地html)去使用，有什么办法可以实现吗

52pjdana

wasm2023 发表于 2024-8-27 19:40
请问，假设两个html，一个html是在线的，需要这个html一个标签里的某个参数，去传递给第二个html（本地html ...

用a标签链接啊，携带参数的链接，例如   222.cn/loagin?username=xxx，不清楚你说的在线和本地是啥意思

junglelaw

之前移动官网打几十个手机号码发票，每个号都要一遍遍输入发票信息，后来网上找到Lightning Autofill这个插件，也很好用，一键填入

wasm2023

52pjdana 发表于 2024-8-27 20:02
用a标签链接啊，携带参数的链接，例如   222.cn/loagin?username=xxx，不清楚你说的在线和本地是啥意思

本地，就是自己写的那种，不是在线地址那种，a标签链接是啥意思呢，我是说某个标签里的某个参数呦