My Chrome Extension performs a get request which works fine. Because testing is faster with snippets, I want to do the exact same thing in the Chrome Console or in the Chrome Snippets. Minimal example:

fetch(url, {
    method: "GET"
}).then(response => response.text())
  .then(html => console.log(html))
  .catch(error => console.log(error))

Unfortunately, there I only get

TypeError: Failed to fetch for the error and

Failed to load resource: net::ERR_FAILED in Chrome's inline error marker

In my Chrome Extension I ran into a CORS issue so what I did in my AWS Lambda function was to set the headers to

const headers = {
    'Content-Type': 'application/json',
    "Access-Control-Allow-Headers" : "Content-Type",
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Credentials" : true
};

so I suppose CORS isn't the problem here. But I can't seem to figure out as to what differences it could make to have the requests run in the Extension vs. in the console/snippets. What could I be missing here?

I also do not see the request in AWS CloudWatch so I suppose it doesn't even leave my machine. I am testing on a Chrome User that has 0 extensions installed, same happens in incognito

To circle out any issues with my server I have also inserted the examples from

async function testGet() {
    const response = await fetch('')
    console.log(await response.json())
}

async function testPost() {
    let r = await fetch('', {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            lockevn: 1
        }),
    })
    console.log(await r.json())
}


testGet()

testPost()

Chrome's Network tab shows the request as stalled

The linked 'explanation' gives

Queueing: The browser queues requests when:

• There are higher priority requests.

• There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.

• The browser is briefly allocating space in the disk cache

Stalled: The request could be stalled for any of the reasons described in Queueing.

Higher priority seems odd, 6 connections can't be the issue either since I have restarted my browser before testing, and the disk cache issue doesn't sound like the problem either. I'm not macOS with no anti virus

My Chrome Extension performs a get request which works fine. Because testing is faster with snippets, I want to do the exact same thing in the Chrome Console or in the Chrome Snippets. Minimal example:

fetch(url, {
    method: "GET"
}).then(response => response.text())
  .then(html => console.log(html))
  .catch(error => console.log(error))

Unfortunately, there I only get

TypeError: Failed to fetch for the error and

Failed to load resource: net::ERR_FAILED in Chrome's inline error marker

In my Chrome Extension I ran into a CORS issue so what I did in my AWS Lambda function was to set the headers to

const headers = {
    'Content-Type': 'application/json',
    "Access-Control-Allow-Headers" : "Content-Type",
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Credentials" : true
};

so I suppose CORS isn't the problem here. But I can't seem to figure out as to what differences it could make to have the requests run in the Extension vs. in the console/snippets. What could I be missing here?

I also do not see the request in AWS CloudWatch so I suppose it doesn't even leave my machine. I am testing on a Chrome User that has 0 extensions installed, same happens in incognito

To circle out any issues with my server I have also inserted the examples from https://lockevn.medium./snippet-to-fetch-remote-rest-api-and-display-in-console-of-chrome-devtool-6896a7cd6041

async function testGet() {
    const response = await fetch('https://jsonplaceholder.typicode./posts')
    console.log(await response.json())
}

async function testPost() {
    let r = await fetch('https://jsonplaceholder.typicode./posts', {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            lockevn: 1
        }),
    })
    console.log(await r.json())
}


testGet()

testPost()

Chrome's Network tab shows the request as stalled

The linked 'explanation' gives

Queueing: The browser queues requests when:

• There are higher priority requests.

• There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.

• The browser is briefly allocating space in the disk cache

Stalled: The request could be stalled for any of the reasons described in Queueing.

Higher priority seems odd, 6 connections can't be the issue either since I have restarted my browser before testing, and the disk cache issue doesn't sound like the problem either. I'm not macOS with no anti virus

• javascript
• google-chrome-extension
• google-chrome-devtools
• fetch-api

• 1 Where in the extension does your code execute? contentscript or background script? – derpirscher Commented Jun 28, 2021 at 13:23
• 1 one thought ... Content-Type': 'application/json ... vs response => response.text() ... try response => response.json() .. .perhaps ... though, it seems odd (yet unsurprising) that Chrome isn't giving more useful information in the developer console than just an obscure error – Jaromanda X Commented Jun 28, 2021 at 13:27
• 1 Do you see the request in the network tab of the developer tools? – derpirscher Commented Jun 28, 2021 at 13:27
• 2 Are you executing this code in the context of any website or just of an empy tab with no website loaded. Because when I execute this on an empty webpage, I get the same error while it works fine when executed in the context of any website – derpirscher Commented Jun 28, 2021 at 13:37
• 1 @user2161301 - nice! not many people who figure out their own issues bother!!! I for one am intrigued – Jaromanda X Commented Jun 28, 2021 at 13:38

1 Answer 1

I managed to find the issue. In order to avoid potentially privileging my requests by opening the Chrome Developer Console in my AWS dashboard tab, I have created a new tab (chrome://new-tab-page/) and performed the requests in the console. This returned the errors described.

When I have updated my question with the example code I wanted to confirm if it was running before asking someone to try it if it works on their machine. For quick runtime-validation I opened the Console in the Stackoverflow tab and it worked. I only wanted to check if the code can be interpreted but it turned out to actually return a result. The same is valid for my AWS instance, if I run it on a https website it works fine. No idea why this is not documented but "disk cache" is mentioned as a potential error.

tldr don't open Chrome Console in new tab for requests in the console, use any website. This may have to do with CORS headers only working if the request doesn't have empty headers to begin with maybe (?)

I specifically avoided using a website console instance for testing because I wanted to prevent potential cookies on the AWS page from doing something that someone else couldn't do on their machine. Good thinking bad result haha

Thank you so much for your ments suggesting the help, much appreciated.