commit e9b024043b14616e338993b98a1e09d216db29d6
Author: OverPoweredDev <omkar.prabhune19@vit.edu>
Date:   Tue Jun 29 13:18:50 2021 +0530

    added feature: input field in popup to add new enabled websites

diff --git a/README.md b/README.md
index 095073a..e7c21ff 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
 1. Navigate to `chrome://extensions` in your browser. You can also access this page by clicking on the Omnibox (three vertical dots), hovering over More Tools and selecting Extensions
 2. Check the box next to Developer Mode
 3. Click Load Unpacked Extension and select the `apertium-webext/src/` directory
-4. Finally, Enable the plugin by checking the toggle switch in the extension details box
+4. Finally, Enable the plugin by checking the toggle
 
 <br>
 
@@ -47,7 +47,7 @@ And you're done! you can use the extension to translate within the pop-up or hov
 
 <br>
 
-With that, you're done. For more detailed instructions, check out [this MDN page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing).
+With that, you're done. For more detailed instructions, there's [this MDN page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing).
 
 <br>
 
@@ -64,7 +64,7 @@ With that, you're done. For more detailed instructions, check out [this MDN page
 <br>
 <br>
 
-Check out the [Edge Documentation](https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/extension-sideloading) for additional details regarding installation.
+Refer to the [Edge Documentation](https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/extension-sideloading) for additional details regarding installation.
 
 <br>
 
diff --git a/src/lib/storage.js b/src/lib/storage.js
index 0b276b8..62cfe15 100644
--- a/src/lib/storage.js
+++ b/src/lib/storage.js
@@ -281,10 +281,16 @@ function removeFromEnabledWebsiteList(settings, hostname){
 }
 
 function addToEnabledWebsiteList(settings, url) {
-    let hostname = new URL(url).hostname;
+    let hostname;
     let list = getEnabledWebsiteList();
 
-    if(!list.includes(hostname)) {
+    if (isHostname(url)) {
+        hostname = url;
+    } else {
+        hostname = new URL(url).hostname;
+    }
+
+    if (!list.includes(hostname)) {
         list.push(hostname);
     }
 
@@ -326,9 +332,19 @@ function getTargetwithSource(source) {
     let languageList = getLangPairs().langPairs;
     let list = [];
     for (let i = 0; i < languageList.length; i++) {
-        if(languageList[i].sourceLanguage === source) {
+        if (languageList[i].sourceLanguage === source) {
             list.push(languageList[i].targetLanguage);
         }
     }
     return [...new Set(list)];
+}
+
+
+function isHostname(url) {
+    let validHostnameRegex = "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])";
+    let r = RegExp(validHostnameRegex);
+
+    console.log(r.test(url), url)
+
+    return r.test(url);
 }
\ No newline at end of file
diff --git a/src/popup/options.html b/src/popup/options.html
index 7aefeb2..3962f31 100644
--- a/src/popup/options.html
+++ b/src/popup/options.html
@@ -55,6 +55,10 @@
                 <tbody id="enabled-website-tbody">
                 </tbody>
             </table>
+            <div class="input-group input-group-sm mb-3">
+                <input id="website-input" type="text" class="form-control" placeholder="example.com">
+                <button id="add-website-button" class="btn btn-outline-secondary" type="button">Add Website</button>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/popup/options.js b/src/popup/options.js
index e89199f..b4b7f75 100644
--- a/src/popup/options.js
+++ b/src/popup/options.js
@@ -29,7 +29,15 @@ $(".delete-website").on('click', function () {
     updateEnabledTable($("#enabled-website-tbody"));
 });
 
-$(document).click(function() {
+// Add website from table
+$("#add-website-button").on('click', function () {
+   let url = $('#website-input').val();
+
+   addToEnabledWebsiteList(globalSettings, url);
+   updateEnabledTable($("#enabled-website-tbody"));
+});
+
+$(document).click(function () {
     $("#target-language-dropdown").hide();
 });
 
@@ -48,7 +56,7 @@ function updateEnabledTable(parent) {
     parent.empty();
     let rowIter = 1;
     list.forEach((websiteURL) => {
-        parent.append("<tr><th scope='row'>" + rowIter + "</th><td>" + websiteURL + "</td><td class='delete-website' data-url='"+websiteURL+"'><img class='trash-icon' src='../assets/trash.svg' alt='trash icon'></td></tr>");
+        parent.append("<tr><th scope='row'>" + rowIter + "</th><td>" + websiteURL + "</td><td class='delete-website' data-url='" + websiteURL + "'><img class='trash-icon' src='../assets/trash.svg' alt='trash icon'></td></tr>");
         rowIter++;
     });
 }
diff --git a/src/popup/popup.css b/src/popup/popup.css
index c5e6ded..a637d8d 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -87,7 +87,7 @@ tr, td, th {
     font-size: smaller;
 }
 
-.btn:focus,.btn:active, textarea:focus, textarea:active {
+.btn:focus,.btn:active, textarea:focus, textarea:active, input:focus, input:active {
     outline: none !important;
     box-shadow: none !important;
 }
diff --git a/src/settings/settings.css b/src/settings/settings.css
index 80010ec..3ff85f4 100644
--- a/src/settings/settings.css
+++ b/src/settings/settings.css
@@ -72,6 +72,8 @@ tr, td, th {
     position: relative;
     overflow: auto;
 
+    margin-bottom: 2em;
+
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
diff --git a/src/settings/settings.html b/src/settings/settings.html
index 9a1046a..2f32e2b 100644
--- a/src/settings/settings.html
+++ b/src/settings/settings.html
@@ -63,6 +63,10 @@
         </tbody>
       </table>
     </div>
+    <div class="input-group mb-3">
+      <input id="website-input" type="text" class="form-control no-focus" placeholder="example.com">
+      <button id="add-website-button" class="btn btn-sm btn-dark" type="button">Add Website</button>
+    </div>
   </div>
 </div>
 </body>
diff --git a/src/settings/settings.js b/src/settings/settings.js
index 5326339..c972067 100644
--- a/src/settings/settings.js
+++ b/src/settings/settings.js
@@ -51,6 +51,14 @@ $(".delete-website").on('click', function () {
     updateEnabledTable($("#enabled-website-tbody"));
 });
 
+// Add website from table
+$("#add-website-button").on('click', function () {
+    let url = $('#website-input').val();
+
+    addToEnabledWebsiteList(globalSettings, url);
+    updateEnabledTable($("#enabled-website-tbody"));
+});
+
 $(document).click(function(){
     $("#target-language-dropdown").hide();
 });