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

const autoFill = (selector, value) => {
    const input = document.querySelector(selector);
    input.value = value;
    input.dispatchEvent(new Event('input', { bubbles: true }));
}
autoFill('#login-username', '帐号');
autoFill('#login-passwd', '密码');

b站登录框通过监听输入事件才记录输入信息，
所以需要在更改值后手动触发一下输入事件。

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脚本真是如虎添翼有如神助，但是苦于没有基础，只得在论坛上拿来主义，颇不好意思的。

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="username"]', '帐号');
autoFill('[name="password"]', '密码');

由于 GM 脚本运行时间早于表单生成的时间，所以肯定是不能实现填表的。


js基础学习，如果英语比较好可以看
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
或者中文版的
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
建议英文原版的，中文有些翻译比较老旧没跟上原版的更新。

英语基础相对弱的可以看，
https://www.w3school.com.cn/
我也是从这里自学开始，有人说上面有些教程错误，我当初反正是没发现。

我当初入门的目的也像你一样，为了实现一些功能方便自用，参考别人写的相似功能的代码，自己摸索着写。
光看教程真的没用，重要的是实践，不懂的地直接面向搜索引擎学习，才能深刻地记下来。

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填单还是早于网站表单生成。

kidzgy：谢谢大佬解答！
关于微博自动填单，我刚刚试了一下用延时可以成功。
function fill(){
document.querySelector('').value='帐号';

document.querySelector('')....回到原帖

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

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

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

kidzgy：删掉14-15行，没有效果哦回到原帖

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

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
刚刚发现知乎上的登录按照你的方法实现不了填单，不知道知乎有没有什么方法可以解决呢？

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

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

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

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

逗妇乳：其实你可以试试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');