Gourav Singh Rawat
Gourav Singh Rawat

Reputation: 441

Js not working properly in Chrome extension

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 :)

Upvotes: 0

Views: 105

Answers (1)

Maneth
Maneth

Reputation: 72

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

submitBtn.addEventListener('click', myFunction)

Upvotes: 1

Related Questions