Misc improvements
This commit is contained in:
parent
adb091a353
commit
c80b9c679c
4 changed files with 66 additions and 16 deletions
|
@ -15,14 +15,22 @@ const isEnabled = async (tabID: number): Promise<boolean> =>
|
|||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
import { browser } from "webextension-polyfill-ts";
|
||||
export const isEnabledOnPage = (): Promise<boolean> => {
|
||||
return browser.runtime.sendMessage({ commandKind: commands.getEnabled });
|
||||
};
|
46
src/content_script/content_script.ts
Normal file
46
src/content_script/content_script.ts
Normal 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);
|
||||
};
|
||||
})();
|
|
@ -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));
|
||||
|
|
Loading…
Reference in a new issue