load external site and change its visualization

Question

I'm trying to create a web page able to change a site visualization (.css or / and .js) in order to recreate the same live change capability offred by Firebug for Firefox or the Inspector of Chrome.

Here an image to better explain my task:

I have been able to visualize the other site inside my page using the iframe, but unfortunately it is not possible to change its visualization and access its elements due to the "same origin policy".

Is there a way to do this using the iframe or loading the external site inside another element?

---

Update:

Considering the answers the options should be:

• create a php proxy page to load the target site and change visualization on it.
• create a browser extention.

I've tried the first, even if it requires to install a web server (xampp), with a simple page calling the function file_get_contents('http://www.site.com');
The page is loaded but unfortunately missed some elements (like images) and it is only a static copy;
it is not possible to go further in the site navigation.

---

Update 2:

Load the entire page via javascript could be the better solution (I don't konw how) if it is possible to live change the code but what about the possibility to interact with this "page copy" and transfer the interaction to the original one?

Scheme:

---

Explanation:

I've noticed Firebug extention can select and live edit any page element, even if they belong to the iframe which loads an external domain page.
What I'm looking for is a way to act like Firebug, get an element and change its style.
I'm trying to load the site into the iframe beacuse I wanted to create a toolbar above it to select my "visualization styles"; for example a button to makes titles bigger and red.
Anyway I'm open to any other methods suggestions.

---

Update 3:

I have found an extention for both FireFox and Chrome which is really close to my aim: "Stylish"
This add on allows to live change any site css proprerty and save it in order to reload them every time you'll visit the page.

Now my question is: How can I do the same creating a dedicated page to load and change visualization of a specific site?

---

FINAL EDIT:

In order to continue this question with a more relevant arguments I decided to ask a new one:
create a php proxy page

Answer 1

No. Your solutions may be

• to let your own site act as proxy so the same origin policy isn't triggered
• to build an extension, which will be browser dependent (Firefox or Chrome) and which will require authorization and installation

Answer 2

I'm not sure if I understand what you want very well, but my feeling to ''trick'' this easier would probably to give very specific height and width to your first site (the iframe) and do a jQuery condition

    If ($('body').width() == 500 && $('body').height() == 400 {
      $('body').addClass('isiFrame');
    }

Then, you only have to do your css .isiFrame .myCoolDivs {....} You might have to use it on a document ready also, but that could be one way to trick it and since you're not doing it on resize (exepect if somebody's having his screen at this exact width and height at start)

The safer way would probably to create a master session using PHP but I cannot give you an example since it've been to long and echo the body class if the master_session or variable is equal to true

Hope it helped!