Hi there I'm learning how to create a v3 chrome extension and I'm having an issue inserting text into a paragraph I have tried inserting a document.getelementbyid that doesn't seem to work I have also tried using a document.body.innerHTML that did work but it displayed the value on the body of the page and not the chrome extension body
Manifest.JSON
{
"manifest_version": 3,
"name": "Stader HBAR Staking",
"version": "0.1",
"action": {
"16": "/images/HBARLogo.png",
"48": "/images/HBARLogo.png",
"128": "/images/HBARLogo.png",
"default_popup": "popup.html"
},
"description": "This extention works with Stader Hedera staking to get the amount of reward you have recieved so far.",
"icons": {
"16": "/images/HBARLogo.png",
"48": "/images/HBARLogo.png",
"128": "/images/HBARLogo.png"
},
"content_scripts": [
{
"matches": ["https://hedera.staderlabs.com/lt-pools"],
"css": ["style.css"],
"js": ["background.js"]
}
]
}
Javascript File
setTimeout(function (){
let amount = document.querySelector(".bg-dark-600 > .flex > .flex-center > .LSPoolsEstimate_value__jdEKi").innerHTML;
let currentAmount = document.querySelector(".MuiGrid-root > .flex-center > .LSPoolsForm_root__XqBrI > .LSPoolsForm_container__hcfZ2 > .LSPoolsFormLaToLx_root__DP9bV > form > .LSPoolsFormLaToLx_available_amount_validation__jOOGH > .flex:nth-child(2) > .Typography_root__nvhLo").innerHTML;
removingFirstItem = currentAmount.split("~").pop();
removingSecondItem = removingFirstItem.split("HBAR").shift();
currentValue = removingSecondItem.trim();
console.log(amount);
let doCalculation = amount * currentValue;
console.log(doCalculation);
let youHaveEarned = doCalculation - amount;
console.log(youHaveEarned);
document.getElementById("initialAmount").innerHTML = totalAmountEarned
}, 2000)();
HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bodyofex">
<p id="initialAmount"></p>
</div>
<script src="./background.js">
</script>
</body>
</html>