Version 1 upload

Spencer-Yoder · Jul 21, 2018 · 049bace · 049bace
1 parent 9958d03
commit 049bace
Show file tree

Hide file tree

Showing 17 changed files with 310 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,27 @@
+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.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            // Action to be performed when the document is read;
+            var data = JSON.parse(this.response);
+
+            if (data.status == "disabled") {  //If disabled set badge
+                chrome.browserAction.setBadgeText({ text: "Off" });
+            }
+
+            else if (data.status == 'enabled') {    //else turn on badge
+                chrome.browserAction.setBadgeText({ text: "On" });
+            }
+        }
+        else {
+            chrome.browserAction.setBadgeText({ text: "" });
+        }
+    };
+    httpResponse.open("GET", "http://pi.hole/admin/api.php?", true);
+    httpResponse.send();
+}
diff --git a/icon/icon-128.png b/icon/icon-128.png
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, Use a QR Code scanner to get the text.</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,18 @@
+//Function that saves the key to storage
+function setStorage() {
+    chrome.storage.local.set({api_key: document.getElementById("api_key").value}, function () {
+        document.getElementById("confirmation_status").innerHTML = "Saved Successful!";
+        console.log(document.getElementById("api_key").value + " From Form");
+    });
+}
+
+//Function that get the API key from the storage
+function getStorage() {
+    chrome.storage.local.get('api_key', function (data) {
+        document.getElementById("api_key").defaultValue = data.api_key;
+        console.log(data.api_key);
+    });
+}
+
+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 minutes 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,80 @@
+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.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            // Action to be performed when the document is read;
+            var data = JSON.parse(this.response);   //parse the return JSON
+            changeIcon(data);
+        }
+    };
+    httpResponse.open("GET", String(url), true);
+    httpResponse.send();
+}
+
+//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.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            // Action to be performed when the document is read;
+            var data = JSON.parse(this.response);   //parse the return JSON
+            changeIcon(data);
+        }
+    };
+    httpResponse.open("GET", "http://pi.hole/admin/api.php?", true);
+    httpResponse.send();
+}
+
+function changeIcon(data) {
+
+    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
+        chrome.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
+        chrome.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
+        chrome.browserAction.setBadgeText({ text: "" });   //set badge text to empty
+    }
+}
+
+//Function thats the API key from local storage
+function getStorage() {
+    chrome.storage.local.get('api_key', function (data) {
+        API_KEY = data.api_key;
+    });
+}
+document.getElementById("button1").addEventListener("click", buttonClicked);    //Action listener for button clicked
+document.addEventListener("DOMContentLoaded", getPiHoleStatus); //When the page loads get the status
diff --git a/screenshot/1.PNG b/screenshot/1.PNG
diff --git a/screenshot/2.PNG b/screenshot/2.PNG
diff --git a/screenshot/3.PNG b/screenshot/3.PNG