Add tippy to content script

src/background.ts

@@ -10,19 +10,25 @@ const getTab = async (s: Runtime.MessageSender): Promise<Tabs.Tab> => {
 	return tabs[0];
 };
 
-const setEnabledCommand = async (v: Boolean, s: Runtime.MessageSender) => {
+const isEnabled = async (tabID: number): Promise<boolean> =>
+	(await browser.sessions.getTabValue(tabID, "lingoEnabled")) || false;
+const setEnabled = async (tabID: number, value: boolean) =>
+	await browser.sessions.setTabValue(tabID, "lingoEnabled", value);
+
+const setEnabledCommand = async (v: boolean, s: Runtime.MessageSender) => {
 	const tab = await getTab(s);
 	browser.tabs.sendMessage(tab.id, {
 		commandKind: commands.setEnabled,
 		value: v,
 	});
+	setEnabled(tab.id, v);
 	await browser.sessions.setTabValue(tab.id, "lingoEnabled", v);
 };
 const getEnabledCommand = async (
 	s: Runtime.MessageSender
 ): Promise<boolean> => {
 	const tab = await getTab(s);
-	return (await browser.sessions.getTabValue(tab.id, "lingoEnabled")) || false;
+	return isEnabled(tab.id);
 };
 
 browser.runtime.onMessage.addListener(
@@ -35,3 +41,12 @@ 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" });
+		}
+	}
+});

src/common.ts

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

src/content_script.ts

@@ -1,5 +1,7 @@
 import { browser } from "webextension-polyfill-ts";
-import { isEnabledOnPage } from "./utils";
+import { isEnabledOnPage } from "./common";
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
 
 declare global {
 	interface Window {
@@ -13,9 +15,7 @@ declare global {
 
 	const setEnabled = (v: boolean) => {
 		document.removeEventListener("selectionchange", onSelectionChange);
-		if (v) {
+		if (v) document.addEventListener("selectionchange", onSelectionChange);
-			document.addEventListener("selectionchange", onSelectionChange);
-		}
 	};
 
 	browser.runtime.onMessage.addListener((c: command) => {
@@ -25,10 +25,19 @@ declare global {
 				break;
 		}
 	});
-
-	const onSelectionChange = () => {
-		console.log(document.getSelection().toString());
-	};
-
 	isEnabledOnPage().then((v) => setEnabled(v));
+
+	const tippyInstance = tippy(document.body, {
+		content: "Lorem ipsum",
+		trigger: "manual",
+		getReferenceClientRect: () =>
+			document.getSelection().getRangeAt(0).getBoundingClientRect(),
+	});
+	let timeoutID: number;
+	const onSelectionChange = () => {
+		clearTimeout(timeoutID);
+		tippyInstance.hide();
+		if (document.getSelection().type == "Range")
+			timeoutID = window.setTimeout(tippyInstance.show, 500);
+	};
 })();

src/popup/popup.ts

@@ -1,5 +1,5 @@
 import { browser } from "webextension-polyfill-ts";
-import { isEnabledOnPage } from "../utils";
+import { isEnabledOnPage } from "../common";
 import "./popup.scss";
 class ExtensionToggle extends HTMLButtonElement {
 	isON: boolean = false;
@@ -52,6 +52,3 @@ browser.runtime.onMessage.addListener((c: command) => {
 });
 
 isEnabledOnPage().then((resp) => (toggle.on = resp));
-
-//Runs in the current tab
-browser.tabs.executeScript({ file: "/content_script.bundle.js" });

webpack.config.js

@@ -34,17 +34,13 @@ let options = {
 				use: "ts-loader",
 				exclude: /node_modules/,
 			},
+			{
+				test: /\.css$/i,
+				use: ["style-loader", "css-loader"],
+			},
 			{
 				test: /\.s[ac]ss$/i,
-				use: [
+				use: ["style-loader", "css-loader", "sass-loader"],
-					// Creates `style` nodes from JS strings
-					"style-loader",
-					// Translates CSS into CommonJS
-					"css-loader",
-					// Compiles Sass to CSS
-					"sass-loader",
-				],
-				exclude: /node_modules/,
 			},
 		],
 	},