1

I want to create an extension for chrome that is near to the GmailChecker. I've seen its source code but hek, it's a bit complex. It seem to use some AJAX.

I've try to use jQuery, but it doesen't work in this case (can't access to website hosted on an other server... and as this is an extension for chrome, the script can't be executed from the same server).

By the way I'm not sure what I want to do is possible with it. I don't really know chrome extension well yet, so I need your help.

I want to proceed like that : In the background page, at regular intervals, load a page using cookies-session (for browsing into a website with login system). Then getting the source code of the loaded page, and doing some stuff then (like said to the user if he has message, but meh, this is not the topic nor the problem I think).

So I need at least :

  • Make queries with cookies and session
  • Access to the source code of web-hosted page
  • Doing all of this thing in the background page (hidden and separated of the user's browsing).

Can I do this things with an Chrome Extension (and if yes, can you give me some function or tip to do it) ?

Thank you !!

Manifest :

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1",
  "description": "Yeah, cool ext",
  "browser_action": {
    "default_popup": "file.html"
  },
  "permissions": ["tabs",
  "background",
  "*://*.google.com/"],
  "background": {
    "page": "background.html"
  }
}

background.html :

<!DOCTYPE html>
<html>
<head>
</head>

<body>
    <script src='script.js'></script>
</body>
</html>

script.js :

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    console.log(xhr.responseText);   //that's the source code
};
xhr.open("GET", "http://www.google.com", true);
xhr.send();
FitzFish
  • 8,557
  • 2
  • 30
  • 39

1 Answers1

3

Yea you can do those with a simple AJAX call:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    xhr.readyState == 4 && console.log(xhr.responseText);//that's the source code
};
xhr.open("GET", "http://www.google.com", true);
xhr.send();

Or in jQuery:

$.get("http://www.google.com/", function(data){
    console.log(data);
});

Since this is an extension, if you have correctly declared the sites you need access to in the manifest, you can perform a direct request to another site without they having cross origin resource sharing enabled. You do not need a server in the middle to perform the request for you and ajax your server to get the result back. This does not require JSONP.

Google has a page on cross-domain requests in extensions. You can read more here: https://developer.chrome.com/extensions/xhr#requesting-permission

By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • Well, thank your for your interest, but as when I've try to use jQuery, I have this error thread : – FitzFish Apr 19 '14 at 23:06
  • XMLHttpRequest cannot load http://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://fobbdkffheanndhelchfelmaaekfnobo' is therefore not allowed access. – FitzFish Apr 19 '14 at 23:07
  • 1
    @Yojin - Make sure you have added the permission to access `google.com`. – Derek 朕會功夫 Apr 19 '14 at 23:07
  • Yes. You can read more [here](https://developer.chrome.com/extensions/declare_permissions) but basically you just need to add `"permissions": ["*://*.google.com/*/]`. – Derek 朕會功夫 Apr 19 '14 at 23:09
  • Hey, well, I've speak a bit fast... It still doesen't work (same error message). I've edit my question to add my manifest code. – FitzFish Apr 19 '14 at 23:30
  • This is incorrect. You cannot perform a direct request to another site unless THEY have cross origin resource sharing enabled. You need a server in the middle to perform the request for you, then you can ajax your server to get the result back. This is not possible without JSONP. – Ohgodwhy Apr 19 '14 at 23:36
  • That's what I thought. I've hope because of that was integrated to a browser that can be possible. Are you sure there is no way to do this without a middle serveur (quite problematic for an extension) ? – FitzFish Apr 19 '14 at 23:41
  • 1
    @Ohgodwhy - You are wrong. Since this is an extension, the background page has direct access to every address you declared in the manifest. – Derek 朕會功夫 Apr 20 '14 at 00:10
  • 1
    @Yojin - This is an extension for Chrome, right? As a prove, here is a screenshot: http://i.stack.imgur.com/hKGuV.png – Derek 朕會功夫 Apr 20 '14 at 00:13
  • @Ohgodwhy - Same-origin Policy does not apply to Chrome extensions (with sites declared). Get your facts right. – Derek 朕會功夫 Apr 20 '14 at 00:16
  • My inside feeling hurts whenever I see incorrect information flowing on StackOverflow. – Derek 朕會功夫 Apr 20 '14 at 00:19
  • 1
    Whoever downvoted, please comment. This answer is correct... (Obviously), you have to reload the extension before the manifest changes take effect. – Rob W Apr 20 '14 at 08:06
  • Yeah, i've reloaded it, but it still fail. I've try to packing it as I read on this thread : http://stackoverflow.com/questions/9421933/cross-origin-xmlhttprequest-in-chrome-extensions But then, i've the same issue. – FitzFish Apr 20 '14 at 10:37
  • @Yojin - There is no such thing as packaged extension. – Derek 朕會功夫 Apr 20 '14 at 17:30
  • Arh... So I really don't understand what's wrong ! I've edit to show my full code... Hu, hm, I'm feeling stupid. – FitzFish Apr 20 '14 at 18:11
  • @Yojin - Um.. [I tested your code](http://i.stack.imgur.com/1yUQO.png) and it works fine with no error. – Derek 朕會功夫 Apr 20 '14 at 19:38