Js not working properly in Chrome extension-CodePudding

I've read few other questions as well on the same type, but it isn't working. I'm trying to change text inside <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 >
      <div>
        <h1 id="">Welcome</h1>
      </div>
      <div >
        <form>
          <label for="fname">Search</label><br />
          <input type="text" id="imgAddress" /><br />
          <div onclick="myFunction()" id="submit">Submit</div>
        </form>
      </div>
      <p >socials here</p>
      <div >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 :)

CodePudding user response：

Your code is wrong I think. The event listener should be like this.

submitBtn.addEventListener('click', myFunction)