I've read a few other questions as well on the same type, but it isn't working.
I'm trying to change the text inside the <p> tag to Hello world. It does on localhost but not chrome extension.
My manifest.json
{
"name": "Azura",
"description": "Yes.! Azura",
"version": "1.0",
"manifest_version": 3,
"permissions": ["tts"],
"action": {
"default_popup": "index.html"
}
}
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/css/style.css" />
<title>Azura</title>
</head>
<body>
<div class="container">
<div>
<h1 id="">Welcome</h1>
</div>
<div class="formHolder">
<form>
<label for="fname">Search</label><br />
<input type="text" id="imgAddress" /><br />
<div onclick="myFunction()" id="submit">Submit</div>
</form>
</div>
<p class="socials">socials here</p>
<div class="powered">Powered by Azure - cognitive services</div>
</div>
<p id="textp">asdsad</p>
</body>
<script src="./backend/azureCognitive.js"></script>
<script src="./backend/main.js"></script>
</html>
My main.js
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener(onclick, myFunction);
function myFunction() {
document.getElementById("textp").innerText = "Hello world";
var input = document.getElementById("imgAddress");
// console.log(input.value);
}
All this is working fine on localhost but not working well as over chrome extension. Any help will be appreciated :)
Your code is wrong I think. The event listener should be like this.
submitBtn.addEventListener('click', myFunction)