Read and manipulate ifame's document object model from the parent which is in different domain

Question

I would like to implement a page which can display (embedded) an other page from a completely different domain, which is not under my control. (say www.google.com). The end user fill a url input field in the parent page then the parent page shows the embedded content.

This could be easy so far however, the parent page must have the ability to read and manipulate the embedded page's document. Nothing fancy just highlighting elements. I know this arises serious security concerns. Some of the read data from the child page must be sent to my server (same domain as the parent page)

(Please note despite of the topic, this application would be completely legal commercial service, nothing to do with any gray or black trick or practice)

• Is it possible at all?
• Is it help if the end user installs an extension from me (written for some helper functionality to accomplish the task), and trusts me as the publisher?
• If none of the above helps, is there any way to accomplish the specified task than this iframe idea?

EDIT

(The app should be implemented for Chrome, FF and IE, I've just could not add more tags than 5..)

Answer 1

One option would be moving DOM editing to the back end of the application.

To elaborate, I did a project similar to this a year ago and we also wanted to be able to highlight portions of text on the page. We loaded the HTML to put into the iframe in the back end, used a library that mimics jQuery (in our case, pyquery), and made our modifications to the DOM there. In our case, that was just adding spans around the text to highlight.

The problem with that approach is that you can't predict how any arbitrary website's DOM looks, so the application would be fairly fragile. Even something as simple as dropping span tags around a given set of text could break the page.

Answer 2

It can be accomplished with a Chrome extension. The basic idea would be to inject a content-script in both the parent page and embedded page, which will allow you to interact with the content of the page(s). You would then use a background-page to pass information between the two pages, via the chrome.runtime API.