Fetch failing for Post request for Chrome Extension

Question

Currently I am trying to make a post request for my chrome extension and I keep getting Fetch Failed as the response in the console.

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tube Hunt: Community Curated YouTube Recommendations</title>
    <script src="popup.js"></script>
  </head>
  <body style="width: 15rem; height: 15rem">
    <div class="container-fluid" style="padding: 10px">
      <a
        href="https://www.reddit.com/r/TubeHunt/"
        target="_blank"
        class="badge badge-secondary"
        >/r/TubeHunt</a
      >
      <form
        name="inputForm"
        action="https://us-central1-tube-hunt.cloudfunctions.net/app/api/channel/submit"
        method="POST"
      >
        <input
          id="url"
          value="https://www.youtube.com/c/PickUpLimes"
          name="url"
        />
        <button type="submit" id="newDetails">Submit</button>
      </form>
      <button type="button" id="getChannels">Get Channels</button>
    </div>
  </body>
</html>

popup.js

btn.addEventListener("click", function (e) {
      e.preventDefault();
      if (url.value) {
        console.log(url.value);
        let data = new FormData();
        const myHeaders = new Headers({
          Accept:"application/json, application/xml, text/plain, text/html
        });
        const baseURL ="myurl";
        data.append("url", `${url.value}`);
        fetch(baseURL, {
          headers: myHeaders,
          method: "POST",
          body: data,
          mode: 'cors'
        })
          .then((res) => {
            console.log(res)
            return res.text()
          })
          .then((html) => console.log(html))
          .catch(function (err) {
            console.log("Problem");
            console.log(err);
          });
      }
    });

As requested, here is the manifest.json. As you can see, I added the permissions for my server here.

{
    "manifest_version": 2,
    "name": "Tube Hunt",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": [
                "https://www.youtube.com/*"
            ],
            "js": [
                "jquery.min.js",
                "content.js",
                "background.js"
            ]
        }
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "browser_action": {
        "default_icon": "download.png",
        "default_popup": "popup.html"
    },
    "permissions":[
        "https://us-central1-tube-hunt.cloudfunctions.net/app/api/*"
    ]
}

At the moment, I am able to reach my server but am getting a 500 error code from it. I am able to perform a GET request successfully, just not at POST request. In addition to my research, I have also found this link for fetching which isn't helping much.

Questions about extensions should usually include manifest.json. To make network requests you need to add the url to `permissions` in manifest.json, see https://developer.chrome.com/extensions/xhr — wOxxOm, Sep 17 '20 at 09:22
Note that your code is [currently bugged](https://stackoverflow.com/a/45754958/): you need to remove `{` and `;}` around `res.text()` — wOxxOm, Sep 17 '20 at 09:23
@wOxxOm I have added the url to the permissions and reloaded the extension but it still does not work at the moment. I keep getting a `500` error — pythonNovice, Sep 17 '20 at 18:50
Remove Content-Type header and fix res.text() as suggested above. — wOxxOm, Sep 17 '20 at 18:51
So now I am able to get a response in the server at both the `res.text()` and `console.log(html)` but am still getting an error `500`. When I check the `res` body, in the headers it says that there is an Exception `TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (:1:142)` — pythonNovice, Sep 17 '20 at 18:59
Does this mean that this is a problem with my server? I have already made calls previously with Postman and the POST requests worked — pythonNovice, Sep 17 '20 at 18:59
The callee error is irrelevant. Show your `permissions` from manifest.json. Also show how your popup.js is declared and loaded. So far it sounds like you're loading it as a content script, which is wrong. — wOxxOm, Sep 17 '20 at 19:05
Okay I will show my edited code in the post with the manifest.json — pythonNovice, Sep 17 '20 at 19:08

score 0 · Answer 1 · answered Sep 17 '20 at 19:24

Finally have it solved! Thanks @wOxxOm for all your help.

Turns out the I kept getting a 500 error because I completely forgot that my partner setting up the server/database set it so that there cannot be the same body content for a specific channel. Other than that, the code above worked for me. Thanks for all your help!

Fetch failing for Post request for Chrome Extension

1 Answers1