6

I'm trying to get JavaScript (with Greasemonkey) to pull data from my own site to customize another site. The code I'm using is as follows:

function getURL(url, func)
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onload = function (e) 
  {
    if (xhr.readyState == 4) 
    {
      if (xhr.status == 200) 
      {
        func(xhr.responseText, url);
      } 
      else
      {
        alert(xhr.statusText, 0);
      }
    }
  };
  xhr.onerror = function (e)
  {
    alert("getURL Error: "+ xhr.statusText); // picks up error here
  };
  xhr.send(null);  
}

The above works perfectly fine, it gets the text from the URL and returns it to the anonymous function that I pass into the function, as long as the file is on the same domain as the page I'm calling it from. However, if the domain is different then the onerror gets triggered.

How can I sort it out so I can pull in data from a different domain in this set up?

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Jason Lang
  • 1,079
  • 9
  • 17
  • 1
    is the code you posted in greasemonkey script? if so, you need to use greasemonkeys XHR - https://wiki.greasespot.net/GM_xmlhttpRequest – Jaromanda X Mar 04 '17 at 04:07
  • 1
    side note: you should probably look at porting your code to a `web extension` - because I don't think greasemonkey will survive Firefox 57 - the developers are not really keen on porting greasemonkey to a web extension - they had heaps of issues with recent `e10s` compatibility, and I think after 10 years, they've had enough :p – Jaromanda X Mar 04 '17 at 04:42
  • 1
    @JaromandaX, even if the *current* lead dev drops the ball (more/again), others will no doubt pick it up. Also Tampermonkey on Firefox is an increasingly viable option. – Brock Adams Mar 04 '17 at 05:13
  • of course! Tampermonkey - thanks for the heads up @BrockAdams – Jaromanda X Mar 04 '17 at 05:28
  • Thanks guys, this was a help. Actually since I control the domain I'm pulling data from I was able to fix things by editing the data I'm sending with a different CORS header on my page. Someone mentioned that but edited it out. Still, it's very handy to know about the GM extensions for cases where I'm not controlling the data. https://spring.io/understanding/CORS – Jason Lang Mar 04 '17 at 07:01

1 Answers1

20

Greasemonkey (and Tampermonkey) has built-in support for cross-domain AJAX. Use the GM_xmlhttpRequest function.

Here's a complete userscript that illustrates the process:

// ==UserScript==
// @name        _Starter AJAX request in GM, TM, etc.
// @match       *://YOUR_SERVER.COM/YOUR_PATH/*
// @grant       GM_xmlhttpRequest
// @connect     targetdomain1.com
// ==/UserScript==

GM_xmlhttpRequest ( {
    method:     'GET',
    url:        'http://targetdomain1.com/some_page.htm',
    onload:     function (responseDetails) {
                    // DO ALL RESPONSE PROCESSING HERE...
                    console.log (
                        "GM_xmlhttpRequest() response is:\n",
                        responseDetails.responseText.substring (0, 80) + '...'
                    );
                }
} );

You should also get in the habit of using the @connect directive -- even though it's not strictly required for Greasemonkey on Firefox, yet.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295