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

Angular with D3 - Semi-Circle Graph Color Order

Can someone assist me with setting chart colors? I am currently using d3.js in angular to create a half pie chart. I would like to divide it into 3 portions, each represented by a different color. The goal is to assign 3 specific colors to certain ranges. ...

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

Trying to set the open prop of the MUIDrawer component to true on user click is causing an error stating "Unexpected keyword 'true'" import React, { useState } from "react"; import { withRouter } from "react-router-dom"; impo ...

Encountering an error with Gatsby while running the development environment due to issues with antd and less configuration (NPM

Encountering issues with the development server in local after installing antd, less, less-loader, gatsby-plugin-less, and gatsby-plugin-antd Versions: "gatsby-plugin-less": "^6.20.0", "less": "^2.7.1", "less- ...

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

Manipulating viewport settings to simulate smaller screens on a desktop device

I am working with a parent container that contains Bootstrap div.row elements holding div.col-... child elements. I am using jQuery to adjust the width and height of the container dynamically to replicate mobile device sizes for users to preview different ...

Is there a way to dynamically add or modify a JavaScript timestamp component after the webpage has finished loading?

Context: Utilizing the SailsJS framework to showcase the timestamp of data model updates. The framework, originating from 'parasails', leverages Vue.js and offers the <js-timestamp :at="1573487792252"> component to display elapsed time like ...

Sharing details of html elements using ng-click (AngularJS)

I am currently exploring options to enable users to click on a "open in new tab" link, which would essentially transfer that HTML element into a fresh window for their convenience. I am seeking advice on how to achieve this. At the moment, I am able to la ...

What is the best way to execute a function in JavaScript and have it return the output as an image

I have created a special function that selects the image source based on a given criterion: function facilityImg(arr, x) { switch (arr[x]) { case 'Yes': return "Images/checked.png"; case 'No': ...

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

Ways to avoid route change triggered by an asynchronous function

Within my Next.js application, I have a function for uploading files that includes the then and catch functions. export const uploadDocument = async (url: UploadURLs, file: File) => { const formData = new FormData(); formData.append("file" ...

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

Chokidar operates smoothly from the command line, but fails to function properly when invoked through the use of 'npm run'

I've implemented a script that monitors Tailwind CSS files using Chokidar. The script works perfectly when I execute the command in the CLI using chokidar 'tailwind.config.js' --initial=true -c 'npm run build-tailwind'. It successf ...

Save the output of a knex query to a variable

I'm struggling to assign the result of a select query using Knexjs to a variable. Here is my code: function getAllCategories() { let categories; categories = database.from("categories").select("category").then(function (rows) { for (let row of ro ...

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

ASP.NET MVC: Issue with displaying image list using AJAX call

I'm facing an issue where my images list is not displaying when I call images with an AJAX request. The code works perfectly on page load, but it doesn't display any images on AJAX call. Here is my code: The view markup is: <script> $( ...

Discovering an item within an array of objects using the find method in Ajax

Within my backend PHP code, I iteratively define the following: foreach ( $data as $res ){ $approved[ ] = [ 'id' => $count, 'title' => "some title" ]; $count++;$title=... ) This eventually leads to the creation ...

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

Filter array to only include the most recent items with unique names (javascript)

I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...

Strategies for Mitigating Duplicate Requests in AngularJs with just one click

I am facing an issue with my AngularJS application where clicking on a link triggers the API call twice. I'm not sure why this happens and how to fix it. My service: SomethingService function getData() { return apiSettings.getApiInformation().t ...

Sending data using formData across multiple levels of a model in Angular

I have a model that I need to fill with data and send it to the server : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode ...