From 079acca33c0c4c2d7a1b4ab434abdc137633f7df Mon Sep 17 00:00:00 2001 From: a Date: Sun, 2 Aug 2020 20:31:27 +0200 Subject: [PATCH] Add tippy to content.js, minor modifications --- src/{ => background}/background.ts | 3 ++ src/content_script.ts | 43 --------------------------- src/content_script/content_script.ts | 5 +++- src/content_script/custom_elements.ts | 17 +++++++++++ src/content_script/spinner.raw.scss | 18 +++++++++++ src/content_script/tippy.scss | 7 +++++ src/manifest.json | 2 +- src/popup/popup.ts | 4 +++ src/types.d.ts | 6 ++-- webpack.config.js | 11 +++---- 10 files changed, 63 insertions(+), 53 deletions(-) rename src/{ => background}/background.ts (95%) delete mode 100644 src/content_script.ts create mode 100644 src/content_script/custom_elements.ts create mode 100644 src/content_script/spinner.raw.scss create mode 100644 src/content_script/tippy.scss diff --git a/src/background.ts b/src/background/background.ts similarity index 95% rename from src/background.ts rename to src/background/background.ts index cb4cfdb..d65da08 100644 --- a/src/background.ts +++ b/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 => { @@ -57,3 +58,5 @@ browser.tabs.onUpdated.addListener(async (tabID, changeInfo) => { } } }); + +new GTranslateScraper(); diff --git a/src/content_script.ts b/src/content_script.ts deleted file mode 100644 index ace06d7..0000000 --- a/src/content_script.ts +++ /dev/null @@ -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); - }; -})(); diff --git a/src/content_script/content_script.ts b/src/content_script/content_script.ts index ba1f5f3..f279867 100644 --- a/src/content_script/content_script.ts +++ b/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: "", + allowHTML: true, trigger: "manual", interactive: true, getReferenceClientRect: () => diff --git a/src/content_script/custom_elements.ts b/src/content_script/custom_elements.ts new file mode 100644 index 0000000..62b8680 --- /dev/null +++ b/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); diff --git a/src/content_script/spinner.raw.scss b/src/content_script/spinner.raw.scss new file mode 100644 index 0000000..3c09d1d --- /dev/null +++ b/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); + } +} diff --git a/src/content_script/tippy.scss b/src/content_script/tippy.scss new file mode 100644 index 0000000..309a8c9 --- /dev/null +++ b/src/content_script/tippy.scss @@ -0,0 +1,7 @@ +.tippy-content { + user-select: none; + * { + user-select: none; + } + font-size: larger; +} diff --git a/src/manifest.json b/src/manifest.json index d651c48..8b9204e 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -13,5 +13,5 @@ "default_popup": "popup.html" }, "background": { "scripts": ["background.bundle.js"] }, - "permissions": ["", "sessions"] + "permissions": ["", "sessions", "webRequest", "webRequestBlocking"] } diff --git a/src/popup/popup.ts b/src/popup/popup.ts index c688068..19dfb99 100644 --- a/src/popup/popup.ts +++ b/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)); diff --git a/src/types.d.ts b/src/types.d.ts index c8ec08e..85db691 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -1,6 +1,6 @@ -declare module "*.raw" { - const content: string; - export = content; +declare module "*.raw.scss" { + const css: string; + export = css; } declare const enum commands { diff --git a/webpack.config.js b/webpack.config.js index 7c1a4c0..7410016 100644 --- a/webpack.config.js +++ b/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, - use: ["raw-loader", "sass-loader"], + test: /\.(c|s[ac])ss$/i, + exclude: /\.raw\.(c|s[ac])ss$/i, + use: ["style-loader", "css-loader", "sass-loader"], }, { - test: /\.(c|s[ac])ss$/i, - use: ["style-loader", "css-loader", "sass-loader"], + test: /\.raw\.(c|s[ac])ss$/i, + use: ["raw-loader", "sass-loader"], }, ], },