mogrene · idematos · Dec 11, 2023 · Dec 11, 2023 · Dec 11, 2023 · Dec 11, 2023
diff --git a/public/popup.html b/public/popup.html
@@ -8,22 +8,21 @@
   <body>
     <div class="app">
       <div class="app-header">
-        <p id="currentDomain"></p>
+        <div class="app-header-left">
+          <p id="currentDomain"></p>
+          <a id="whitelistLink">+ ADD TO WHITELIST</a>
+        </div>
         <div class="app-header-right">
           <a id="reloadIcon" hidden>
             <img src="/icons/reload-icon.svg" alt="Reload page" width="25" />
           </a>
           <div class="switch-container">
-            <label class="switch-label switch-label-off" id="switch-label-off"
-              >OFF</label
-            >
+            <label class="switch-label" id="switch-label-off">OFF</label>
             <label class="switch" id="switch">
               <input type="checkbox" id="statusCheckbox" checked />
               <span class="slider"></span>
             </label>
-            <label class="switch-label switch-label-on" id="switch-label-on"
-              >ON</label
-            >
+            <label class="switch-label" id="switch-label-on">ON</label>
           </div>
         </div>
       </div>

diff --git a/src/background.ts b/src/background.ts
@@ -1,16 +0,0 @@
-// With background scripts you can communicate with popup
-// and contentScript files.
-// For more information on background script,
-// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts
-
-browser.runtime.onMessage.addListener((request, sender) => {
-  let message = 'Got no message!'
-
-  if (request.type === 'GREETINGS') {
-    message = `Hi ${
-      sender.tab ? 'Con' : 'Pop'
-    }, my name is Bac. I am from Background. It's great to hear from you.`
-  }
-
-  return Promise.resolve({ message })
-})

diff --git a/src/contentScript.ts b/src/contentScript.ts
@@ -1,43 +0,0 @@
-// Content script file will run in the context of web page.
-// With content script you can manipulate the web pages using
-// Document Object Model (DOM).
-// You can also pass information to the parent extension.
-
-// We execute this script by making an entry in manifest.json file
-// under `content_scripts` property
-
-// For more information on Content Scripts,
-// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts
-
-// Log `title` of current active web page
-const pageTitle: string =
-  document.head.getElementsByTagName('title')[0].innerHTML
-
-console.log(
-  `Page title is: '${pageTitle}' - evaluated by the extension's 'contentScript.js' file`
-)
-
-// Communicate with background file by sending a message
-browser.runtime
-  .sendMessage({
-    type: 'GREETINGS',
-    payload: {
-      message: 'Hello, my name is Con. I am from ContentScript.',
-    },
-  })
-  .then((response) => {
-    console.log(response.message)
-  })
-
-// Listen for message
-browser.runtime.onMessage.addListener((request, sender) => {
-  console.log({ request, sender })
-
-  if (request.type === 'COUNT') {
-    console.log(`Current count is ${request.payload.count}`)
-  }
-
-  // Send an empty response
-  // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
-  return Promise.resolve()
-})

diff --git a/src/popup.css b/src/popup.css
@@ -21,13 +21,23 @@ html {
 body {
   width: 450px;
   height: 450px;
+}
+
+p {
   color: white;
   font-size: 14px;
+  margin: 0;
 }
 
 a {
+  color: var(--green);
+  font-size: 8px;
+  font-weight: bolder;
+  cursor: pointer;
+}
+
+.reloadIcon {
   cursor: pointer;
-  height: 25px;
 }
 
 .app {
@@ -41,12 +51,22 @@ a {
 
 .app-header {
   width: 100%;
+  height: 30px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
+.app-header-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  text-align: left;
+  height: 100%;
+}
+
 .app-header-right {
   display: flex;
   flex-direction: row;
@@ -61,16 +81,16 @@ a {
 
 .switch-label {
   padding: 8px;
-  transition: color 0.4s ease;
+  transition: color 0.3s ease;
   font-size: 8px;
   font-weight: bolder;
 }
 
-.switch-label-on {
+#switch-label-on {
   color: var(--green);
 }
 
-.switch-label-off {
+#switch-label-off {
   color: var(--cold-gray);
 }
 
@@ -98,8 +118,8 @@ a {
   background-color: var(--black-wash);
   border: 1px solid white;
   opacity: 50%;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
   border-radius: 20px;
 }
 
@@ -108,11 +128,11 @@ a {
   content: '';
   height: 16px;
   width: 16px;
-  right: 20px;
+  right: 21px;
   top: 1px;
   background-color: var(--green);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
   border-radius: 50%;
 }
 
@@ -122,9 +142,9 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translateX(18px);
-  -ms-transform: translateX(18px);
-  transform: translateX(18px);
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
 }
 
 input:checked + .switch-label-on {

diff --git a/src/popup.ts b/src/popup.ts
@@ -1,8 +1,22 @@
 import './popup.css'
 
+const truncateString = (
+  inputString: string | null,
+  length: number = 30
+): string => {
+  if (!inputString) {
+    return ''
+  }
+
+  if (inputString.length <= length) {
+    return inputString
+  }
+
+  return `${inputString.slice(0, length - 3)}...`
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   const reloadIcon = document.getElementById('reloadIcon')
-
   if (reloadIcon) {
     reloadIcon.addEventListener('click', () => {
       browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
@@ -18,7 +32,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const statusCheckbox = document.getElementById(
     'statusCheckbox'
   ) as HTMLInputElement
-
   if (statusCheckbox) {
     browser.storage.sync.get(['status']).then((result) => {
       statusCheckbox.checked = result.status || true
@@ -33,20 +46,39 @@ document.addEventListener('DOMContentLoaded', () => {
       if (reloadIcon?.hidden) reloadIcon.hidden = false
     })
   }
-})
 
-const extractDomain = (url: string): string | null => {
-  const match = url.match(/^(?:https?:\/\/)?(?:www\.)?([^/?]+)/)
-  return match ? match[1] : null
-}
+  browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+    const activeTab = tabs[0]
+
+    if (activeTab.url) {
+      const domain = new URL(activeTab.url).hostname
+      const urlElement = document.getElementById('currentDomain')
+      if (urlElement) {
+        urlElement.textContent = truncateString(domain)
+      }
+
+      const whitelistLink = document.getElementById('whitelistLink')
+      if (whitelistLink) {
+        browser.storage.sync.get('whitelist').then((result) => {
+          let whitelist = result.whitelist || []
 
-browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-  const activeTab = tabs[0]
-  if (activeTab.url) {
-    const domain = extractDomain(activeTab.url)
-    const urlElement = document.getElementById('currentDomain')
-    if (urlElement) {
-      urlElement.textContent = domain || ''
+          if (whitelist.includes(domain)) {
+            whitelistLink.textContent = 'REMOVE FROM WHITELIST'
+          }
+
+          whitelistLink.addEventListener('click', () => {
+            if (whitelist.includes(domain)) {
+              whitelist = whitelist.filter((item: string) => item !== domain)
+              whitelistLink.textContent = '+ ADD TO WHITELIST'
+            } else {
+              whitelist.push(domain)
+              whitelistLink.textContent = 'REMOVE FROM WHITELIST'
+            }
+
+            browser.storage.sync.set({ whitelist })
+          })
+        })
+      }
     }
-  }
+  })
 })