I am currently working on developing a Mozilla Firefox extension that blocks ads to learn more JavaScript, HTML, and CSS. Within the extension of that popup, I want to be able to click a button and refresh whatever page the browser is currently on. I have the buttons developed, and are currently interactive, but I am failing to see how I can extend the scope from the HTML I am using to see the webpage the browser is on.
Here is the most simplified state I have working: 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>
popup1.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);
}
Image of what extension ui looks like, on clicking icon
The goal is to be able to click the Refresh Page button in the extension, and it reload whatever website my browser is currently on. I'm very new to JS, CSS, and HTML, and am failing to access things outside the scope of my extension.
