怎么用GM脚本实现对哔哩哔哩登录自动填单的功能？

我常常用GM脚本实现对各网站的自动填写帐号密码，虽然我知道这样做的安全性，但是为了便利迅速，还是喜欢这样做。
lastpass也试用过，非常不好用，默认填写的只是带有name属性的元素，而且不能实现自动点击提交或自动聚焦到验证码栏，故我觉得GM脚本实现自动登录是最好的方式。
但在实际操作过程，部分网站填写后是无效的，很奇怪。



例如：https://passport.bilibili.com/login

图片：微信截图_20200304000348.png

if (location.hostname.indexOf('bilibili.com') != -1)
{
window.addEventListener('load',function(){
document.querySelector('#login-username').value='帐号';
document.querySelector('#login-passwd').value='密码';
    },false); 
}

我在用上述代码放进GM脚本里，表面上是可以实现自动填单，但点击登录时，会提示没有输入帐号密码。试请教，不知道有没有什么更好的办法可以实现填单并能被网站所接受呢？

环境：WIN10 X64，FF72.0.1，暴力猴2.12.7。

shinco20：可否分享一下最后的脚本？谢谢回到原帖

// ==UserScript==
// @name            AutoFillForm
// @namespace       none
// @description     自动填单
// @include         http*
// @version       1.0
// ==/UserScript==
const autoFill = (selector, type, value) => {
  const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
  const style = document.createElement('style');
  style.textContent = `
      @keyframes ${animationName} {from{opacity:.9;}to{opacity:1;}}
      ${selector} {animation: ${animationName} 1ms;}
  `;
   
  const animationstart = (evt) => {
    if (evt.animationName !== animationName) return;
    const input = evt.target;
    input.focus();
    if (type === 'input') {
      Object.getOwnPropertyDescriptor(
        HTMLInputElement.prototype, 'value'
      ).set.call(input, value);
      input.dispatchEvent(new Event('input', {
        bubbles: true
      }));
    } else if (type === 'click') {
      input.click();
    }
    else if (type === 'focus') {
      setTimeout(() => {input.focus()}, 300); 
    }
  }
  addEventListener('animationstart', animationstart);
  document.head.appendChild(style);
}
//示例
//autoFill('[name="username"]', 'input', '帐号');
//autoFill('[name="password"]', 'input', '密码'); 
//autoFill('[name="cookietime"]', 'click');
//autoFill('#verifyCode',  'focus');
 
 
if (location.href.indexOf('txffp.com') != -1)
{
autoFill('#loginName', 'input','帐号');
autoFill('#passwd','input', '密码');
}

kidzgy：原来如此，我还以为像之前用document.querySelector那套按照顺序来就行了，感谢解答！试着加了延迟，确实管用！回到原帖

可否分享一下最后的脚本？谢谢

lonely_8：这个很难，因为发现输入框控件都是通过事件异步操作的，不能保证顺序，而焦点永远只能有一个。
试试按你的修改，并且将中间行改为 setTimeout(() => {input.focus()}, 200);
延迟需要设置焦点控件的操作，保证...回到原帖

原来如此，我还以为像之前用document.querySelector那套按照顺序来就行了，感谢解答！试着加了延迟，确实管用！

kidzgy：如果要实现focus某个输入框该怎么写？
我自己以此类推，加入
else if (type === 'focus') {
      input.focus();
    }

试了下autoFill('', 'focus');...回到原帖

这个很难，因为发现输入框控件都是通过事件异步操作的，不能保证顺序，而焦点永远只能有一个。
试试按你的修改，并且将中间行改为 setTimeout(() => {input.focus()}, 200);
延迟需要设置焦点控件的操作，保证在最后执行。

lonely_8：// ==UserScript==
// @name            AutoFillForm
// @namespace       none
// @description     自动填单
// @include    ...回到原帖

如果要实现focus某个输入框该怎么写？
我自己以此类推，加入
else if (type === 'focus') {
      input.focus();
    }

试了下autoFill('[name="password"]', 'focus');或者autoFill('[name="password"]', 'click');均不管用
谢谢！

// ==UserScript==
// @name            AutoFillForm
// @namespace       none
// @description     自动填单
// @include         http*
// @version       1.0
// @run-at       document-end
// ==/UserScript==
const autoFill = (selector, type, value) => {
  const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
  const style = document.createElement('style');
  style.textContent = `
      @keyframes ${animationName} {from{opacity:.9;}to{opacity:1;}}
      ${selector} {animation: ${animationName} 1ms;}
  `;
 
  const animationstart = (evt) => {
    if (evt.animationName !== animationName) return;
    const input = evt.target;
    input.focus();
    if (type === 'input') {
      Object.getOwnPropertyDescriptor(
        HTMLInputElement.prototype, 'value'
      ).set.call(input, value);
      input.dispatchEvent(new Event('input', {
        bubbles: true
      }));
    } else if (type === 'click') {
      input.click();
    }
  }
  addEventListener('animationstart', animationstart);
  document.head.appendChild(style);
}
 
if (location.href.indexOf('dl.reg.163.com') != -1) {
  autoFill('[name="email"]', 'input', '帐号');
  autoFill('[name="password"]', 'input', '密码');
}
 
if (location.href.indexOf('cuipixiong.com') != -1) {
  autoFill('[name="username"]', 'input', '帐号');
  autoFill('[name="password"]', 'input', '密码');
  autoFill('[name="cookietime"]', 'click');
}

试试这个，加了一个参数，表示模拟类型。

lonely_8：可以的，不过因为登录框是在iframe里面，需要将下面地址加入，而不是上面两个地址。
https://dl.reg.163.com/*回到原帖

