assist/content-script.js

function assistLoad(itemId) {
    // 页面为加载完毕就不断等待
    if (!document.body) {
        setTimeout(() => {
            assistLoad()
        }, 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 (!event.data.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);
        switch (event.data.type) {
            // assistMsg('click','#shi')
            case "click":
                if (typeof event.data.target === "string") {
                    if (document.querySelector(event.data.target)) {
                        document.querySelector(event.data.target).click()
                        sendCallBack(event.data.callBackID, {"err": 0})
                    } else {
                        sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                    }
                    
                } else {
                    if (document.querySelectorAll(event.data.target[0])[event.data.target[1]]) {
                        document.querySelectorAll(event.data.target[0])[event.data.target[1]].click()
                        sendCallBack(event.data.callBackID, {"err": 0})
                    } else {
                        sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                    }
                }
                
                break;
            case "setValue":
                const domTemp = document.querySelector(event.data.target)
                if (domTemp) {
                    domTemp.value = event.data.value
                    // 触发 `input` 事件，让 Vue/React 或监听的代码能检测到变化
                    domTemp.dispatchEvent(new Event("input", { bubbles: true }));
                    sendCallBack(event.data.callBackID, {"err": 0})
                } else {
                    sendCallBack(event.data.callBackID, {"err": 1, "msg": "元素不存在!"})
                }
                
                break;
            // assistMsg('fetch', {
            //   url: "https://obfuscator.lamp.run",
            //   method: "POST",
            //   body: "{\"code\":\"document.querySelector('.conn-box .show').innerHTML='gf'\"}",
            //   redirect: "follow"
            // })
            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":
                fetch(event.data.value.url, event.data.value.options)
                .then((response) => response.text())
                .then((result) => {
                    console.log(result)
                    if (event.data.callBackID) {
                    sendCallBack(event.data.callBackID, result)
                    }
                })
                .catch((error) => console.error(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('加载成功!')