I recently created my first google chrome extension. It works, but I want to make it even better.
The goal of my extension is to be able to refresh a page at a specific time. I am able to do that, but, when I go away from the extension popup, it cancels the "timer" I set.
Here you can find some code:
Popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Refresher</title>
</head>
<body>
<p><b>Séléctionnez l'heure à laquelle vous souhaitez rafraîchir automatiquement la page !</b></p>
<div id="d2">
<form>
<input id="input-hour" type="number" placeholder=22 min=0 max=24></input> H
<input id="input-min" type="number" placeholder=13 min=0 max=59></input> M
<input id="input-sec" type="number" placeholder=45 min=0 max=59></input> S
</form>
</div><br>
<div id="d1">
<button id="ss_button">Programmer le refresh</button>
</div>
<p>En attendant une future mise à jour, vous devez garder ce popup ouvert pour qu'il fonctionne.</p>
</body>
<script src="popup.js"></script>
</html>
Popup.js:
console.log("popup.js loaded")
document.addEventListener('DOMContentLoaded', function () {
if(document.getElementById("input-hour") != null){
var input_h = document.getElementById("input-hour");
input_h.value = localStorage.getItem("hour_value");
}
if(document.getElementById("input-min") != null){
var input_m = document.getElementById("input-min");
input_m.value = localStorage.getItem("min_value");
}
if(document.getElementById("input-sec") != null){
var input_s = document.getElementById("input-sec");
input_s.value = localStorage.getItem("sec_value");
}
if(document.getElementById("ss_button") != null){
var ss_button = document.getElementById("ss_button");
ss_button.addEventListener('click', ss_clickHandler);
}
function ss_clickHandler(e) {
localStorage.setItem("hour_value", input_h.value);
localStorage.setItem("min_value", input_m.value);
localStorage.setItem("sec_value", input_s.value);
refresh_hour = parseInt(input_h.value);
refresh_min = parseInt(input_m.value);
refresh_sec = parseInt(input_s.value);
countdown(refresh_hour, refresh_min, refresh_sec);
function countdown(hours, minutes, seconds){
var now = new Date();
var then = new Date();
var onesecond = new Date(1970, 0, 1, 1, 0, 1, 0);
if(now.getHours() > hours ||
(now.getHours() == hours && now.getMinutes() > minutes) ||
now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
then.setDate(now.getDate() + 1);
}
then.setHours(hours);
then.setMinutes(minutes);
then.setSeconds(seconds);
var timeout = (then.getTime() - now.getTime() - onesecond.getTime());
setTimeout(function() { chrome.runtime.sendMessage({message: "reload"}); }, timeout);
}
}
});
And finally background.js :
chrome.runtime.onMessage.addListener( function(request,sender,sendResponse) {
if( request.message === "reload" ) {
chrome.tabs.getSelected(null, function(tab) {
var code = 'window.location.reload(true);';
chrome.tabs.executeScript(tab.id, {code: code});
});
}
});
Can, please, someone help me? Thanks in advance !
