Estoy aprendiendo a hacer extensiones de Chrome y el proyecto en el que estoy trabajando es un 'Reloj' en una nueva pestaña.
Problema: puedo recuperar la hora actual, pero no puedo actualizar la página cada segundo. ¿Cómo puedo arreglar esto?
principal.js
setInterval(function () { var d = new Date(); const h = d.getHours(); const m = d.getMinutes(); const s = d.getSeconds(); // Current Time w/ format const cFormat = h + ":" + m; const cTime = document.getElementById("cTime"); cTime.textContent = cFormat; }, 1000);manifiesto.json
{ "manifest_version": 3, "name": "ClockTab", "description": "Clock.", "version": "1.0.0", "persistent": true, "icons": {"128": "icon_128.png"}, "host_permissions": ["<all_urls>","activeTab","tabs"], "action" : { "default_popup": "popup.html", "default_icon": "icon_128.png" }, "chrome_url_overrides" : { "newtab": "index.html" }, "background": { "service_worker": "main.js", }, "content_scripts": [{ "css": ["style.css","popup.css"], "js": ["jquery.min.js", "main.js", "popup.js","dateTime.js"], "all_frames": true, "matches": ["http://*/*"] }] }índice.html
<div id="cTime"></div>Opté por setTimeout, lo que permite que el reloj se actualice cada segundo, lo que solo ocurre después de que se carga la página.
principal.js
function start() { // Clock function getTime() { var d = new Date(); const h = d.getHours(); const m = d.getMinutes(); const s = d.getSeconds(); // Current Time w/ format const cFormat = h + ":" + m; const cTime = document.getElementById("cTime"); cTime.textContent = cFormat; setTimeout(function () { getTime(); }, 1000); } getTime(); } window.addEventListener("load", start);