I have an Electron app where I load external sites into a BrowswerView hosted in a BrowserWindow. Invariably each site has a video player on it using a <video> tag. Normally you can access the DOM using executeJavaScript and do things like this:
document.querySelectorAll('video').forEach(input => { input.pause() })
This would pause all the playing video on the site. Problem is, one particular pesky site loads the video player into an iframe that is in a different sub domain.
Enter CORS. I cannot get to the video container without hitting the dreaded Blocked a frame with origin "https://www.whatever.com" from accessing a cross-origin frame.
Here is my question: In the chrome dev tools you can select the context from a drop down so clearly it is possible to choose the context from the client. As I am running this in Electron I would like to believe that there is a way to switch contexts. I am not looking to run the code cross origin but directly in the frame I just need a way to choose it.
I looked at mainFrame.frames but I don't see how you get to the sub frame's webContents.
Any clues on this?
I basically rubber ducky'd this thing. After typing this up, I figured it out.
I looked at the instance methods again and saw that executeJavascript is one of them so I don't need to get to webContents at all...
So this works and I thought I would share:
view.webContents.mainFrame.frames.forEach(frame => {
const url = new URL(frame.url)
if (url.host === 'sub.whatever.com') {
frame.executeJavaScript('myCodeHere')
}
})
I used the host name in my instance but you could use frame.processId instead.