Misc improvements

This commit is contained in:
a 2020-07-31 00:58:41 +02:00
parent adb091a353
commit c80b9c679c
4 changed files with 66 additions and 16 deletions

View file

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

View file

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

View file

@ -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);
};
})();

View file

@ -1,16 +1,15 @@
import { browser } from "webextension-polyfill-ts"; import { browser } from "webextension-polyfill-ts";
import { isEnabledOnPage } from "../common";
import "./popup.scss"; import "./popup.scss";
class ExtensionToggle extends HTMLButtonElement { class ExtensionToggle extends HTMLButtonElement {
isON: boolean = false; isON: boolean = false;
innerHTML: string = "OFF"; textContent: string = "OFF";
public set on(v: boolean) { public set on(v: boolean) {
if (this.isON == v) { if (this.isON == v) {
return; return;
} }
this.isON = v; this.isON = v;
this.innerHTML = this.on ? "ON" : "OFF"; this.textContent = this.on ? "ON" : "OFF";
const toggleEvent = new CustomEvent("extensionToggled", { const toggleEvent = new CustomEvent("extensionToggled", {
detail: this.on, 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));