大大您好！以下是我常用的代码：

// ==UserScript==
// @name            AutoFillForm
// @namespace       none
// @description     自动填单
// @include         http*
// @version       1.0
// @run-at       document-end
// ==/UserScript==
  const autoFill = (selector, value) => {
    const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ${animationName} {from{opacity:.9;}to{opacity:1;}}
        ${selector} {animation: ${animationName} 1ms;}
    `;
    const valueSetter = Object.getOwnPropertyDescriptor(
        HTMLInputElement.prototype, 'value'
    ).set;
    const animationstart = (evt) => {
        if(evt.animationName !== animationName) return;
        const input = evt.target;
        input.focus();
        valueSetter.call(input, value);
        input.dispatchEvent(new Event('input', { bubbles: true }));
    }
    addEventListener('animationstart', animationstart);
    document.head.appendChild(style);
}
   
   
if (location.href.indexOf('dl.reg.163.com') != -1)
{
autoFill('[name="email"]', '帐号');
autoFill('[name="password"]', '密码');
}
   
if (location.href.indexOf('cuipixiong.com') != -1)
{
autoFill('[name="username"]', '帐号');
autoFill('[name="password"]', '密码'); document.querySelector('[name="cookietime"]').checked="checked";

}

感觉非常好用，无论是怎么样的表格，包括弹窗类的表格都能一样填单，只要加上指定域名，然后两条语句autofill，就能轻轻松松将帐号密码填入。
使用了一段时间，但我发现还是有几个问题，特此想请教一下：
在遇到有些可以勾选“记住密码”的表单时，我在autofill帐号密码之后，添加 document.querySelector('[name="cookietime"]').checked="checked";
或者，有些验证码栏需要聚焦填入的，添加document.querySelector('#captcha_input').focus();
该两者都不会生效。
举例：http://cuipixiong.com/forum.php  （该网站目前有问题，不登录帐号还能看到论坛，登录后就看不到了，怀疑是cookies的问题，但不影响目前讨论填单代码）

该登录表单为弹窗窗口类表单，帐号密码是能正常填入，在添加 document.querySelector('[name="cookietime"]').checked="checked";后，勾选“自动登录”的操作并不生效。
除此之外，document.querySelector('[name="loginsubmit"]').click();   欲实现点击登录按钮，也没有反应。假设就这个表单，还另外存在验证码的情况，又如何实现勾选“自动登录”并聚焦到验证码栏呢？


我之前在网上搜寻了一些教程，基本上依靠query来实现这些功能，但是我在脚本加入query后，有些页面填单便出现了问题，



有没有办法，像脚本前面那段内容那样，加一段语句，后续的填单我可以自行添加，无论是不是弹窗类表格，我都能够实现填入帐号密码后会自动勾选“自动登录”，并聚焦“验证码栏”或自动点击“登录按钮”的操作？


谢谢！

lonely_8：可以的，不过因为登录框是在iframe里面，需要将下面地址加入，而不是上面两个地址。
https://dl.reg.163.com/*回到原帖

原来如此，那这样以来，我也明白了其他有些网址不能生效的原因了，大概也是用了iframe

可以的，不过因为登录框是在iframe里面，需要将下面地址加入，而不是上面两个地址。
https://dl.reg.163.com/*

lonely_8：const autoFill = (selector, value) => {
    const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
   ...回到原帖

https://mail.163.com/  及 https://email.163.com/

大大，现在碰上网易邮箱无法自动填单了，试过了你上述所有的方法都不管用，可否劳烦解决一下，谢谢！

const autoFill = (selector, value) => {
    const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ${animationName} {from{opacity:.9;}to{opacity:1;}}
        ${selector} {animation: ${animationName} 1ms;}
    `;
    const animationstart = (evt) => {
        if(evt.animationName !== animationName) return;
        const input = document.querySelector(selector);
        input.focus();
        input.value = value;
        input.dispatchEvent(new Event('input', { bubbles: true }));
        removeEventListener('animationstart', animationstart);
        style.remove();
    }
    addEventListener('animationstart', animationstart);
    document.head.appendChild(style);
}
autoFill('[name="email"]', 'admin');
autoFill('[name="password"]', 'password');

逗妇乳：其实你可以试试bitwarden，我觉得比lastpass强不少回到原帖

我觉得最方便的还是脚本，安全性我从不考虑，因为我的东西不值得被人偷

其实你可以试试bitwarden，我觉得比lastpass强不少

lonely_8：const autoFill = (selector, value) => {
    const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
   ...回到原帖

有效果！大佬简直神一般的存在！

kidzgy：https://www.zhihu.com/signin?next=%2F
刚刚发现知乎上的登录按照你的方法实现不了填单，不知道知乎有没有什么方法可以解决呢？回到原帖

const autoFill = (selector, value) => {
    const animationName = btoa(Math.random()).replace(/[^a-z]/ig, 'a');
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ${animationName} {from{opacity:.9;}to{opacity:1;}}
        ${selector} {animation: ${animationName} 1ms;}
    `;
    const valueSetter = Object.getOwnPropertyDescriptor(
        HTMLInputElement.prototype, 'value'
    ).set;
    const animationstart = (evt) => {
        if(evt.animationName !== animationName) return;
        const input = evt.target;
        input.focus();
        valueSetter.call(input, value);
        input.dispatchEvent(new Event('input', { bubbles: true }));
    }
    addEventListener('animationstart', animationstart);
    document.head.appendChild(style);
}
autoFill('[name="username"]', '帐号');
autoFill('[name="password"]', '密码');