Embed web browser as component in React app-CodePudding

I'm looking for a way to embed a browser in a React application with the ability to add onclick events on search page selectors. I'm wondering if I could use Electron or NW.js. Does anybody have an idea?

I started with iframes at first, but here's the problem with cross domain. Then I thought about puppeteer and png rendering with positioning, but it's not very intuitive. And recently I found threads about Electron and NW.js

CodePudding user response：

You haven't really explained what you mean by "embed a browser in a React app". A browser is an executable that renders HTML/CSS/JS. React is a JS library that runs in a browser.

I'm not sure what you are trying to do. Maybe embed a different website on the same page? In which case, yes you would use an iframe. There are many security contraints put in place, for good reason.

Electron is a Node.js script that spawns a chromium browser that can communicate with a separate Node process.

NW.js is a modified Chromium browser with Node.js built in.

Both of them are going to have security restrictions similar to a normal browser. NW.js has some additional options you could try (again, not sure what you actually want). But there are still server-side restrictions for CORS that you'd need to deal with no matter what.

I think the real solution here is for you to re-evaluate what your goal is, and then find a better solution to it.