Actualmente estoy trabajando en el desarrollo de una extensión de Mozilla Firefox que bloquea los anuncios para obtener más información sobre JavaScript, HTML y CSS. Dentro de la extensión de esa ventana emergente, quiero poder hacer clic en un botón y actualizar cualquier página en la que se encuentre actualmente el navegador. Tengo los botones desarrollados y actualmente son interactivos, pero no veo cómo puedo extender el alcance del HTML que estoy usando para ver la página web en la que se encuentra el navegador.
Aquí está el estado más simplificado que tengo funcionando: popup.html
<!doctype html> <hmtl> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> body { padding: 1em; } input { margin-left: 1em; margin-right: 1em; } </style> </head> <form> <input type="button" value="Refresh"> <button onClick="document.location.href=window.location.href">Refresh Window</button> <button onClick="document.location.href = 'popup.html' + '?' + Date.parse(new Date());">Refresh Page</button> </form> <p>Page hasn't been refreshed</p> <script src="/popup1.js"></script> </hmtl>emergente1.js:
const button = document.querySelector('input'); const paragraph = document.querySelector('p'); const mainBrowser = browser.document button.addEventListener('click', refreshButton); function refreshButton(){ button.disabled = true; button.value="Refreshing" paragraph.textContent = 'Page is refreshing'; // mainBrowser.reload(); window.setTimeout(function() { button.disabled = false; button.value = "Refresh" paragraph.textContent = 'Page is up-to-date.'; }, 1000); }Imagen del aspecto de la interfaz de usuario de la extensión al hacer clic en el icono
El objetivo es poder hacer clic en el botón Actualizar página en la extensión y volver a cargar cualquier sitio web en el que se encuentre actualmente mi navegador. Soy muy nuevo en JS, CSS y HTML, y no puedo acceder a cosas fuera del alcance de mi extensión.
