How i load a webpage in a popup chrome extension without iframe and using ajax

Question

Manifiest.json

    {
        "name":"MyExtension",
        "version":"1.0",
        "description":"MyExtension Description.",
        "icons":{"128":"browseraction.png"},
        "browser_action":
                        {
                            "default_icon":"icon.png",
                            "default":"Mi default title",
                            "popup":"popup.html"
                        },
        "permissions":[
        "http://*/*",
        "tabs"
        ]
    }

and this is my popup.html

<html>
    <head>
        <script type="text/javascript">     
            var address = "http://www.google.com";
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = handleStateChange; 
            xhr.open("GET", chrome.extension.getURL(address), true);//This dont work
           //xhr.open("GET", chrome.extension.getURL('/popup1.html'), true);//thisWork
           xhr.send();
           function handleStateChange()
           {
               if (xhr.readyState == 4) 
               {
            
                  alert(xhr.responseText);
               }
               else
               {
                  alert('Not Yet');
               }
           }
        </script>
    </head>
    <body>

    </body>
</html>

I just want display the html code, with alert I read,http://code.google.com/chrome/extensions/xhr.html , and other resource but just dont work Thank in advance

`var address = "http:"http://www.google.com";` looks like bad syntax. — Alexander Pavlov, Mar 06 '12 at 14:04
When you say that line doesn't work, what do you mean? Do you see any errors in your JS console? — Jason Hall, Mar 06 '12 at 14:10
@AlexanderPavlov, it's not bad syntax. Im trying to fix well the formatting but, my conection suck and was for that. — Pepita, Mar 06 '12 at 14:16
@JasonHall when i say that line work's is that i can get the html code. The 2nd line is a local file and work's perfectly, but the first, is not local. And I dont know why dont work (xhr.responseText dont have the html code of google page) — Pepita, Mar 06 '12 at 14:19
Sounds like a same origin policy problem then. Unless the server supports CORS the browser won't let you make XHR requests to other domains, for security reasons. There are ways around this, though: http://en.wikipedia.org/wiki/Same_origin_policy#Workarounds — Jason Hall, Mar 06 '12 at 14:34

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

Your code does not work, because chrome.extension.getURL does not work as you expect. For a given string, it attempts to resolve the URL to a local file in the chrome extension.

When http://www.google.com/ is given as input, www.google.com is returned. The XHR request does not complete because the URI is invalid (the protocol [and path] is missing). Also, both the (browser action) popup and Content scripts are restricted by the cross-origin policy.

To create cross-domain XHR requests, you have to incorporate a Background page and add the URI in manifest.json, at permissions file.

A full demo is available in this answer:

Cross-domain XMLHttpRequest using background pages

edited May 23 '17 at 12:00

Community

1
1

answered Mar 06 '12 at 15:38

Rob W

341,306
83
791
678

Im very new with this stuff, Im going read all about Backgrund page, and the demo. And later im comment you how goes. Thanks for all. I just have a doubt, I think that i dont need put other URI, in my manifest.json, because i put "http://*/*" at permition. Thanks again – Pepita Mar 06 '12 at 17:13
2

@Pepita That's right (in your case). I added it for others. Future visitors may stumble upon this answer, and use it as a guideline for their own problem. (also: when this answer solves your problem, don't forget to [mark it as Accepted](http://meta.stackexchange.com/a/5235/169101?how-does-accepting-an-answer-work), so that others can see that the solution *works*.) – Rob W Mar 06 '12 at 17:34
if I undesrtood well, if i made exactly the same code that i have in popup.html and put them in background.html, i have a correct answer. This mean that when i load the extension and the backgroung start run, i can have a alert with the contain. But i have a responseText empty. So, i gonna have the same result if i make the Demo. In fact i have the same result :( . – Pepita Mar 06 '12 at 18:31
@Pepita I have updated and tested that answer. It should now work as intended. – Rob W Mar 06 '12 at 18:55
thanks for your atention. I make exactaly like you do in your demo, and works when I make a GET, but when I make a post dont work. And other thing is when i try make GET to http://www.google.com doesnt work, nothing. the responseText is empty. Lucky me, the GET works in my site, and i can continue with my extension. But doesnt Work in google.com, and the post doest work to me. Thanks a lot, and thanks a lot for your time. And Yes your answer is correct for my Question. And google must be something they protect or something like that. Thanks again :) – Pepita Mar 06 '12 at 23:16

How i load a webpage in a popup chrome extension without iframe and using ajax

1 Answers1

Linked