pvs_agent/src/entrypoints/content.js

// entrypoints/content.ts
import PageAnalyzer, { cleanPage } from '../utils/page-analyzer'

export default defineContentScript({
    matches: ["<all_urls>"],
    main(ctx) {
        let page = document.getElementsByTagName('body')[0];
        const src = chrome.runtime.getURL('images/begin.png')
        window.pageAnalyzer = new PageAnalyzer();
        window.onload = () => {
            chrome.runtime.sendMessage(getPageInfo())
            console.log(document.title);

        }
        let form = null
        let formChildren = []
        let excelDataA = {}
        chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
            if (message.type === 'GET_PAGE_INFO') {
                sendResponse({
                    data: getPageInfo()
                })
            }
            let dom = null
            if (message.type === "GET_TAG_ACTION") {
                const data = message.data
                if (0) {
                    dom = document.getElementById(data.id)
                } else {
                    dom = [...document.getElementsByTagName(data.tag.toLowerCase())]
                        // .filter(_ => _.className.includes(data.class))
                        .filter(_ => _.innerText.includes(data.text))[0]
                }
                console.log(dom);
                if (!dom) {
                    sendResponse({ data: '未找到元素，请重试', statue: 'error' })
                    return
                }
                // 添加红色边框，500ms后移除边框，然后点击
                const originalBorder = dom.style.border;
                dom.style.border = '2px solid red';
                setTimeout(() => {
                    dom.style.border = originalBorder;
                    dom.click();
                }, 1000);
                sendResponse({ data: '完成' })
                return true
            }

            if (message.type === 'GET_PAGE_FORM') {

                const len = document.querySelectorAll("form").length
                if (document.title === '智能招采' && len === 1) {
                    sendResponse({
                        status: 'error',
                        message: '没有找到表单'
                    })
                    return
                }

                if (len) {
                    const forms = document.querySelectorAll("form")
                    if (len > 1) {
                        form = forms[len - 1]
                    } else form = forms[0]
                    form.querySelectorAll("svg")
                        .forEach((el) => el.remove());
                    formChildren = [...form.elements]
                }
                // if (!form && document.querySelector("input")) {
                //     const arr = []
                //     const inputs = document.querySelectorAll("input")
                //     formChildren = [...inputs]

                //     for (const element of inputs) {
                //         arr.push(element.outerHTML)
                //     }
                //     form = { outerHTML: JSON.stringify(arr) }
                // }
                if (!form) {
                    sendResponse({
                        status: 'error',
                        message: '没有找到表单'
                    })
                    return
                }
                sendResponse({
                    status: 'ok',
                    data: form.outerHTML
                })
            }
            if (message.type === "INPUT_FORM") {
                const { formData, excelData } = message.data
                excelDataA = excelData
                console.log(formData, excelDataA);
                await handleFillInput(formData, 0)
            }
            return true
        });
        function getPageInfo() {
            const favIconUrl = getFavicon()
            return {
                type: "PAGE_INFO",
                data: {
                    favIconUrl,
                    title: document.title,
                    url: window.location.href,
                    content: window.pageAnalyzer.analyzePage()
                },
            }
        }
        function getFavicon() {
            // 尝试获取动态favicon
            const iconLinks = Array.from(
                document.querySelectorAll('link[rel*="icon"]')
            );
            const favIconUrl = iconLinks
                .sort((a, b) => {
                    // 优先使用大尺寸图标
                    const sizeA = parseInt(a.sizes?.value) || 0;
                    const sizeB = parseInt(b.sizes?.value) || 0;
                    return sizeB - sizeA;
                })
                .map((link) => link.href)
                .find(Boolean);

            if (favIconUrl) return favIconUrl;

            // 如果没有找到，返回网站根目录的favicon.ico
            const url = new URL(window.location.href);
            return `${url.protocol}//${url.hostname}/favicon.ico`;
        }
        const handleFillInput = async (data, index) => {
            console.log(data);

            for (let i = 0; i < data.length; i++) {
                const item = data[i]
                if (item.findBy === 'id') {
                    const input = formChildren.find(child => child.id === item.findByValue)
                    if (item.type === 'text' || item.type === 'textarea' || item.type === 'number') {
                        if (!input) {
                            if (item.label) {
                                const label = [...form.getElementsByTagName('label')].find(label => label.innerText.includes(item.label))
                                if (label) {
                                    const input = findLabelForInput(label)
                                    if (input) {
                                        await simulateUserInput(input, excelDataA[item.excelColumn])
                                    }
                                }
                            }
                        }
                        if (input) {
                            await simulateUserInput(input, excelDataA[item.excelColumn])
                        }
                    }
                    if (item.type === 'radio' || item.type === 'checkbox') {
                        if (item.label) {

                            const label = [...form.getElementsByTagName('label')].find(label => label.innerText.includes(item.label))
                            if (label) {
                                const span = findLabelForSpan(label)
                                span.forEach(span => {
                                    span.innerText === excelDataA[item.excelColumn] && span.click()
                                })
                            }
                        }
                    }

                    if (item.type === 'date') {
                        
                        const input = formChildren.find(child => child.id === item.findByValue)
                        if (excelDataA[item.excelColumn]) {

                            await simulateCompleteUserAction(input, input, formatDate(excelDataA[item.excelColumn]), formatDate(excelDataA[item.excelColumn]))
                        }
                    }
                }
                if (item.findBy === 'placeholder') {
                    const input = formChildren.find(child => child.placeholder === item.findByValue)
                    if (input) {
                        simulateUserInput(input, excelDataA[item.excelColumn])
                    }
                }
                if (item.findBy === 'label') {
                    if (!excelDataA[item.excelColumn]) continue
                    const label = [...form.getElementsByTagName('label')].find(label => label.innerText.includes(item.findByValue) || item.findByValue.includes(label.innerText))
                    console.log(label)
                    if (!label) continue
                    if (item.type === 'radio' || item.type === 'checkbox') {
                        console.log(excelDataA[item.excelColumn]);
                        
                        if (label) {
                            const span = findLabelForSpan(label)
                            span.forEach(span => {
                                console.log(span.innerText);
                                if (span.innerText) {
                                    if (span.innerText.includes(excelDataA[item.excelColumn]) || excelDataA[item.excelColumn].includes(span.innerText)) {
                                        console.log(span);
                                        span.click()
                                    }     
                                }
                            })
                        }
                    }

                    if (item.type === 'date') {
                        const input = findLabelForInput(label)
                        console.log(input, excelDataA[item.excelColumn]);
                        
                        if (input) {
                            await simulateCompleteUserAction(input, input, formatDate(excelDataA[item.excelColumn]), formatDate(excelDataA[item.excelColumn]))
                        }
                    }

                    if (item.type === 'input' || item.type === 'text' || item.type === 'number' || item.type === 'tel' || item.type === 'email') {
                        const input = findLabelForInput(label)
                        if (input) {
                            console.log(excelDataA[item.excelColumn]);

                            await simulateUserInput(input, excelDataA[item.excelColumn])
                        }
                    }
                    if (item.type === 'select') {
                        const input = findLabelForInput(label)
                        if (input) {
                            await simulateUserInput(input, excelDataA[item.excelColumn])
                        }
                    }
                }
            }
        }
        const simulateUserInput = async (element, value) => {
            // 设置值
            // if (element.tagName.toLowerCase() === 'textarea') {
            //   element.focus()
            //   element.value = value
            //   element.blur()
            //   return
            // }
            element.value = value;

            // 创建并触发 input 事件
            const inputEvent = new Event('input', { bubbles: true });
            element.dispatchEvent(inputEvent);

            // 创建并触发 change 事件
            const changeEvent = new Event('change', { bubbles: true });
            element.dispatchEvent(changeEvent);

            // 可选：如果表单使用了 React/Vue 等框架，可能还需要触发以下事件
            element.dispatchEvent(new Event('blur'));
            element.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
        }
        const findLabelForInput = (label) => {
            let p = label.parentElement
            for (let i = 0; i < 10; i++) {
                const input = p.getElementsByTagName('input')
                if (input.length > 0) {
                    return input[0]
                }
                p = p.parentElement
            }
            return null
        }
        const findLabelForTag = (label, tag) => {
            let p = label.parentElement
            for (let i = 0; i < 10; i++) {
                const input = p.getElementsByTagName('input')
                if (input.length > 0) {
                    return input[0]
                }
                p = p.parentElement
            }
            return null
        }
        const findLabelForSpan = (label) => {
            let p = label.parentElement
            for (let i = 0; i < 10; i++) {
                const span = p.getElementsByTagName('span')
                if (span.length > 0) {
                    return [...span]
                }
                p = p.parentElement
            }
            return null
        }
        const simulateCompleteUserAction = async (clickElement, inputElement, inputText, tdTitle) => {
            // 1. 模拟鼠标弹起事件
            const simulateMouseUp = (element) => {
                const mouseUpEvent = new MouseEvent('mouseup', {
                    bubbles: true,
                    cancelable: true,
                    view: window,
                    button: 0,
                    buttons: 0,
                    clientX: 0,
                    clientY: 0,
                    detail: 1
                });
                element.dispatchEvent(mouseUpEvent);
            };
            // 123456qq?
            // 2. 模拟键盘输入
            const simulateTyping = async (element, text, delay = 50) => {
                element.focus();
                for (let char of text) {
                    await new Promise(resolve => setTimeout(resolve, delay));

                    // 按键按下
                    const keydownEvent = new KeyboardEvent('keydown', {
                        key: char,
                        code: `Key${char.toUpperCase()}`,
                        bubbles: true,
                        cancelable: true
                    });
                    element.dispatchEvent(keydownEvent);

                    // 更新输入值
                    element.value += char;

                    // 触发输入事件
                    const inputEvent = new InputEvent('input', {
                        bubbles: true,
                        cancelable: true,
                        data: char,
                        inputType: 'insertText'
                    });
                    element.dispatchEvent(inputEvent);

                    // 按键弹起
                    const keyupEvent = new KeyboardEvent('keyup', {
                        key: char,
                        code: `Key${char.toUpperCase()}`,
                        bubbles: true,
                        cancelable: true
                    });
                    element.dispatchEvent(keyupEvent);
                }

                // 触发change事件
                element.dispatchEvent(new Event('change', { bubbles: true }));
            };

            // 3. 查找td元素
            const findTdByTitle = (title, timeout = 5000) => {
                return new Promise((resolve, reject) => {
                    const startTime = Date.now();

                    const find = () => {
                        const td = document.querySelector(`td[title="${title}"]`);
                        if (td) {
                            resolve(td);
                            return;
                        }

                        if (Date.now() - startTime > timeout) {
                            reject(new Error(`未找到title为"${title}"的td元素`));
                            return;
                        }

                        requestAnimationFrame(find);
                    };

                    find();
                });
            };

            // 4. 模拟点击事件
            const simulateClick = (element) => {
                const clickEvent = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window,
                    detail: 1
                });
                element.dispatchEvent(clickEvent);
            };

            try {
                // 执行操作序列

                // 1. 触发鼠标弹起
                simulateMouseUp(clickElement);
                await new Promise(resolve => setTimeout(resolve, 100));

                // 2. 模拟键盘输入
                await simulateTyping(inputElement, inputText);
                await new Promise(resolve => setTimeout(resolve, 200));

                // 3. 查找并点击td元素
                // const tdElement = await findTdByTitle(tdTitle);

                const enterKeyEvent = new KeyboardEvent('keydown', {
                    key: 'Enter',       // 事件键名
                    code: 'Enter',      // 物理按键编码
                    keyCode: 13,        // 传统键码（Enter键为13）
                    which: 13,          // 同keyCode
                    bubbles: true,      // 允许事件冒泡
                    cancelable: true    // 允许事件被取消
                });
                setTimeout(() => {
                    inputElement.dispatchEvent(enterKeyEvent);
                }, 0)
                await new Promise(resolve => setTimeout(resolve, 500));
                return true;
            } catch (error) {
                throw error;
            }
        };
        function formatDate(date) {
            // 直接创建北京时间的日期对象
            const d = new Date(date);

            // 获取年、月、日
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(d.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        }

    },
});