How to get response value from fetch instead of a promise with no value?

Question

I am building a chrome extension to pull data out of a page to build a url from the data and I want to have that url shortened as the final product. In my content scripts file I make a call out to a url shortener to compress a link. I keep getting returned a promise with no value which crashes react. In devtools I see that the callout is made successfully and the url is returned.

I have tried async await, a full async function, tried forcing the response.toString()

Here is the relevant section of code.

var listingInfo = new Map();    
listingInfo.set('Address', 'some standard address');    
var tinyLink = '(http://tinyurl.com)/api-create.php?url='; //() because I can't share shortener urls on this site.

/*-----------------------------------GET LINKS--------------------------*/

if(listingInfo.has('Address')){   var mapsLink = \`https://www.google.com/maps/place/${listingInfo.get('Address').replace(new RegExp(" ", "g"), '+')}\`;

  tinyLink = \`${tinyLink}${mapsLink} `;

  var dirLink = fetch(tinyLink, {
    method: "GET", 
    mode: "no-cors", 
    headers: {"Content-Type": "text/html"}   }).then((response)=>{
    return response;   });

  listingInfo.set('dirLink', dirLink); }

I expected to receive a plain text string because in the network tab of devtools it shows a simple string url and not any JSON, but I keep receiving a resolved promise with value="" .

Answer 1

// made this function to use XMLHttpRequest()
const setLink = (propName, url) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {

var link = xhr.responseText;
console.log(`link: '${link}'`);
listingInfo.set(propName, link);
}
}
xhr.send();
}

// Then called setLink()
if(listingInfo.has('Address')){
var mapsLink = 
`https://www.google.com/maps/place/${listingInfo.get('Address').replace(new 
RegExp(" ", "g"), '+')}`;

dirLink = `${tinyLink}${mapsLink}`;

console.log(dirLink);

setLink('dirLink', dirLink);
console.log(dirLink);


}