I'm making a chrome extension where I'm calling the youtube API and using fetch() to do so. I don't understand why I'm getting an undefined variable when I call the function. Here is where I'm calling the function;
document.querySelector("[type=button]").addEventListener("click", function() { //console.log("this was clicked"); let videoId = document.getElementById('vidUrl').value; videoId = videoId.substring(videoId.indexOf('=') + 1); console.log(videoId); //chrome.runtime.sendMessage({ msg: "startFunc", vidId: videoId}); let request = addToQueue(videoId); console.log(request); console.log(request.snippet.title); let table = document.querySelector(".table"); let row = table.insertRow(table.rows.length); let title = row.insertCell(0); let author = row.insertCell(1); title.innerHTML = request.Data.snippet.title; author.innerHTML = request.Data.snippet.videoOwnerChannelTitle;})and this is the function itself;
function addToQueue(vidId){ chrome.identity.getAuthToken({ interactive: true }, function (token) { //console.log(token); let fetchString = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=xxxxxxxxxxxxxxxxxx' let post = {"part": ["snippet" ],"id": "UC0E5pDp_c2riLV4UhEgynKA","snippet": {"playlistId": "PLu4fFFN_062GzqARIz3gnERiJ8M4GbRcL","position": 1,"resourceId": {"kind": "youtube#video","videoId": vidId } } } let fetchOptions = { method: 'POST', headers: { Authorization: `Bearer ${token}`,'Content-Type': 'application/json', }, body: JSON.stringify(post), } fetch(fetchString,fetchOptions) .then((response) => response.json()) .then(function (data) { console.log(data); //console.log(typeof data); //chrome.runtime.sendMessage({Data : data}); return data; }); }) }I'm fairly new to javascript and chrome extensions so please forgive me if this is something obvious.