Add setter to the toggle

src/popup/popup.ts

@@ -1,20 +1,28 @@
 import { browser } from "webextension-polyfill-ts";
 import "./popup.scss";
 class ExtensionToggle extends HTMLButtonElement {
-	on: boolean = false;
+	isON: boolean = false;
 	innerHTML: string = "OFF";
-	constructor() {
-		super();
-		this.addEventListener("click", this.toggle);
-	}
-	toggle() {
-		this.on = !this.on;
+
+	public set on(v: boolean) {
+		if (this.isON == v) {
+			return;
+		}
+		this.isON = v;
 		this.innerHTML = this.on ? "ON" : "OFF";
 		const toggleEvent = new CustomEvent("extensionToggled", {
 			detail: this.on,
 		});
 		this.dispatchEvent(toggleEvent);
 	}
+	public get on(): boolean {
+		return this.isON;
+	}
+
+	constructor() {
+		super();
+		this.addEventListener("click", () => (this.on = !this.on));
+	}
 }
 customElements.define("extension-toggle", ExtensionToggle, {
 	extends: "button",