如何更改js文件中的popup.html？

Question

我是新手，我正在嘗試制作一個 Chrome 擴展程序，通知用戶每隔一小時休息一次。 我制作了一個 SVG 加載程序，其中包含一些文本，顯示用戶下一次休息還剩多少時間，有一個 background.js 文件可以運行並更改彈出窗口。html 代碼，但錯誤即將到來：

Uncaught TypeError: Cannot read property 'textContent' of null

這是我的清單。json：-

  "manifest_version": 2,
  "name": "Detox",
  "version": "0.1",
  "background": {
    "scripts": ["index.js"]
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html",
    "default_title": "Detox your schedule"
  }
}

這是我的 background.js，錯誤出現在第三行：-

document.addEventListener("DOMContentLoaded", function () {
  var time = 3600;
  var showTime = document.querySelector("#timeFromBreak").textContent;

  setInterval(function () {
    if (time > 0) {
      let mins = Math.floor(time / 60);
      let sec = time % 60;
      showTime = mins + ":" + sec;
      time -= 1;
    } else {
      showTime = "BREAKTIME!!!";
    }
  }, 1000);
});

這是彈出窗口。html：-

<!DOCTYPE html>
<html>
  <head>
    <title>extension</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <h1>Your Detox Report</h1>
    </header>
    <main>
      <section class="titlePage">
        <div class="nbi">Next Break In</div>
        <svg height="100" width="100" style="transform: rotate(270deg);">
          <circle cx="50" cy="50" r="40" />
          <text
            id="timeFromBreak"
            text-anchor="middle"
            x="50"
            y="-50"
            fill="#2bae66ff"
            transform="rotate(90)"
          >
            1:00
          </text>
        </svg>
      </section>
    </main>
    <script src="./background.js"></script>
  </body>
</html>

Answer 1

我猜你在 chrome://extensions 頁面中看到了錯誤，在這種情況下它來自你不需要的 index.js。

從 manifest.json 中刪除background部分

將 DOM 元素存儲在showTime中，然后分配其 textContent 屬性。 當前您更改文本本身，這只是一個不再連接到元素的純字符串

 var showTime = document.querySelector("#timeFromBreak"); setInterval(function () { if (time > 0) { let mins = Math.floor(time / 60); let sec = time % 60; showTime.textContent = mins + ":" + sec; time -= 1; } else { showTime.textContent = "BREAKTIME;,;"; } }, 1000);

將 background.js 重命名為 popup.js（也在 popup.html 的標簽內）

請注意，彈出窗口是一個標准頁面，顯示在它自己單獨的 window 中，因此它有自己單獨的開發工具，您可以通過在彈出窗口內右鍵單擊來調用它。

如何更改js文件中的popup.html？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-07-23 16:21:00

如何更改js文件中的popup.html？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-07-23 16:21:00

解決方案1
0 已采納 2020-07-23 16:21:00