Add function to enable / disable elements on the page

src/content/components/TranslateContainer.js

@@ -71,6 +71,12 @@ const matchesTargetLang = async selectedText => {
   return matchsLangs;
 };
 
+const waitTime = time => {
+  return new Promise(resolve => {
+    setTimeout(resolve(), time);
+  });
+};
+
 export default class TranslateContainer extends Component {
   constructor(props) {
     super(props);
@@ -92,7 +98,7 @@ export default class TranslateContainer extends Component {
   init = async () => {
     await initSettings();
     this.setState({ isInit: true });
-    document.addEventListener("mouseup", e => setTimeout(() => this.handleMouseUp(e), 0));
+    document.addEventListener("mouseup", this.handleMouseUp);
     document.addEventListener("keydown", this.handleKeyDown);
     browser.storage.onChanged.addListener(handleSettingsChange);
     browser.runtime.onMessage.addListener(this.handleMessage);
@@ -121,6 +127,8 @@ export default class TranslateContainer extends Component {
         this.hideButton();
         this.showPanel();
         break;
+      default:
+        return empty;
     }
   };
 
@@ -172,7 +180,8 @@ export default class TranslateContainer extends Component {
     this.setState({ shouldShowPanel: false });
   };
 
-  handleMouseUp = e => {
+  handleMouseUp = async e => {
+    await waitTime(0);
     const isLeftClick = e.button === 0;
     const isInPasswordField = e.target.tagName === "INPUT" && e.target.type === "password";
     const isInThisElement = document.querySelector("#simple-translate").contains(e.target);
@@ -206,6 +215,13 @@ export default class TranslateContainer extends Component {
     }
   };
 
+  componentWillUnmount() {
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    browser.storage.onChanged.removeListener(handleSettingsChange);
+    browser.runtime.onMessage.removeListener(this.handleMessage);
+  }
+
   render = () => {
     if (!this.state.isInit) return null;
     return (

src/content/index.js

@@ -2,5 +2,47 @@ import React from "react";
 import ReactDOM from "react-dom";
 import TranslateContainer from "./components/TranslateContainer";
 
-document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate'></div>");
-ReactDOM.render(<TranslateContainer />, document.getElementById("simple-translate"));
+let isEnabled = true;
+const handleMessage = async request => {
+  const empty = new Promise(resolve => {
+    setTimeout(() => {
+      return resolve("");
+    }, 100);
+  });
+
+  switch (request.message) {
+    case "getEnabled":
+      return isEnabled;
+    case "enableExtension":
+      isEnabled = true;
+      insertElement();
+      break;
+    case "disableExtension":
+      isEnabled = false;
+      removeElement();
+      break;
+    default:
+      return empty;
+  }
+};
+browser.runtime.onMessage.addListener(handleMessage);
+
+const removeElement = () => {
+  const element = document.getElementById("simple-translate");
+  if (!element) return;
+  ReactDOM.unmountComponentAtNode(element);
+  element.parentNode.removeChild(element);
+};
+
+const insertElement = () => {
+  const element = document.getElementById("simple-translate");
+  if (element) return;
+
+  document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate'></div>");
+  ReactDOM.render(
+    <TranslateContainer removeElement={removeElement} insertElement={insertElement} />,
+    document.getElementById("simple-translate")
+  );
+};
+
+insertElement();