Version 1

Spencer-Yoder · Jul 18, 2018 · 6dff223 · 6dff223
1 parent fe1e4d9
commit 6dff223
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,29 @@
+checkStatus();  //Get the current status when the browser opens
+window.setInterval(checkStatus, 30000); //Keep checking every 30 seconds
+
+//Get the current status
+function checkStatus(){
+    var httpResponse = new XMLHttpRequest();    //make a new request
+    httpResponse.addEventListener("load", setStatus);   //add event listeners
+    httpResponse.addEventListener("error", statusError);
+    httpResponse.open("GET", "http://pi.hole/admin/api.php?");  //URL to pi hole
+    httpResponse.send();
+}
+
+//function if the check returned data
+function setStatus () {
+    var data = JSON.parse(this.response);
+
+    if(data.status == "disabled"){  //If disabled set badge
+        browser.browserAction.setBadgeText({text: "Off"});
+    }
+
+    else if (data.status == 'enabled') {    //else turn on badge
+        browser.browserAction.setBadgeText({text: "On"});
+    }
+}
+
+//If error getting the status 
+function statusError(){
+    browser.browserAction.setBadgeText({text: ""});
+}
diff --git a/icon/icon-16.png b/icon/icon-16.png
diff --git a/icon/icon-32.png b/icon/icon-32.png
diff --git a/icon/icon-48.png b/icon/icon-48.png
diff --git a/icon/icon-96.png b/icon/icon-96.png
diff --git a/icon/raspberry.svg b/icon/raspberry.svg
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,36 @@
+{
+    "manifest_version": 2,
+    "name": "Remote Switch for Pi-Hole",
+    "version": "1.0",
+    "author": "Spencer Yoder",
+
+    "description": "Lets you Enable/Disable a Pi-Hole with out opening a new tab.",
+
+    "icons": {
+      "48": "icon/icon-48.png",
+      "96": "icon/icon-96.png"
+    },
+
+    "browser_action": {
+        "browser_style": true,
+        "default_icon": {
+            "16": "icon/icon-16.png",
+            "32": "icon/icon-32.png"
+        },
+
+        "default_popup": "popup/popup.html"
+    },
+
+    "options_ui": {
+        "page": "options/options.html"
+    },
+
+    "background": {
+        "scripts": ["background.js"]
+      },
+
+      "permissions": [
+        "storage",
+        "http://pi.hole/*",
+        "webRequest"]
+  }
diff --git a/options/options.css b/options/options.css
@@ -0,0 +1,14 @@
+input[type=text] {
+    font-size: 12px;
+    width: 475px;
+}
+
+p {
+    font-size: 16px;
+    text-align: center;
+}
+
+.confirmation{
+    font-size: 16px;
+    text-align: center;
+}
diff --git a/options/options.html b/options/options.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="options.css"/>
+    </head>
+
+    <body>
+        <p>Enter the API key found under setting -> API/Web interface.</p>
+
+        <table>
+            <tr>
+                <td><p>API Key:</p></td>
+                <td><input type="text" id="api_key" name="API Key"></td>
+            </tr>
+        </table>
+
+        <div id="confirmation_status" class="confirmation"></div>
+        <td><input type="button" id="save_button" value="Save"/>
+        <p>Not an official Pi-Hole application.</p>    
+
+        <script src="options.js"></script>
+    </body>
+
+</html>
diff --git a/options/options.js b/options/options.js
@@ -0,0 +1,27 @@
+//Function that saves the key to storage
+function setStorage(){
+    browser.storage.local.set({api_key: document.getElementById("api_key").value}).then(setSuccess, storageError);  //Save the key to storage
+}
+
+//Function that sets save confirmation status on screen
+function setSuccess() {
+    document.getElementById("confirmation_status").innerHTML = "Saved Successful!";
+}
+
+//Function if the save was not successful 
+function storageError(error) {
+    document.getElementById("confirmation_status").innerHTML = "Saving Error!";
+}
+
+//Function that get the API key from the storage
+function getStorage(){
+    var getting = browser.storage.local.get("api_key"); //try and get the key
+    getting.then(setCurrentChoice, storageError);   //decide on what action to go with
+}
+
+function setCurrentChoice(result) { 
+    document.getElementById("api_key").defaultValue = result.api_key    //Set current Key in the input box
+}
+
+document.getElementById("save_button").addEventListener("click", setStorage);   //Action event for when save is pressed
+window.addEventListener("load", getStorage);    //Get the API key when the page loads
diff --git a/popup/popup.css b/popup/popup.css
@@ -0,0 +1,34 @@
+.button {
+    background-color: #008CBA; /* Green */
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 4px;
+    margin: 7px;
+}
+
+.status {
+    font-size: 16px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.enabled{
+    font-size: 16px;
+    text-align: center;
+    color: #22B225;
+}
+
+.disabled{
+    font-size: 16px;
+    text-align: center;
+    color: #F60D1A;
+}
+
+.text{
+    font-size: 12px;
+    text-align: center;
+    letter-spacing: 2
+}
diff --git a/popup/popup.html b/popup/popup.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="popup.css"/>
+    </head>
+
+    <body>
+        <div class="status">Pi-Hole Status:</div>
+        <div id="display_status"></div>
+        <div class="text"></div>Enter the amount of time to turn off Pi-Hole.</div>
+        <div class="text">Use 0 for indefinite</div>
+        <input type="number" id="time" value="10" placeholder="10 minutes" min="0"/>
+
+        <input type="button" id="button1" class="button" value="Test"/>
+        <script src="popup.js"></script>
+    </body>
+</html>
diff --git a/popup/popup.js b/popup/popup.js
@@ -0,0 +1,88 @@
+var API_KEY = null; //Temporary variable for the API-Key 
+
+//Function called after the enable/disable button is pressed.
+function buttonClicked(){
+    var httpResponse = new XMLHttpRequest();    //Make a new object to accept return from server
+    var url = null; 
+
+    if(document.getElementById("button1").value == "Disable"){  //If the Pi-Hole is currently ENABLED
+        var time = document.getElementById("time").value;   //get the time from the box
+        time = time * 60;   //get it in minutes
+        url = "http://pi.hole/admin/api.php?disable=" + String(time) + "&auth=" + API_KEY;  //build the url
+    }
+
+    else if(document.getElementById("button1").value == "Enable"){  //If the Pi-Hole is currently DISABLED
+        url = "http://pi.hole/admin/api.php?enable&auth=" + API_KEY;    //build the url
+    }
+
+     httpResponse.addEventListener("load", setStatus);  //add listener for the xmlResponse
+     httpResponse.addEventListener("error", statusError);    //add listener to error
+     httpResponse.open("GET", String(url)); //Open a get request
+     httpResponse.send();   //Send it to the server
+}
+
+//Function that gets the current status of the Pi-Hole
+function getPiHoleStatus(){
+    getStorage();   //get the API key from local storage
+
+    var httpResponse = new XMLHttpRequest();    //make a new request object
+    httpResponse.addEventListener("load", setStatus);   //add listener to the load
+    httpResponse.addEventListener("error", statusError);    //add listener to error
+    httpResponse.open("GET", "http://pi.hole/admin/api.php?");  //set up get
+    httpResponse.send();    //send it to the server
+}
+
+//Function that sets the status of the Pi-Hole in the respective places
+function setStatus () {
+    var data = JSON.parse(this.response);   //parse the return JSON
+
+    if(data.status == "disabled"){  //If the Pi-Hole status is disabled
+        document.getElementById("display_status").innerHTML = "Disabled";   //Set the popup text
+        document.getElementById("display_status").className = "disabled";   //changed the text color
+        document.getElementById("button1").value = "Enable";    //change the button for enable
+        document.getElementById("time").disabled = true;    //disable the time input box
+        browser.browserAction.setBadgeText({text: "Off"});  //set the badge to off
+    }
+
+    else if (data.status == 'enabled') {    //If the Pi-Hole is enabled
+        document.getElementById("display_status").innerHTML = "Enabled";    //Set the popup text
+        document.getElementById("display_status").className = "enabled";    //set the text color
+        document.getElementById("button1").value = "Disable";   //change the button text
+        document.getElementById("time").disabled = false;   //turn on the input box
+        browser.browserAction.setBadgeText({text: "On"});   //set badge text to on
+    } 
+
+    else{   //If there is an API key error
+        document.getElementById("display_status").innerHTML = "API Error";    //Set the popup text
+        document.getElementById("display_status").className = "disabled";    //set the text color
+        document.getElementById("button1").value = "";   //change the button text
+        document.getElementById("time").disabled = true;   //turn off the input box
+        browser.browserAction.setBadgeText({text: ""});   //set badge text to empty
+    }
+}
+
+//Function if there was a problem gettting the status
+function statusError(){
+    document.getElementById("display_status").innerHTML = "Not Connected";  //Change the display status
+    browser.browserAction.setBadgeText({text: ""}); //Clear the icon badge
+}
+
+//Function thats the API key from local storage
+function getStorage(){
+    var getting = browser.storage.local.get("api_key"); //Call to get local storage
+    getting.then(gatherStorage, getError);
+}
+
+//Function if there was an error getting the Key from storage
+function getError(error) {
+    console.log("Error" + error);
+    document.getElementById("display_status").innerHTML = "No Key";
+}
+
+//Function if the storage recall was successful
+function gatherStorage(result) { 
+    API_KEY = result.api_key;   //Save in memory
+}
+
+document.getElementById("button1").addEventListener("click", buttonClicked);    //Action listener for button clicked
+document.addEventListener("DOMContentLoaded", getPiHoleStatus); //When the page loads get the status