网页上传文件(MV3版iframe可行方案)

第一种方式(适用于多框架iframe)  由tab页=》框架iframe=》文件框css选择器的nodeId

1.开启域DOM.getDocument或DOM.enable  
    chrome.debugger.sendCommand({tabId: tabId}, 'DOM.getDocument',{"pierce":true,"depth": -1},(result) => {console.log(result);})

2.通过Page.getFrameTree获取frameId
    chrome.debugger.sendCommand({tabId: tabId}, 'Page.getFrameTree',{},(result) => {console.log(result);})   >   >frameTree.childFrames[0].frame.id(即获取框架的frameId)

3.通过DOM.getFrameOwner
    chrome.debugger.sendCommand({tabId: tabId}, 'DOM.getFrameOwner',{frameId: frameId},(result) => {console.log(result);})   >   > 获取框架的nodeId,再nodeId=nodeId+1这样就获取跨框架的nodeId

4.通过DOM.querySelector
     例如文件框CSS选择器(#fileInput)   注意这个是重点(跨框架的nodeId)：nodeId=nodeId+1
     chrome.debugger.sendCommand({tabId: tabId}, 'DOM.querySelector',{nodeId: nodeId,selector:"#fileInput"},(result) => {console.log(result);})    >   >  获取到文件框CSS选择器的nodeId

5.通过DOM.setFileInputFiles
      例如设置文件路径["C:/Users/Administrator/Desktop/111.txt"]
      chrome.debugger.sendCommand({tabId: tabId}, "DOM.setFileInputFiles", {"nodeId":nodeId,"files":["C:/Users/Administrator/Desktop/111.txt"]})

第二种方式(单一框架)

1.通过DOM.getDocument
   chrome.debugger.sendCommand({tabId: tabId}, 'DOM.getDocument',{},(result) => {console.log(result);})    > >获取顶层框架(tab页)的nodeId

2.通过DOM.querySelector(第1次用)
   例如iframeCSS选择器(#iframe)   
     chrome.debugger.sendCommand({tabId: tabId}, 'DOM.querySelector',{nodeId: nodeId,selector:"#iframe"},(result) => {console.log(result);})   > >获取到iframe的CSS选择器的nodeId,再nodeId=nodeId+1这样就获取跨框架的nodeId

3.通过DOM.querySelector(第2次用)
     例如文件框CSS选择器(#fileInput)   注意这个是重点(跨框架的nodeId)：nodeId=nodeId+1
     chrome.debugger.sendCommand({tabId: tabId}, 'DOM.querySelector',{nodeId: nodeId,selector:"#fileInput"},(result) => {console.log(result);})  >  >  获取到文件框CSS选择器的nodeId

4.通过DOM.setFileInputFiles
      例如设置文件路径["C:/Users/Administrator/Desktop/222.txt"]
      chrome.debugger.sendCommand({tabId: tabId}, "DOM.setFileInputFiles", {nodeId:nodeId,"files":["C:/Users/Administrator/Desktop/222.txt"]})

目的是找到框架(iframe)里文件框css选择器的节点数值==》nodeId
然后使用chrome.debugger.sendCommand({tabId: tabId}, "DOM.setFileInputFiles", {"nodeId":nodeId,"files":["C:/Users/Administrator/Desktop/111.txt"]})设置文件路径

通过DOM.getDocument的参数{"pierce":true,"depth": -1}可以获取全部节点的nodeId,最终就是怎样获取到这个数值

这里采用第二种方式编写，如遇复杂情况可以自行封装函数

async function 上传文件3(e) {
            let { tabId: t, iframeselector: r, fileInputselector: o, files:g } = e
            var n={tabId: t}
            let a= await chrome.debugger.attach(n, "1.3");
            let l = await chrome.debugger.sendCommand(n, "DOM.getDocument", {});
            l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.root.nodeId,"selector":r});
            l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.nodeId+1,"selector":o});
            l = await chrome.debugger.sendCommand(n, "DOM.setFileInputFiles", {"nodeId":l.nodeId,"files":g});
            console.log("测试");
}

//参数说明
tabId:  调试目标
iframeselector:  iframe框架的css选择器
fileInputselector:  文件框的css选择器
files:  需要上传文件的路径数组

//参数示例
{
tabId: 123
iframeselector:"#iframe"
fileInputselector:"#fileInput"
files:["C:/Users/Administrator/Desktop/11.png"]
}

子程序测试可用：
https://getquicker.net/subprogram?id=9ec02e35-a2bf-4a43-bf99-08dda010ea78

参考文档:
https://github.com/Xeo786/Rufaydium-Webdriver/blob/main/CDP.ahk