FoxyWeb Requests: Utilizing XMLHttpRequest in Firefox Extensions

While I've come across plenty of examples on how to create xhr requests from Firefox Add-ons, I'm currently exploring the new WebExtensions framework (where require and Components are undefined) and facing an issue with sending a simple XmlHttpRequest from within the extension.

It's important to mention that the ajax request is directed towards a completely different URL, however, the host has CORs enabled to allow all origins.

As soon as .send() method is triggered, I encounter the following error:

[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: resource://gre/modules/ExtensionContent.jsm -> moz-extension://9ca18411-9a95-4fda-8184-9dcd3448a41a/myapp.js :: GM_xmlhttpRequest :: line 162" data: no]"1 whatsapp.js:166:9

The snippet of code in question is:

function GM_xmlhttpRequest(orders) {
  try {
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function(a1, a2, a3) {
      console.log('xhr.load: %s, %s, %s', a1, a2, a3);
    });

    // open synchronously
    oReq.open(orders.method, orders.url, false);

    // headers
    for (var key in orders.headers) {
      oReq.setRequestHeader(key, orders.headers[key]);
    }

    // send
    var res = oReq.send(orders.data);
    console.log('xhr result: %s', res);
  } catch(e) {
    debugger;
    console.warn('could not send ajax request %s to %s, reason %s', orders.method, orders.url, e.toString());
  }
}

I have granted webRequest permissions in my manifest.json file. Although I understand this may not be the root cause, I am struggling to pinpoint what is hindering the ajax request. Any insights or suggestions?

{
  "manifest_version": 2,
  "name": "MyApp",
  "version": "1.0",
  "description": "TestXHR",
  "icons": {
       "48": "icons/myapp-48.png"
  },
  "applications": {
      "gecko": {
      "id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cbd7deccfd9caddf8ced1dfd1d4d9d6ccd9c8c8cb96dbd7d5">[email protected]</a>",
      "strict_min_version": "45.0"
  }
  },
  "content_scripts": [
    {
      "matches": ["*://web.myapp.com/*"],
      "js": ["myapp.js"]
    }
  ],  
  "permissions": [
    "https://thehost.all-xhr-sent-here.net/*",
    "webRequest"
    ]
  }

Answer №1

Issue resolved by adjusting the permissions URL settings. By changing the sub domain and protocol to asterisks, the problem was successfully resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method by which AngularJS identifies the appropriate property within a return value

In Angular, watchers are utilized to identify property changes and trigger a listener function. An example of a watcher declaration is shown below: $scope.food = "chicken"; scope.$watch( function() { return food; }, function(newValue, oldValue) { ...

Obtaining information from the HttpServletResponse through an AJAX form

In my "first.jsp", there is a form containing hidden input values and pointing to another jsp file. <form id="popupForm" name="popupForm" action="<%= cqRequest.externalizeHref(handle) %>" method="post"> <input type= ...

What is the best way to add numerous images to a Laravel platform via ajax using pure javascript?

I am currently working on a form where users can upload one or more photos to the server using ajax. Sometimes, users may not upload any photos at all. How can I efficiently send the data from the file input to the server in the background? Below is the r ...

Sending a File Object and Data to an MVC 6 Controller in ASP.NET 5 using JavaScript

I have been working with an Ajax function that is supposed to handle file upload, but I am encountering some issues. Despite dragging and dropping the file, nothing seems to happen with the Ajax. Upon inspecting the properties on the page, I can see that t ...

How can I implement callback functions in joi validation?

Exploring the World of Coding I came across a code snippet online that caught my attention, but upon closer inspection, I realized it used Hapi/Joi which is now considered outdated. My question is how can I modify this code to work with Joi? app.post(&apo ...

jquery selector to target an element nested inside an anchor tag

Is there a way to use a Jquery selector to extract the text content within the 'name' attribute? <a href="page1.php" id='title' name="<?php echo $res['id'];?>" title="<?php echo $res['title'];?>" < ...

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

Concealing a Div on Click Outside of Child Div in ReactJS

I have a parent div with a child div in the center. I am trying to figure out how to close the parent div only when clicking outside of the child div. My current code is structured like this, using triggerParentUpdate to control whether the div should be d ...

Issue with CoffeeScript and three.js: scene not defined

I've been troubleshooting this issue for hours, but I can't seem to figure out the error... Here's the error message I'm getting: Cannot read property 'add' of undefined Below is my coffeescript code file (hopefully it&apos ...

Trouble with passing AJAX calls from JavaScript object to PHP

I've encountered an issue while trying to extract information from a form and send it via AJAX to a PHP file for storing in a CSV file. Surprisingly, the PHP file is receiving the JavaScript object with empty fields even though they appear filled in t ...

Using space as a separator for thousands when formatting integers

In an attempt to change the appearance of 1000 to resemble 10 000, I found numerous examples online on how to add a separator such as a comma or some StringLocal. However, I am looking for a way to use a space instead. Can anyone advise me on which locale ...

Locate the highest and lowest values within a .json file

When working on a graph using d3.js, one key step is setting up the scales for the axis. The data for the graph is stored in a Json file with multiple arrays, each representing different regions and years: [{ "id" : "AustraliaNewZealand" , "year" ...

To convert an image file into a string, use JSON.stringify before including it in an AJAX request

Is it possible to send image files contained within JSON objects in an array via an AJAX call using JSON.stringify? When attempting to send the data through an AJAX call, and utilizing JSON.stringify with an array containing JSON objects that have image f ...

Execute sequential animations on numerous elements without using timeouts

I'm currently working on developing a code learning application that allows users to write code for creating games and animations, similar to scratch but not block-based. I've provided users with a set of commands that they can use in any order t ...

Creating one div to initiate the contents to fadeToggle and another div to cease the fadeToggle animation utilizing the setInterval function in JavaScript

Here is the link to my Fiddle: http://jsfiddle.net/tmanundercover/62ap2/ CSS #targetedDiv, #otherDiv { border: 1px solid; } HTML <div id="targetedDiv">&nbsp<span id="fakeCursor">|</span></div> <br> <div id="othe ...

Executing a node.js function within an Angular 2 application

Currently, I am running an Angular2 application on http://localhost:4200/. Within this app, I am attempting to call a function located in a separate node.js application that is running on http://localhost:3000/. This is the function call from my Angular2 ...

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

Animating a Bootstrap 4 card to the center of the screen

I am attempting to achieve the following effect: Display a grid of bootstrap 4 cards Upon clicking a button within a card, animate it by rotating 180 degrees, adjusting its height/width from 400px - 350px to the entire screen, and positioning it at the c ...

The Enigma of AngularJS Coding

Check out this code snippet. $scope.$watch('year', reloadData); $scope.$watch('month', reloadData); $scope.year = 2017; $scope.month = 1; var reloadData = function() { /* Refresh Data */ } var init = function() { $scope.year ...

Operating with JavaScript arrays and objects

My JavaScript array/object consists of the following data: [ { "name": "A", "selected_color": "Red" }, { "name": "B", "selected_color": "Green" }, { ...