Need help using fetch() within a chrome extension.

JavaScript
#1

Hi all, I need some help with a chrome extension I am working on.

In the following function I am attempting to make an API request and then pass the response into a function that replaces HTML elements with the API response on a certain website. I know the API call returns the correct data because I tested that before attempting to return the data in the fetchAndReplace() function. I also know the fetchAndReplace() function correctly changes HTML elements when values are hardcoded in.
https://showbox.tools/
However when trying to combine the two, nothing happens on the website I am trying to affect. I have no idea why since both work independently. Could it be that the page loads before the request can be completed and therefore the return function is never executed? Any help is appreciated.

async function makeRequest() {
  try {
    const response = await fetch('PERSONAL_API_KEY');
    const json = await response.json()
    return fetchAndReplace(json);
   } catch (err) {
      return console.log(err);
  }
}
#2

Hi @atsushi

Welcome to FCC.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

#3

It is hard to tell what is causing the problem unless you show us the entire code for the web extension if possible so we can take a look at it.

My guess is that you could be having a problem with your manifest.json file. Probably you need to host the project on GitHub and we take a look at it.