diff --git a/src/background.ts b/src/background.ts index 4042ec4..cb4cfdb 100644 --- a/src/background.ts +++ b/src/background.ts @@ -15,14 +15,22 @@ const isEnabled = async (tabID: number): Promise => 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, - value: v, - }); - setEnabled(tab.id, v); - await browser.sessions.setTabValue(tab.id, "lingoEnabled", v); + + injectScript(tab.id); + await setEnabled(tab.id, 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); } } }); diff --git a/src/common.ts b/src/common.ts deleted file mode 100644 index 4f3f44e..0000000 --- a/src/common.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { browser } from "webextension-polyfill-ts"; -export const isEnabledOnPage = (): Promise => { - return browser.runtime.sendMessage({ commandKind: commands.getEnabled }); -}; diff --git a/src/content_script/content_script.ts b/src/content_script/content_script.ts new file mode 100644 index 0000000..ba1f5f3 --- /dev/null +++ b/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); + }; +})(); diff --git a/src/popup/popup.ts b/src/popup/popup.ts index 736b78a..c688068 100644 --- a/src/popup/popup.ts +++ b/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));