assist/content-script.js

function assistLoad(itemId) {
    // 页面为加载完毕就不断等待
    if (!document.body) {
        setTimeout(() => {
            assistLoad(itemId)
        }, 500);
        return
    }
    // 创建div元素
    const newDiv = document.createElement('div');

    // 设置div的内容和属性

    newDiv.id = 'assistBox';
    newDiv.className = 'assist-box';
    newDiv.innerHTML = `
        <img style="position: absolute;top: -6px;left: -13px;" onclick="window.assistBox.style.right = (window.assistBox.style.right == '-301px' ? '0' : '-301px')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAA8CAYAAACw00AzAAABtklEQVRIie3WvU7bUBTA8b9vrKSGhKZqyAALWToQVYWhElM3pDbiG8aqcx+Al+jAAzCwdar6QVDLK3SgMDAa0g0JlGTDBmOw0bUasOHGyV2hZ7LO/d2jc+61ZPPQw5Dz2Qd/u405CbwD3piZzIDZRb0APgELnYTn+6jwEvAFyMSTGSGO7uIa8K1bTyL2/Bz4mXZHcbzRGbgXHgHm02Acv+8F43hKB4/qYEsHX+ngvuI/VuIgCMhms+Ryueg5FUvYbDZxXZdCoaDccIPzg4Mcn5ywWd+KXmrVhts2wpBnxSKNRoOv339gmib5fD6xITFgGIaUSsPYts1mvR7l5AwppxFSLpfZ+bPLr+1tBiwLwzDUWAiB4zg8HRqiMlbhwvdv1kwVNAzB8vIi1fFxWq3W/TYkdN0zzs895mZneFmtRlDOcQ9f+j5BGFCrvWVi4hXNf7DTb6KNU8ehUhnDemLRbrejI4vDRGVZRRgCz/OUMFFZLnYuQAWVR5cWjwYnvh+98IVO5WMdvKeDP+tgG/jdL5bxQQcfAh/7xTLWgdV+sYw1YBrYv5Mv9frfWAHmgNeA3w09wgCuAWMViFVtipj2AAAAAElFTkSuQmCC">
    `;
    newDiv.style.cssText = `
        position: fixed;
        right: 0;
        bottom: 20px;
        border: 1px solid #ccc;
        background-color: rgba(255, 255,255, 0.8);
        z-index: 99;
        transition: right 1s ease;
    `;
    
    // 将div插入到body的末尾
    document.body.appendChild(newDiv);
    // 创建 iframe 并插入页面
    const iframe = document.createElement('iframe');
    
    iframe.src = itemId ? `https://demos.run/assist/index-${itemId}.html` : 'https://demos.run/assist/index.html'; 
    iframe.style.cssText = `width: 300px;height: 400px;border: none;`
    setTimeout(() => {
        window.assistBox.appendChild(iframe);
    }, 0);
    // 向 iframe 发送消息
    iframe.onload = () => {
        iframe.contentWindow.postMessage({
            type: "onload",
            value: location.href
        }, '*');
    };
    function sendCallBack(callBackID, value) {
        if (!callBackID) return
        iframe.contentWindow.postMessage({
            type: "callBack",
            value,
            callBackID
        }, '*');
    }
    // 发送和接收页面
    const channel = new BroadcastChannel('tab_channel');

    // 接收消息
    channel.onmessage = function(event) {
        console.log('同源窗口消息：', event.data);
        if (event.data.type === 'assistTabMessage') {
            iframe.contentWindow.postMessage({
                type: "assistTabMessage",
                value: event.data.value,
                url: location.href
            }, '*');
        }
    };
    // 接收子页面发来的消息
    window.addEventListener('message', (event) => {
        // console.log('来自子页面的消息：', event.data);
        let domTemp = null
        if (event.data.target) {
            if (typeof event.data.target === "string") {
                domTemp = document.querySelector(event.data.target);
            } else {
                domTemp = document.querySelectorAll(event.data.target[0])[event.data.target[1]];
            }
        }
        switch (event.data.type) {
            // assistMsg('click','#shi')
            case "click":
                if (domTemp) {
                    document.querySelector(event.data.target).click()
                    sendCallBack(event.data.callBackID, {"err": 0})
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                }
                break;
            case "setValue":
                if (domTemp) {
                    try {
                        const element = domTemp;
                        const newValue = event.data.value;
                        
                        // 统一处理值设置
                        if (element.type === 'checkbox' || element.type === 'radio') {
                            element.checked = Boolean(newValue);
                        } else if (element.tagName === 'SELECT' && element.multiple) {
                            // 多选select
                            const values = Array.isArray(newValue) ? newValue : [newValue];
                            Array.from(element.options).forEach(option => {
                                option.selected = values.includes(option.value);
                            });
                        } else if (element.isContentEditable) {
                            // 可编辑元素
                            element.innerHTML = newValue;
                        } else {
                            // 普通input/textarea/select
                            element.value = newValue;
                        }
                        
                        // 触发所有可能的事件
                        const events = [
                            'input',           // Vue/React/Svelte
                            'change',          // 传统框架
                            'blur',            // 表单验证
                            'keyup',           // 键盘事件
                            'keydown',
                            'keypress'
                        ];
                        
                        events.forEach(eventType => {
                            element.dispatchEvent(new Event(eventType, {
                                bubbles: true,
                                cancelable: true
                            }));
                        });
                        
                        // 额外处理特殊事件
                        if (element.type === 'checkbox' || element.type === 'radio') {
                            element.dispatchEvent(new Event('click', { bubbles: true }));
                        }
                        
                        // 等待下一个事件循环，确保事件处理完成
                        setTimeout(() => {
                            // 再次触发change事件，确保异步处理完成
                            element.dispatchEvent(new Event('change', { bubbles: true }));
                        }, 0);
                        
                        sendCallBack(event.data.callBackID, {"err": 0, "msg": "设置成功"});
                        
                    } catch (error) {
                        sendCallBack(event.data.callBackID, {"err": 2, "msg": `设置失败: ${error.message}`});
                    }
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"});
                }
                break;
            case "getInnerText":
                if (domTemp) {
                    sendCallBack(event.data.callBackID, {"err": 0, "value": domTemp.innerText})
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                }
                break;
            case "getInnerHTML":
                if (domTemp) {
                    sendCallBack(event.data.callBackID, {"err": 0, "value": domTemp.innerHTML})
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                }
                break;
            case "turnURL":
                location.href = event.data.value;
                break;
            case "getURL":
                sendCallBack(event.data.callBackID, {"err": 0, "value": location.href})
                break;
            // assistMsg('fetch', {
            //   url: "https://obfuscator.lamp.run",
            //   method: "POST",
            //   body: "{\"code\":\"document.querySelector('.conn-box .show').innerHTML='gf'\"}",
            //   redirect: "follow"
            // })
            case "checkElementExist":
                if (domTemp) {
                    sendCallBack(event.data.callBackID, {"err": 0, "exist": true})
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "exist": false, "msg": "元素不存在!"})
                }
            case "querySelectorAll":
                let returnList = []
                let elTemp = null
                if (typeof event.data.value === "string") {
                    elTemp = document.querySelectorAll(event.data.value)
                } else {
                    elTemp = document.querySelectorAll(event.data.value[0])
                }
                document.querySelectorAll(event.data.value).forEach(element => {
                    let tempObj = {
                        id: element.id,
                        className: element.className,
                    }
                    if (typeof event.data.value === "object") {
                        event.data.value[1].forEach(key => {
                            if (element[key]) tempObj[key] = element[key]
                        });
                    }
                    returnList.push(tempObj)
                });
                sendCallBack(event.data.callBackID, returnList)
                break;
            case "fetch":
                chrome.runtime.sendMessage(
                {
                    name: 'fetch',
                    url: event.data.url,
                    options: event.data.options
                },
                function(response) {
                    console.log(response)
                    if (response.success) {
                        sendCallBack(event.data.callBackID, {"err": 0, "value": response.data, "headers": response.headers, "status": response.status})
                    } else {
                        sendCallBack(event.data.callBackID, {"err": 1, "msg": response.error})
                    }
                });
                break;
            case "closeWindow":
                window.close();
                break;
            case "back":
                history.back();
                break;
            case "localStorageGetItem":
                sendCallBack(event.data.callBackID, localStorage.getItem(event.data.value))
                break;
            case "localStorageSetItem":
                localStorage.setItem(event.data.value[0], event.data.value[1])
                break;
            case "removeAttribute":
                document.querySelectorAll(event.data.value[0]).forEach(element => {
                    element.removeAttribute(event.data.value[1])
                });
                break;
            case "sendTabMessage":
                // 发送消息
                channel.postMessage({type: 'assistTabMessage', value: event.data.value});
                break;
            default:
                break;
        }
    });
}



console.log('加载成功!')