怎么用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。

lonely_8：const autoFill = (selector, value) => {
    const input = document.querySelector(selector);
    input.value = value...回到原帖

感谢！还有就是某些网站点击登录按钮，并不是跳转到登录页面，而只是在当前页面弹出一个登录框，例如 http://www.bathome.net/。
按 document.querySelector('[name="username"]').value='用户名';  这样的方法并不会填入帐号密码信息的，不知有何办法监听这个登录弹出框，然后再自动填入表单呢？


还有个就是，在weibo.com登录界面，下面的代码在GM脚本里是不会自动填入表单的，然而在控制台输入后却又能填入，不知具体是什么原因呢？

if (location.hostname.indexOf('weibo.com') != -1)
{
window.addEventListener('load',function(){
document.querySelector('[name="username"]').value='帐号';
document.querySelector('[name="password"]').value='密码';
    },false); 
}

最后就是，不知学习javascript有什么书籍或网站推荐的吗？本人纯小白一个，对javascript很感兴趣，因为用firefox加GM脚本真是如虎添翼有如神助，但是苦于没有基础，只得在论坛上拿来主义，颇不好意思的。

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

谢谢大佬解答！
关于微博自动填单，我刚刚试了一下用延时可以成功。

function fill(){
document.querySelector('[name="username"]').value='帐号';
document.querySelector('[name="password"]').value='密码';
    }
  setTimeout(fill,5100);

你刚刚回复的代码是针对bathome的弹出登录框而不是微博吧？因为我刚刚试验了一下，微博填了表单，但还是被清空了，而bathome是适用的。所以设想下微博用延时的话不就解决了吗？只是延时加载会有个不确定性，假设我页面是超过5秒扔未加载的话，那GM填单还是早于网站表单生成。

lonely_8：我是在用户主页测试的，删掉14-15行看看。
微博主页的登录表单傻傻地渲染了两次。回到原帖

删掉14-15行，没有效果哦

lonely_8：我这里已经可以了，
你再试试同时把
const input = document.querySelector(selector);
改为
const input = evt.target;回到原帖

有用，刚刚的回复说删除14-15没效果，原来是我除了那两行不小心多删了。原来的是可以填单的。谢谢！

lonely_8：我这里已经可以了，
你再试试同时把
const input = document.querySelector(selector);
改为
const input = evt.target;回到原帖

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

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

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

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

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

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');

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

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

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：// ==UserScript==
// @name            AutoFillForm
// @namespace       none
// @description     自动填单
// @include    ...回到原帖

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

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

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

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

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', '密码');
}