2

I want my web extension to make an AJAX call to the website which the user is currently looking at. I know that the current website has an endpoint available at /foo/bar?query=.

Is there anything blocking me from using the fetch API or an XMLHttpRequest to contact this endpoint?

My attempts to use these methods just tell me that a server error has occurred, and nothing comes up in the network tab while I'm trying to debug my extension. I feel like there should be a WebExtensions API for this task, but I can't find one.

Forivin
  • 14,780
  • 27
  • 106
  • 199
harvzor
  • 2,832
  • 1
  • 22
  • 40
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Jul 07 '17 at 10:25

1 Answers1

3

You can get an object describing the current tab the user is looking at using browser.tabs.getCurrent(). This object has a property url, which you can then use to make an XMLHttpRequest.

browser.tabs.getCurrent().then(currentTab => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", currentTab.url);
    // ...
});

Edit:
As pointed out by Makyen, tabs.currentTab is not actually what you want. Instead tabs.query with active: true should be used. Something like that should work:

browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
    let currentTab = tabs[0];
    let xhr = new XMLHttpRequest();
    xhr.open("GET", currentTab.url);
    // ...
})

In order to make cross origin requests, you will need to get permission in your manifest.json file:

{
  ...
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  ...
}

<all_urls>for instance will allow you to make http requests to any url.

You can read more here.

Forivin
  • 14,780
  • 27
  • 106
  • 199
  • Have you tested this code? Whenever I try to make an XMLHttpRequest, I just seem to get an error. – harvzor Jul 05 '17 at 09:15
  • 1
    I haven't tested it. It should work, though. What is the error message that you get? Have you set the required permissions in your manifest.json? – Forivin Jul 05 '17 at 11:02
  • 1
    [`tabs.getCurrent()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/getCurrent) gets the current tab in which the code is running. In most circumstances will *not* be the URL of the page the user is looking at, unless they are viewing your extensions options page, or other HTML page sourced from within the extension. If you want the active tab of the current window use `chrome.tabs.query({active: true, currentWindow: true},callback)`. – Makyen Jul 07 '17 at 10:35
  • Okay I've tested and the issue is that you can't make a request to the current page: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com. (Reason: CORS header 'Access-Control-Allow-Origin' missing).` I was kinda hoping extensions would be allowed around this. – harvzor Jul 07 '17 at 20:12
  • I found the solution! Looks like it works as long as you get permission. Thanks everyone! – harvzor Jul 07 '17 at 20:22