如何在Element Web Messenger中隐藏机器人交互并自动化mautrix/whatsapp登录？

方案1：Tampermonkey用户脚本（快速实现） #

无需修改Element或机器人代码，直接在浏览器中添加脚本，点击按钮即可自动完成所有步骤并弹出二维码。

步骤1：编写用户脚本 #

创建Tampermonkey脚本，核心逻辑包含自动创建私聊房间、发送login指令、监听并弹窗展示二维码：

// ==UserScript==
// @name         Mautrix-WhatsApp Quick Login
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  一键触发WhatsApp桥接登录
// @match        https://app.element.io/*  // 替换为你的Element Web地址
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 向Element界面添加自定义登录按钮
    function addLoginButton() {
        const header = document.querySelector('.mx_RoomHeader');
        if (!header || document.getElementById('wa-login-btn')) return;

        const btn = document.createElement('button');
        btn.id = 'wa-login-btn';
        btn.textContent = 'WhatsApp一键登录';
        btn.style.padding = '6px 12px';
        btn.style.marginLeft = '8px';
        btn.style.backgroundColor = '#0066cc';
        btn.style.color = 'white';
        btn.style.border = 'none';
        btn.style.borderRadius = '4px';
        btn.style.cursor = 'pointer';
        btn.addEventListener('click', handleLogin);
        header.appendChild(btn);
    }

    // 执行自动化登录流程
    async function handleLogin() {
        const WA_BOT_ID = '@whatsapp:your-homeserver.tld'; // 替换为你的机器人ID
        const client = window.mxMatrixClientPeg.get();

        try {
            // 创建与机器人的私聊房间
            const roomId = await client.createRoom({
                invite: [WA_BOT_ID],
                is_direct: true,
                name: 'WhatsBridge'
            });

            // 切换到新建房间
            window.location.hash = `/#/room/${roomId}`;

            // 等待房间加载后发送login指令
            setTimeout(async () => {
                await client.sendTextMessage(roomId, 'login');
            }, 2000);

            // 监听机器人发送的二维码消息
            const listener = client.on('Room.timeline', (event) => {
                if (event.getType() === 'm.image' && event.getSender() === WA_BOT_ID) {
                    const content = event.getContent();
                    const qrHttpUrl = client.mxcUrlToHttp(content.url);
                    // 弹窗展示二维码
                    const qrWindow = window.open('', 'WhatsApp登录二维码', 'width=300,height=300');
                    qrWindow.document.write(`<img src="${qrHttpUrl}" alt="扫码登录WhatsApp" style="width:100%;"/>`);
                    // 完成后移除监听器
                    client.removeListener('Room.timeline', listener);
                }
            });
        } catch (err) {
            alert('登录流程出错：' + err.message);
        }
    }

    // 页面加载及动态切换时添加按钮
    window.addEventListener('load', addLoginButton);
    setInterval(addLoginButton, 1000);
})();

步骤2：配置脚本 #

• 替换@match中的Element Web地址为你实际使用的地址
• 替换WA_BOT_ID为你的Mautrix-WhatsApp机器人ID（格式为@whatsapp:你的服务器域名）

步骤3：使用 #

安装脚本后，Element的房间头部会出现「WhatsApp一键登录」按钮，点击后自动完成建房间、发指令、弹出二维码窗口的全流程。

方案2：自定义Element Widget（集成化实现） #

若你自行部署Element Web，可通过Widget API将登录逻辑深度集成到界面：

• 创建包含登录按钮的自定义Widget
• 调用Matrix Client SDK完成建房间、发消息、解析二维码的逻辑
• 将Widget嵌入Element侧边栏或首页

关键注意事项 #

• 确保Mautrix-WhatsApp机器人已在你的Matrix服务器正确部署并注册
• 依赖Element Web暴露的全局对象mxMatrixClientPeg（默认可用）
• 机器人返回的二维码为MXC格式，需通过client.mxcUrlToHttp()转换为可访问的HTTP链接

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