Merge pull request #8 from badsgahhl/v2.1-list-feature

V2.1 list feature Closes #7

README.md

@@ -42,6 +42,21 @@ Check that you copied the key correctly and that there are no whitespaces, etc.
 Disabling your pihole works seamlessly. Turning it on, or turning on automatically after the timeout will need some seconds.
 During the start ads will show up, and the popup won't show any status until the pihole is back online. Be patient.
 
+#### Black- / Whitelisting domains
+With the extension version v2.1 you are able to black and whitelist the current tabs url. This feature requires PiHole v5.
+<br>Meaning of colors:
+ - Orange: The domain wasn't added to any list
+ - Green: The domain was successfully added to the list
+
+**Known Bug:** Domains which you have manually added to one of the both lists cannot be added/changed via the extension.
+This will be fixed in the next version of PiHole.
+
+**What does that mean:** For example you added a domain to your blacklist (example.com), then you visit this domain in your browser.
+You want to whitelist this domain with the extension now. If you click onto the whitelist button it will respond with orange and
+the domain cannot be added to the whitelist (cannot be moved from the black to the whitelist). This will work in a future update of PiHole.
+
+
+
 
 This is not an official Pi-Hole application.
 Pi-hole® is a registered trademark of Pi-hole LLC” or “FTLDNS™ is a trademark of Pi-hole LLC

create_package.sh

