Js 在 Chrome 扩展中无法正常工作

Question

我也阅读了其他一些关于同一类型的问题，但没有用。我正在尝试将 <p> 标记内的文本更改为 Hello world。它在本地主机上运行，但不在 chrome 扩展名上运行。

我的manifest.json

{
  "name": "Azura",
  "description": "Yes.! Azura",
  "version": "1.0",
  "manifest_version": 3,

  "permissions": ["tts"],

  "action": {
    "default_popup": "index.html"
  }
}

我的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>

我的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);
}

所有这些在本地主机上运行良好，但在 chrome 扩展上运行不佳。任何帮助将不胜感激:)

Answer 1

我认为你的代码是错误的。事件监听器应该是这样的。

submitBtn.addEventListener('click', myFunction)

Js 在 Chrome 扩展中无法正常工作

Js not working properly in Chrome extension

javascript

google-chrome