JavaScript, Async/Await issue chrome extension, executing out of order

Question

I am trying to make a chrome extension for opening lists of urls. I want the option of saving the list in bookmarks under a folder called extension_hook in my bookmarks bar.

The button saveToBookmarks reads a input field and scans folders inside extension_hook inside and if it matches the input it is supposed to get the create a folder with the name of Date(), and then get the id of that folder. something like

await createFolder(parent, val)
let id = await getId(parent, val)

However I am new to js and don't quite understand the async/await. I've bluffed my way through this far, but now I'm stuck. It seems like it tries to get the Id before creating the folder even though I am trying to await it.

If you are interested in testing it out, you can create a bookmarks folder called extension_hook and put another folder inside called {NAME}.

git clone https://github.com/CatInAHatIsBack/Bookmarks_Opener_ext.git

then go to chrome://extensions/ , then load unpacked navigate to your download

to recreate my mistake type {NAME} into the input field, then press the button.

saveToBookmarks.addEventListener("click", () => {
      let val = projectName.value
      checkForExisting(val)
      console.log("projectName.value : " + val)
    });

async function checkForExisting(val){
  /**
   *  scan all bookmarks
   *  those who have children are folders
   *  if folder name matches the current extension hook name make a folder inside with date and tome as name
   *  else create folder with specified name 
   */

   let len = hook.children.length
   console.log("hook has x children: " + len)
   let par
   // checks if hook exists
   for (var i =0; i < len; i++) {
    let hookId = hook.id
    if(hook.children[i].title === val){
      console.log("match: " + val)
      // insert txt
      par = i
    }
   }
   // found hook with same name
   // inserts urls into folder with 
   if(par){
    console.log("hook.children[par]: "+ hook.children[par].title)
    // root
    let parents = await urlsAndFolder(hook.children[par])
    console.log("parents returned: "+parents[0])
    await insertUrls(parents[0], parents[1])
   }
   else{
     // not relevant
   }

async function urlsAndFolder(parent){
  let urls = await txtArea.value.split(URL_LINE_SPLIT_REGEX);
  let time = await getTime() 
  console.log('time is: ' + time)
  await createFolder(parent, time)
  let newCreatedFolder = await getId(parent, time)
  console.log("newCreatedFolder is: "+newCreatedFolder)
  return { newCreatedFolder, urls }
}

async function insertUrls(parent, urls){
  for (let i = 0; i < urls.length; i++) {
    await createFile(parent, urls[i])
  }  
}

async function getId(parent, val) {
  let newCreatedFolder
  for (let i = 0; i < parent.children.length; i++) {
    console.log(`parent.children[${i}].title is ${parent.children[i].title} and val is ${val}`)
    if(parent.children[i].title === val){
      newCreatedFolder = parent.children[i]
    }
  } 
  return await newCreatedFolder
}

async function createFolder(parent,title){
  await chrome.bookmarks.create(
    {'parentId': parent.id, 'title': title}, 
    function(newFolder) {
      console.log("added folder: " + newFolder.title);
    }
  );
}

async function createFile(parent,url){
  console.log("createFile: "+ parent)
    chrome.bookmarks.create({
      'parentId': parent.id ,
      'url': url,
    });
}

output is:

newCreatedFolder is: undefined
parents returned: undefined
added folder: 2022-8-18 19:42:45
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at insertUrls (index.js:238:28)
    at checkForExisting (index.js:226:11)
insertUrls @ index.js:238
checkForExisting @ index.js:226
await in checkForExisting (async)
(anonymous) @ index.js:164

Answer 1

1. You can't specify a callback in a chrome method if you want to await its returned value. Remove the callback in createFolder.
2. Your createFile function doesn't wait for the API. Add await before chrome.bookmarks.create.