Add option of URL list to disable working on the web page

src/_locales/en/messages.json

@@ -10,10 +10,10 @@
     "message": "Donate with PayPal"
   },
   "enableOnThisPage": {
-    "message": "Enable on this page"
+    "message": "Enable working on this page"
   },
   "disableOnThisPage": {
-    "message": "Disable on this page"
+    "message": "Disable working on this page"
   },
   "initialTextArea": {
     "message": "Enter text"
@@ -85,6 +85,12 @@
   "ifChangeSecondLangOnPageCaptionLabel": {
     "message": "Detects the language of the selected text, and if it is the same as the default target language, translate it into the second language."
   },
+  "disableUrlListLabel": {
+    "message": "URL list to disable working"
+  },
+  "disableUrlListCaptionLabel": {
+    "message": "If the URL matches the list, working on the web page is disabled. Please enter as a regular expression."
+  },
 
   "toolbarLabel": {
     "message": "Toolbar popup"

src/content/components/TranslateContainer.js

@@ -72,9 +72,7 @@ const matchesTargetLang = async selectedText => {
 };
 
 const waitTime = time => {
-  return new Promise(resolve => {
-    setTimeout(resolve(), time);
-  });
+  return new Promise(resolve => setTimeout(() => resolve(), time));
 };
 
 export default class TranslateContainer extends Component {
@@ -104,6 +102,19 @@ export default class TranslateContainer extends Component {
     browser.runtime.onMessage.addListener(this.handleMessage);
     overWriteLogLevel();
     updateLogLevel();
+    if (this.props.isFirst) this.disableExtensionByUrlList();
+  };
+
+  disableExtensionByUrlList = () => {
+    const disableUrlList = getSettings("disableUrlList");
+    const disableUrls = disableUrlList.split("\n");
+    const pageUrl = top.location.href;
+
+    const isMatched = disableUrls.some(urlReg => {
+      if (urlReg.trim() === "") return false;
+      return RegExp("^" + urlReg.trim()).test(pageUrl);
+    });
+    if (isMatched) this.props.removeElement();
   };
 
   handleMessage = async request => {

src/content/index.js

@@ -15,11 +15,9 @@ const handleMessage = async request => {
     case "getEnabled":
       return isEnabled;
     case "enableExtension":
-      isEnabled = true;
       insertElement();
       break;
     case "disableExtension":
-      isEnabled = false;
       removeElement();
       break;
     default:
@@ -31,19 +29,28 @@ browser.runtime.onMessage.addListener(handleMessage);
 const removeElement = () => {
   const element = document.getElementById("simple-translate");
   if (!element) return;
+
   ReactDOM.unmountComponentAtNode(element);
   element.parentNode.removeChild(element);
+  isEnabled = false;
 };
 
+let isFirst = true;
 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} />,
+    <TranslateContainer
+      removeElement={removeElement}
+      insertElement={insertElement}
+      isFirst={isFirst}
+    />,
     document.getElementById("simple-translate")
   );
+  isFirst = false;
+  isEnabled = true;
 };
 
 insertElement();

src/options/components/OptionContainer.js

@@ -68,6 +68,18 @@ export default props => {
         />
       );
       break;
+    case "textarea":
+      formId = id;
+      optionForm = (
+        <textarea
+          id={formId}
+          spellCheck={false}
+          placeholder={props.placeholder}
+          onChange={handleValueChange}
+          defaultValue={getSettings(id)}
+        />
+      );
+      break;
     case "radio":
       formId = `${id}_${props.value}`;
       optionForm = (
@@ -150,7 +162,7 @@ export default props => {
     shouldShow && (
       <li className={`optionContainer ${props.updated ? "updated" : ""} ${props.new ? "new" : ""}`}>
         {props.hr && <hr />}
-        <div className="optionElement">
+        <div className={`optionElement ${type == "textarea" ? "showColumn" : ""}`}>
           <div className="optionText">
             <label className="noHover" htmlFor={formId ? formId : null}>
               <p>{title ? (props.useRawTitle ? title : browser.i18n.getMessage(title)) : ""}</p>

src/options/styles/OptionContainer.scss

@@ -7,6 +7,13 @@
     justify-content: space-between;
     padding: 10px 0px 10px 0px;
 
+    &.showColumn {
+      flex-direction: column;
+      .optionForm {
+        margin: 0px 10px;
+      }
+    }
+
     .optionText {
       flex: 1;
       p {

src/settings/defaultSettings.js

@@ -94,6 +94,15 @@ export default [
         type: "checkbox",
         default: false,
         new: true
+      },
+      {
+        id: "disableUrlList",
+        title: "disableUrlListLabel",
+        captions: ["disableUrlListCaptionLabel"],
+        type: "textarea",
+        default: "",
+        placeholder: "https://example.com/*\nhttps://example.net/*",
+        new: true
       }
     ]
   },