I would like to show a web page from another website and show it on my website. I want to annotate some text on their website content.
Conceptually I know what needs to be done:
- I will capture their web page's html and probably the css and js files and put them in a folder on my web server. I will keep the images url pointing to them so I don't have to download all of them.
- I will modify the html of their web page which I have a copy of and add what I need to do. For example, highlight some text and display it. Probably do this in an iframe.
I know some sites download assets asynchronously after the initial html has loaded which complicated things.
The capturing part and injecting my js code should not be hard. I am soliciting ideas on how to display another site's page on my page while their page displays properly on mine as if I am on their site and trying the save the minimal amount of their assets whatever they are, on my server.
The image below shows what I want to do. The user is on mypage.com which is my site. The box is showing a web page from another site reconstructed by me showing the same content with some additions. I colored some of their text in red to put focus on that text and explain something to the user.
Any ideas on how to do this beside of what I mentioned? Any software or libraries which do some of this work? The backend is in C#.