I'm learning how to make Chrome extensions, and I'm having problems attaching a script to the popup.html.
The foreground.js stores some words which I'm calling labels in the local storage using chrome.storage.local.set(). What I want the popup page to do is simply show these labels.
I know the labels are getting stored, as I've debugged that process and it works fine.
The popup.js code:
function displayLabels(){
var labels = [];
chrome.storage.local.get("labels",value=>{
labels=value.labels
});
console.log(labels)
var mainDiv = document.getElementById("mainDiv")
for(var i=0;i<labels.length;i++){
var mainDiv = document.getElementById("mainDiv")
var textBox = document.createElement("h5")
textBox.innerText = `Label${i}: ${labels[i]}`
mainDiv.appendChild(textBox)
}
}
document.onload=(event)=>{
displayLabels()
}
//window.onload=(event)=>{
// displayLabels()
//}
And the popup.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="mainDiv">
</div>
</body>
</html>
I have checked the spelling of the key labels while storing it, it is correct. I have also set the storage permission in the manifest.json
The displayLabels() function does not get called. I tried a simple console.log("hello") in the first line of displayLabels() too, but that also did not work.
