Search code examples
c++webimgui

Is there a way to embed a web browser inside of an ImGui Window?


Question:

Hello, I am looking for a way to embed a web browser inside of an ImGui Window, kind of like a button or text control.

Is there a library, hacky workaround or something of that sort, that I could use without switching to a different UI library (because some features in the project still have regular imgui). The best solution would be if I could also control the website or at least read what the console outputs/execute a function in C++ when something in js (ex. button press) happens.

As said I wouldn't like to switch the library, but I know that it is very unlikely that something like this exists, as it is very specific and not in any way the best approach to a webbrowser inside of an app.


Desperate Rambling and Life Story:

It's kind of like if ImGui and Electron had a child. Frankenstein like project.
I planned to use Electron for this, but quickly realised that porting the C++ code isn't the ideal thing to do, especially with the size of the project + the speed and low level access I would loose when porting to Electron aren't worth it.

It is going to be Windows and only Windows I am dealing with, so I am desperate enough to result to embedding Internet Explorer if necessary. However WebKit, Firefox or Chromium would be best suited.

Kind Regards fellow coders!


Solution

  • Since you also are willing to accept a "hacky" approach to this, you can in programmer terms "borrow" some code from this repository which is a full CEF (Chromium Embedded Framework) implementation inside of ImGui. Found this while browsing the issues of Ocornut's ImGui.

    Comment and repo on GitHub by hendradarwin

    It is a bit old, since work on it stopped in 2020, however it is relatively new compared to other solutions, so you can easily implement this without too much hassle. If your C++ skills are good enough, you could even update it on par with CEF, although not really neccessary since most features should be supported.

    Please keep in mind that this is not the best approach to this problem, the best would be to migrate to a UI library that has native controls (as mentioned Qt or GTK). However I understand that migration is never easy, so I hope your journey with ImGui goes well.

    If you do decide to update it, please also contribute your work, either to the repo directly or just publish your updated fork. Hope this helps all others looking for a solution to this intricate problem.

    Edit: I am unsure if you can "control" the browser but I believe you can execute javascript and get a value from any variable. It depends on what you really need, I don't know about console output either, however it should all be documented in the CEF Documentation.