Add tippy to content script

This commit is contained in:
a 2020-07-30 19:49:07 +02:00
parent c51ecd14cf
commit feb9177f92
5 changed files with 45 additions and 24 deletions

View file

@ -10,19 +10,25 @@ const getTab = async (s: Runtime.MessageSender): Promise<Tabs.Tab> => {
return tabs[0];
};
const setEnabledCommand = async (v: Boolean, s: Runtime.MessageSender) => {
const isEnabled = async (tabID: number): Promise<boolean> =>
(await browser.sessions.getTabValue(tabID, "lingoEnabled")) || false;
const setEnabled = async (tabID: number, value: boolean) =>
await browser.sessions.setTabValue(tabID, "lingoEnabled", value);
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);
};
const getEnabledCommand = async (
s: Runtime.MessageSender
): Promise<boolean> => {
const tab = await getTab(s);
return (await browser.sessions.getTabValue(tab.id, "lingoEnabled")) || false;
return isEnabled(tab.id);
};
browser.runtime.onMessage.addListener(
@ -35,3 +41,12 @@ 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" });
}
}
});

4
src/common.ts Normal file
View file

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

View file

@ -1,5 +1,7 @@
import { browser } from "webextension-polyfill-ts";
import { isEnabledOnPage } from "./utils";
import { isEnabledOnPage } from "./common";
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
declare global {
interface Window {
@ -13,9 +15,7 @@ declare global {
const setEnabled = (v: boolean) => {
document.removeEventListener("selectionchange", onSelectionChange);
if (v) {
document.addEventListener("selectionchange", onSelectionChange);
}
if (v) document.addEventListener("selectionchange", onSelectionChange);
};
browser.runtime.onMessage.addListener((c: command) => {
@ -25,10 +25,19 @@ declare global {
break;
}
});
const onSelectionChange = () => {
console.log(document.getSelection().toString());
};
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);
};
})();

View file

@ -1,5 +1,5 @@
import { browser } from "webextension-polyfill-ts";
import { isEnabledOnPage } from "../utils";
import { isEnabledOnPage } from "../common";
import "./popup.scss";
class ExtensionToggle extends HTMLButtonElement {
isON: boolean = false;
@ -52,6 +52,3 @@ browser.runtime.onMessage.addListener((c: command) => {
});
isEnabledOnPage().then((resp) => (toggle.on = resp));
//Runs in the current tab
browser.tabs.executeScript({ file: "/content_script.bundle.js" });

View file

@ -34,17 +34,13 @@ let options = {
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
exclude: /node_modules/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},