Misc improvements

src/background.ts

@@ -15,14 +15,22 @@ const isEnabled = async (tabID: number): Promise<boolean> =>
 const setEnabled = async (tabID: number, value: boolean) =>
 	await browser.sessions.setTabValue(tabID, "lingoEnabled", value);
 
+const injectScript = async (tabID: number, enabled?: boolean) => {
+	await browser.tabs.executeScript(tabID, {
+		file: "/content_script.bundle.js",
+	});
+	if (!enabled) enabled = await isEnabled(tabID);
+	browser.tabs.sendMessage(tabID, {
+		commandKind: commands.setEnabled,
+		value: enabled,
+	});
+};
+
 const setEnabledCommand = async (v: boolean, s: Runtime.MessageSender) => {
 	const tab = await getTab(s);
-	browser.tabs.sendMessage(tab.id, {
+
-		commandKind: commands.setEnabled,
+	injectScript(tab.id);
-		value: v,
+	await setEnabled(tab.id, v);
-	});
-	setEnabled(tab.id, v);
-	await browser.sessions.setTabValue(tab.id, "lingoEnabled", v);
 };
 const getEnabledCommand = async (
 	s: Runtime.MessageSender
@@ -43,10 +51,9 @@ browser.runtime.onMessage.addListener(
 );
 
 browser.tabs.onUpdated.addListener(async (tabID, changeInfo) => {
-	console.log(changeInfo);
 	if (changeInfo.status == "complete") {
 		if (await isEnabled(tabID)) {
-			browser.tabs.executeScript(tabID, { file: "/content_script.bundle.js" });
+			injectScript(tabID);
 		}
 	}
 });

src/common.ts

@@ -1,4 +0,0 @@
-import { browser } from "webextension-polyfill-ts";
-export const isEnabledOnPage = (): Promise<boolean> => {
-	return browser.runtime.sendMessage({ commandKind: commands.getEnabled });
-};

src/content_script/content_script.ts

@@ -0,0 +1,46 @@
+import { browser } from "webextension-polyfill-ts";
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+
+declare global {
+	interface Window {
+		hasRun: any;
+	}
+}
+(() => {
+	//Make sure our script only runs once
+	if (window.hasRun) return;
+	window.hasRun = true;
+
+	const setEnabled = (v: boolean) => {
+		document.removeEventListener("selectionchange", onSelectionChange); //Always remove it avoid duplicate event listeners
+		if (v) {
+			onSelectionChange(); // Call it since selection may have changed since it was enabled
+			document.addEventListener("selectionchange", onSelectionChange);
+		} else tippyInstance.hide();
+	};
+
+	browser.runtime.onMessage.addListener((c: command) => {
+		switch (c.commandKind) {
+			case commands.setEnabled:
+				setEnabled(c.value);
+				break;
+		}
+	});
+
+	const tippyInstance = tippy(document.body, {
+		content: "Lorem ipsum",
+		trigger: "manual",
+		interactive: true,
+		getReferenceClientRect: () =>
+			document.getSelection().getRangeAt(0).getBoundingClientRect(),
+	});
+
+	let timeoutID: number;
+	const onSelectionChange = () => {
+		tippyInstance.hide();
+		clearTimeout(timeoutID);
+		if (document.getSelection().type == "Range")
+			timeoutID = window.setTimeout(tippyInstance.show, 500);
+	};
+})();

src/popup/popup.ts

@@ -1,16 +1,15 @@
 import { browser } from "webextension-polyfill-ts";
-import { isEnabledOnPage } from "../common";
 import "./popup.scss";
 class ExtensionToggle extends HTMLButtonElement {
 	isON: boolean = false;
-	innerHTML: string = "OFF";
+	textContent: string = "OFF";
 
 	public set on(v: boolean) {
 		if (this.isON == v) {
 			return;
 		}
 		this.isON = v;
-		this.innerHTML = this.on ? "ON" : "OFF";
+		this.textContent = this.on ? "ON" : "OFF";
 		const toggleEvent = new CustomEvent("extensionToggled", {
 			detail: this.on,
 		});
@@ -51,4 +50,6 @@ browser.runtime.onMessage.addListener((c: command) => {
 	}
 });
 
-isEnabledOnPage().then((resp) => (toggle.on = resp));
+browser.runtime
+	.sendMessage({ commandKind: commands.getEnabled })
+	.then((r) => (toggle.on = r));