I am working on a chrome extension and I cannot figure out how to pass the javascript response returned in popup.js back to popup.html (so the user can see the results). I tried adding <div id="tabs"> </div> into popup.html thinking that would dynamically bring back function(tabs) results but it does not, greatly appreciate any insights.
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="myButton.css">
</head>
<body style="background-color:Gray;">
<a href="#" class="myButton">Scan</a>
<script src=popup.js></script>
<div id="tabs"> </div>
</body>
</html>
popup.js
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
var tabURL = tabs[0].url;
var api = "https://api.us-east-2.amazonaws.com..."
console.log(tabURL);
console.log(api)
userdata = {"url":tabURL}
console.log(userdata)
fetch(api, {
method: 'POST',
body: JSON.stringify(userdata),
})
.then((resp) => resp.json())
.then(function(response) {
console.info('fetch()', response);
return response;
});
});
You can insert Elements into popup.html with popup.js.
e.g.
function addSpan(response) {
let tabDiv = document.getElementById('tabs');
let newSpan = document.createElement('span');
newSpan.innerText = "Test123".
// newSpan.innerText = response;
tabDiv.append(newSpan);
}