Add tippy to content.js, minor modifications

src/background/background.ts

@@ -1,4 +1,5 @@
 import { browser, Runtime, Tabs } from "webextension-polyfill-ts";
+import { GTranslateScraper } from "./gtranslate_scraper";
 
 console.log("Background script loaded");
 const getTab = async (s: Runtime.MessageSender): Promise<Tabs.Tab> => {
@@ -57,3 +58,5 @@ browser.tabs.onUpdated.addListener(async (tabID, changeInfo) => {
 		}
 	}
 });
+
+new GTranslateScraper();

src/content_script.ts

@@ -1,43 +0,0 @@
-import { browser } from "webextension-polyfill-ts";
-import { isEnabledOnPage } from "./common";
-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);
-		if (v) document.addEventListener("selectionchange", onSelectionChange);
-	};
-
-	browser.runtime.onMessage.addListener((c: command) => {
-		switch (c.commandKind) {
-			case commands.setEnabled:
-				setEnabled(c.value);
-				break;
-		}
-	});
-	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/content_script/content_script.ts

@@ -1,6 +1,8 @@
 import { browser } from "webextension-polyfill-ts";
+import "./custom_elements";
 import tippy from "tippy.js";
 import "tippy.js/dist/tippy.css";
+import "./tippy.scss";
 
 declare global {
 	interface Window {
@@ -29,7 +31,8 @@ declare global {
 	});
 
 	const tippyInstance = tippy(document.body, {
-		content: "Lorem ipsum",
+		content: "<lingo-loading></lingo-loading>",
+		allowHTML: true,
 		trigger: "manual",
 		interactive: true,
 		getReferenceClientRect: () =>

src/content_script/custom_elements.ts

@@ -0,0 +1,17 @@
+import spinnerCSS from "./spinner.raw.scss";
+
+export class LingoLoading extends HTMLElement {
+	constructor() {
+		super();
+		this.innerHTML = "";
+		const shadow = this.attachShadow({ mode: "open" });
+		let spinner = document.createElement("div");
+		spinner.id = "spinner";
+
+		const style = document.createElement("style");
+		style.textContent = spinnerCSS;
+		shadow.appendChild(style);
+		shadow.appendChild(spinner);
+	}
+}
+customElements.define("lingo-loading", LingoLoading);

src/content_script/spinner.raw.scss

@@ -0,0 +1,18 @@
+#spinner {
+	border: 0.3em solid #f3f3f3;
+	border-top: 0.3em solid #3498db;
+	border-radius: 50%;
+	width: 0.8em;
+	height: 0.8em;
+	display: inline-block;
+	animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/content_script/tippy.scss

@@ -0,0 +1,7 @@
+.tippy-content {
+	user-select: none;
+	* {
+		user-select: none;
+	}
+	font-size: larger;
+}

src/manifest.json

@@ -13,5 +13,5 @@
 		"default_popup": "popup.html"
 	},
 	"background": { "scripts": ["background.bundle.js"] },
-	"permissions": ["<all_urls>", "sessions"]
+	"permissions": ["<all_urls>", "sessions", "webRequest", "webRequestBlocking"]
 }

src/popup/popup.ts

@@ -19,6 +19,10 @@ class ExtensionToggle extends HTMLButtonElement {
 		return this.isON;
 	}
 
+	public render() {
+		this.textContent = this.on ? "ON" : "OFF";
+	}
+
 	constructor() {
 		super();
 		this.addEventListener("click", () => (this.on = !this.on));

src/types.d.ts

@@ -1,6 +1,6 @@
-declare module "*.raw" {
+declare module "*.raw.scss" {
-	const content: string;
+	const css: string;
-	export = content;
+	export = css;
 }
 
 declare const enum commands {

webpack.config.js

@@ -16,7 +16,7 @@ let options = {
 			"content_script",
 			"content_script.ts"
 		),
-		background: path.join(__dirname, "src", "background.ts"),
+		background: path.join(__dirname, "src", "background", "background.ts"),
 	},
 	output: {
 		path: path.resolve(__dirname, "dist"),
@@ -40,12 +40,13 @@ let options = {
 				exclude: /node_modules/,
 			},
 			{
-				test: /\.(c|s[ac])ss\.raw$/i,
+				test: /\.(c|s[ac])ss$/i,
-				use: ["raw-loader", "sass-loader"],
+				exclude: /\.raw\.(c|s[ac])ss$/i,
+				use: ["style-loader", "css-loader", "sass-loader"],
 			},
 			{
-				test: /\.(c|s[ac])ss$/i,
+				test: /\.raw\.(c|s[ac])ss$/i,
-				use: ["style-loader", "css-loader", "sass-loader"],
+				use: ["raw-loader", "sass-loader"],
 			},
 		],
 	},