视频号直播无人推送工具

自动推送小工具 using React and Bootstrap without JSX
目前为 2024-06-26 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         视频号直播无人推送工具
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  自动推送小工具 using React and Bootstrap without JSX
// @author       万叶
// @match        https://channels.weixin.qq.com/*
// @grant        none
// @license MIT
// ==/UserScript==

/* global React, ReactDOM, bootstrap */

(function() {
    'use strict';

    console.log("脚本开始执行"); // 控制台调试信息

    // 引入React和ReactDOM
    const reactScript = document.createElement('script');
    reactScript.src = 'https://unpkg.com/react/umd/react.production.min.js';
    const reactDOMScript = document.createElement('script');
    reactDOMScript.src = 'https://unpkg.com/react-dom/umd/react-dom.production.min.js';

    // 引入Bootstrap CSS
    const bootstrapCSS = document.createElement('link');
    bootstrapCSS.rel = 'stylesheet';
    bootstrapCSS.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
    document.head.appendChild(bootstrapCSS);

    // 引入Bootstrap JavaScript
    const bootstrapScript = document.createElement('script');
    bootstrapScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js';
    document.body.appendChild(bootstrapScript);

    document.head.appendChild(reactScript);
    document.head.appendChild(reactDOMScript);

    console.log("所有脚本注入完成"); // 控制台调试信息

    // 用于检查 React 和 ReactDOM 是否加载完成的函数
    const isLibLoaded = () => (
        typeof React !== 'undefined' &&
        typeof ReactDOM !== 'undefined' &&
        typeof bootstrap !== 'undefined'
    );

    // 检查库是否加载完成，如果完成则执行回调
    const checkAndExecute = (callback) => {
        if (isLibLoaded()) {
            console.log("库加载完成，执行回调函数"); // 控制台调试信息
            callback();
        } else {
            setTimeout(() => checkAndExecute(callback), 100);
            console.log("等待库加载..."); // 控制台调试信息
        }
    };

    // 等待 React 和 Bootstrap 加载完成
    checkAndExecute(() => {
        // 插入 React 渲染的 DOM 节点
        const appContainer = document.createElement('div');
        appContainer.id = 'root';
        appContainer.style.position = 'fixed';
        appContainer.style.right = '10px';
        appContainer.style.top = '10px';
        appContainer.style.zIndex = '1000';
        document.body.appendChild(appContainer);

        const { useState, useEffect } = React;

        // 定义 React 组件
        const PushTool = () => {
            const [frequency, setFrequency] = useState(10);
            const [isAutoPushEnabled, setIsAutoPushEnabled] = useState(false);

            useEffect(() => {
                let autoPushInterval;

                if (isAutoPushEnabled) {
                    triggerPush();

                    autoPushInterval = setInterval(() => {
                        console.log('停止推送'); // 控制台调试信息
                        document.querySelector('a.link.remove-link')?.click();
                        setTimeout(triggerPush, 1000);
                    }, frequency * 1000);
                }

                return () => clearInterval(autoPushInterval);
            }, [isAutoPushEnabled, frequency]);

            const triggerPush = () => {
                console.log('推送'); // 控制台调试信息
                const pushButton = Array.from(
                    document.querySelectorAll('a.link')
                ).find(a => a.textContent.includes('推送'));
                pushButton?.click();
            };

            return React.createElement(
                'div',
                { className: 'p-3 bg-white rounded shadow' },
                React.createElement('div', { className: 'mb-3' },
                    React.createElement('label', { className: 'form-label' }, '推送频率 (s):'),
                    React.createElement('input', {
                        type: 'number',
                        min: 2,
                        max: 600,
                        value: frequency,
                        onChange: (e) => setFrequency(parseInt(e.target.value, 10)),
                        className: 'form-control'
                    })
                ),
                React.createElement('div', { className: '' }, '自动推送:'),
                React.createElement('div', { className: 'form-switch' },
                    React.createElement('input', {
                        className: 'form-check-input',
                        type: 'checkbox',
                        checked: isAutoPushEnabled,
                        onChange: (e) => setIsAutoPushEnabled(e.target.checked),
                        style: { width: '40px', height: '20px' }
                    }),
                )
            );
        };

        // 渲染 React 组件
        ReactDOM.render(React.createElement(PushTool), document.getElementById('root'));

        console.log("组件渲染完成"); // 控制台调试信息
    });

})();