@@ -1,5 +1,3 @@
-#!/bin/bash
-
 rm package.zip
 
 zip -r package.zip dist/ icon/ src/ manifest.json -x "*.ts"

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "Switch for PiHole",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"author": "Pascal Glaser",
 	"description": "Small Extension to enable/disable your PiHole.",
 	"icons": {
@@ -21,11 +21,15 @@
 		"page": "src/module/option/options.html"
 	},
 	"background": {
+		"persistent": true,
 		"page": "src/module/background/background.html"
 	},
 	"permissions": [
 		"storage",
 		"http://*/*",
-		"https://*/*"
+		"https://*/*",
+		"webRequest",
+		"webRequestBlocking",
+		"activeTab"
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "switch-for-pihole-chrome",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"dependencies": {},
 	"devDependencies": {
 		"@types/chrome": "0.0.104",
@@ -11,7 +11,9 @@
 	"description": "Remote Switch for Pi-Hole to enable and disable the server with the specified time provide by the user without having to open a new tab. No other installs are required.",
 	"main": "src/module/background/background.ts",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"start": "tsc -watch",
+		"build": "tsc --project tsconfig.json && ./create_package.sh"
 	},
 	"repository": {
 		"type": "git",

src/data/api/models/pihole/PiHoleListStatus.ts

@@ -0,0 +1,12 @@
+export enum ApiListMode
+{
+	whitelist = 'white',
+	blacklist = 'black',
+}
+
+export interface PiHoleVersions
+{
+	FTL_current: string;
+	web_current: string;
+	core_current: string;
+}

src/data/api/service/ApiRequestService.ts → src/data/api/service/PiHoleApiRequest.ts

@@ -1,12 +1,16 @@
 import {StorageAccessService} from "../../storage/StorageAccessService.js";
 import {BadgeService, ExtensionBadgeText} from "../../storage/BadgeService.js";
 
-export class ApiRequestService
+/**
+ * Class to access the pihole api with get,post params etc.
+ */
+export class PiHoleApiRequest
 {
 	private _onreadystatechange: ((this: XMLHttpRequest, ev: Event) => any) | null = null;
 	private _method: ApiRequestMethodEnum = ApiRequestMethodEnum.GET;
 	private _async: boolean = true;
-	private _params: Array<ApiParameter> = [];
+	private _get_params: Array<ApiParameter> = [];
+	private _post_params: Array<ApiParameter> = [];
 
 
 	public get onreadystatechange(): ((this: XMLHttpRequest, ev: Event) => any) | null
@@ -39,13 +43,22 @@ export class ApiRequestService
 		this._async = async;
 	}
 
-	public add_param(key: string, value?: string): void
+	public add_get_param(key: string, value?: string): void
 	{
 		if (!value)
 		{
 			value = null;
 		}
-		this._params.push({[key]: value})
+		this._get_params.push({[key]: value})
+	}
+
+	public add_post_param(key: string, value?: string): void
+	{
+		if (!value)
+		{
+			value = null;
+		}
+		this._post_params.push({[key]: value})
 	}
 
 	public async send(): Promise<void>
@@ -62,9 +75,9 @@ export class ApiRequestService
 
 		let url: string = url_base + "/api.php?auth=" + api_key;
 
-		for (let i = 0; i < this._params.length; i++)
+		for (let i = 0; i < this._get_params.length; i++)
 		{
-			const params: ApiParameter = this._params[i];
+			const params: ApiParameter = this._get_params[i];
 			if (params)
 			{
 				const key: string = Object.keys(params)[0];
@@ -80,12 +93,36 @@ export class ApiRequestService
 			httpResponse.onreadystatechange = this.onreadystatechange;
 		}
 
-		httpResponse.onerror = function(this: XMLHttpRequest, ev: ProgressEvent) {
+		httpResponse.onerror = function(this: XMLHttpRequest) {
 			BadgeService.set_badge_text(ExtensionBadgeText.error);
 		}
 
 		httpResponse.open(this.method, url, this.is_async);
-		httpResponse.send();
+
+		if (this.method === ApiRequestMethodEnum.POST)
+		{
+			let post_params = '';
+			for (let i = 0; i < this._post_params.length; i++)
+			{
+				const params: ApiParameter = this._post_params[i];
+				if (params)
+				{
+					const key: string = Object.keys(params)[0];
+					const value: string = Object.keys(params).map(key => params[key])[0];
+					if (i > 0)
+					{
+						post_params += '&'
+					}
+					post_params += key + "=" + value;
+				}
+			}
+			httpResponse.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+			httpResponse.send(post_params);
+		}
+		else
+		{
+			httpResponse.send();
+		}
 	}
 }
 
@@ -96,6 +133,6 @@ interface ApiParameter
 
 export enum ApiRequestMethodEnum
 {
-	GET = 'Get',
-	POST = 'Post'
+	GET = 'GET',
+	POST = 'POST'
 }

src/data/storage/TabService.ts

@@ -0,0 +1,44 @@
+import {StorageAccessService} from "./StorageAccessService.js";
+
+export module TabService
+{
+	/**
+	 * Returns the current tab url. Cleaned only the real domain without the parameters etc.
+	 */
+	export async function get_current_tab_url_cleaned(): Promise<string>
+	{
+		const current_tab_url_promise: Promise<string> = new Promise((resolve) => {
+			chrome.tabs.query({'active': true, 'lastFocusedWindow': true, 'currentWindow': true}, function(tabs) {
+				if (tabs[0])
+				{
+					const url = tabs[0].url;
+					resolve(url);
+				}
+			});
+		});
+		let url = '';
+		let full_url = (await current_tab_url_promise);
+		const url_validity_regex = new RegExp('^(http|https):\\/\\/[^ "]+$');
+		const pi_hole_url = (await StorageAccessService.get_pi_hole_settings()).pi_uri_base;
+
+		// Domains that should not be listed anyway.
+		const excluded_domains: Array<string> = [
+			new URL(pi_hole_url).hostname,
+			'localhost',
+			'127.0.0.1',
+			'pi.hole'
+		]
+		// Checking regex
+		if (url_validity_regex.test(full_url))
+		{
+			const hostname = new URL(full_url).hostname;
+			// Check if url is on the excluded list
+			if (!excluded_domains.includes(hostname))
+			{
+				url = hostname
+			}
+		}
+		return url;
+	}
+
+}

src/module/background/background.ts

@@ -1,7 +1,7 @@
 import {BadgeService, ExtensionBadgeText} from "../../data/storage/BadgeService.js";
 import {PiHoleApiStatus, PiHoleApiStatusEnum} from "../../data/api/models/pihole/PiHoleApiStatus.js";
 import {PiHoleSettingsDefaults, PiHoleSettingsStorage, StorageAccessService} from "../../data/storage/StorageAccessService.js";
-import {ApiRequestService} from "../../data/api/service/ApiRequestService.js";
+import {PiHoleApiRequest} from "../../data/api/service/PiHoleApiRequest.js";
 import {ApiJsonErrorMessages} from "../../data/api/errors/ApiErrorMessages.js";
 
 /**
@@ -18,7 +18,7 @@ window.setInterval(checkStatus, 15000); //Keep checking every 15 seconds
  */
 async function checkStatus(): Promise<void>
 {
-	const api_request: ApiRequestService = new ApiRequestService();
+	const api_request: PiHoleApiRequest = new PiHoleApiRequest();
 
 	const onreadystatechange = function() {
 		if (this.readyState === 4 && this.status === 200)
@@ -54,7 +54,7 @@ async function checkStatus(): Promise<void>
 		}
 	};
 
-	api_request.add_param('status');
+	api_request.add_get_param('status');
 	api_request.onreadystatechange = onreadystatechange;
 
 	await api_request.send();

src/module/general/darkmode.css

@@ -1,10 +1,28 @@
 * {
     --black-mode-background: #2b3943;
+    --black-mode-color-light-blue-grey: #94a6bf;
+    --black-mode-background-light: #334b5b;
 }
 
 @media (prefers-color-scheme: dark) {
     body {
-        background: var(--black-mode-background) !important;
+        background: var(--black-mode-background);
         color: white !important;
     }
+
+    .card-header {
+        background: var(--black-mode-background);
+    }
+
+    .card-body {
+        background: var(--black-mode-background-light);
+    }
+
+    .card-footer {
+        background: var(--black-mode-background);
+    }
+
+    .card {
+        border-color: var(--black-mode-color-light-blue-grey);
+    }
 }

src/module/popup/popup.css

@@ -1,10 +1,15 @@
+* {
+    --card-padding: 5px;
+}
+
 body {
     min-width: 150px;
     max-width: 190px;
+    overflow: hidden; /* Hide scrollbars */
 }
 
 #main {
-    margin: 7px 5px 0 5px;
+    margin: 1px 1px 1px 1px;
     text-align: center;
 }
 
@@ -14,8 +19,34 @@ body {
     text-align: center;
 }
 
-#time_div {
-    margin-bottom: 10px;
+.card {
+    width: 100% !important;
+}
+
+.card:nth-child(2) {
+    margin-top: 5px;
+}
+
+#current_url {
+    -webkit-transition: background-color 500ms ease;
+}
+
+.card-body {
+    padding: var(--card-padding) !important;
+    font-size: 14px;
+}
+
+.card-header {
+    padding: var(--card-padding) !important;
+    font-size: 16px;
+}
+
+.card-footer {
+    padding: var(--card-padding) !important;
+}
+
+.input-group {
+    margin-bottom: 10px !important;
 }
 
 #time {
@@ -52,7 +83,7 @@ body {
 
 /* The switch - the box around the slider */
 #switch {
-    margin-top: 5px;
+    /* margin-top: 5px; */
     position: relative;
     display: inline-block;
     width: 60px;