Add Google and Github authentication.

package.json

@@ -13,6 +13,7 @@
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
+    "firebase": "^11.2.0",
     "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "normalize.css": "^8.0.1",

public/auth.js

@@ -0,0 +1,6 @@
+window.addEventListener('message', (event) => {
+  if (event.data.type === 'TOKEN_RECEIVED') {
+    // Forward to content script
+    window.postMessage(event.data, '*')
+  }
+})

public/background.js

@@ -1,9 +1,4 @@
-/*chrome.browserAction.onClicked.addListener(function (tab) {
-  chrome.tabs.create({ url: "chrome://newtab" });
-}
-);*/
-
 const uninstallUrl = `https://hackertab.dev/uninstall.html`
 if (chrome.runtime.setUninstallURL) {
   chrome.runtime.setUninstallURL(uninstallUrl)
-}
+}

public/base.manifest.json

@@ -1,10 +1,19 @@
 {
+  "manifest_version": 3,
   "name": "Hackertab.dev - developer news",
   "description": "All developer news in one tab",
   "version": "1.20.1",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
+  "host_permissions": ["https://*.hackertab.dev/*"],
+  "content_scripts": [
+    {
+      "matches": ["http://127.0.0.1:5173/*", "http://localhost:5173/*", "https://hackertab.dev/*"],
+      "run_at": "document_start",
+      "js": ["content.js"]
+    }
+  ],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",

public/chrome.manifest.json

@@ -1,7 +1,5 @@
 {
-  "manifest_version": 3,
   "background": {
     "service_worker": "background.js"
-  },
-  "host_permissions": ["https://*.hackertab.dev/*"]
+  }
 }

public/content.js

@@ -0,0 +1,12 @@
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('auth.js')
+document.documentElement.appendChild(script)
+
+// Listen for messages from the injected script
+window.addEventListener('message', (event) => {
+  if (event.source !== window || !event.data || event.data.type !== 'TOKEN_RECEIVED') {
+    return
+  }
+
+  chrome.runtime.sendMessage({ ...event.data })
+})

public/firefox.manifest.json

@@ -1,17 +1,5 @@
 {
-    "manifest_version": 2,
-    "background": {
-      "scripts": [
-        "background.js"
-      ]
-    },
-    "permissions": [
-      "https://*.hackertab.dev/*"
-    ],
-    "content_security_policy": "script-src 'self' object-src 'self'",
-    "applications": {
-      "gecko": {
-        "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"
-      }
-    }
-  }
+  "background": {
+    "scripts": ["background.js"]
+  }
+}

src/assets/App.css

@@ -122,44 +122,25 @@ a {
 }
 
 .extras {
-  display: none;
-  flex-direction: row;
-  align-content: center;
   order: 2;
 }
 
-.extraBtn {
-  background-color: var(--button-background-color);
-  color: var(--button-text-color);
-  margin-left: 8px;
-  height: 40px;
-  width: 40px;
-  line-height: 44px;
-  font-size: 18px;
-  text-align: center;
-  border: 0;
-  border-radius: 20px;
-  cursor: pointer;
-  position: relative;
+.buttonsFlex {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.extraBtn:first-child {
-  margin-left: 0;
+  flex-direction: row;
+  align-content: center;
+  column-gap: 8px;
+  row-gap: 8px;
 }
 
-.extraTextBtn {
-  padding: 0 16px;
-  width: auto;
-  min-width: 40px;
+.dndButton {
   font-weight: bold;
 }
 
-.darkModeBtn {
-  background-color: var(--dark-mode-background-color);
-  color: var(--dark-mode-text-color);
+.profileImage {
+  height: 40px;
+  width: 40px;
+  border-radius: 20px;
 }
 
 .badgeCount {
@@ -1198,10 +1179,6 @@ Producthunt item
     position: relative;
   }
 
-  .extras {
-    display: block;
-  }
-
   .scrollButton {
     align-items: center;
     display: flex;
@@ -1349,6 +1326,135 @@ Producthunt item
   color: var(--primary-text-color);
   border-radius: 10px;
 }
+
+.dangerToast {
+  background-color: #ff4d4f;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
+.successToast {
+  background-color: #52c41a;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
 .capitalize {
   text-transform: capitalize;
 }
+
+/**
+Modal
+**/
+
+.Modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 650px;
+  background-color: var(--card-background-color);
+  padding: 24px;
+  border-radius: 10px;
+  box-shadow: 0 0 20px #00000052;
+  z-index: 3;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--overlay-background-color);
+  backdrop-filter: blur(2px);
+}
+
+.modalHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.modalTitle {
+  margin: 0;
+  padding: 0;
+  color: var(--primary-text-color);
+  font-size: 1.3em;
+  display: inline-flex;
+  width: 100%;
+  column-gap: 8px;
+  align-items: center;
+}
+.modalCloseBtn {
+  align-items: center;
+  position: absolute;
+  background-color: transparent;
+  border-radius: 50%;
+  top: 0;
+  right: 0;
+  border: none;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+.modalCloseBtn:hover {
+  opacity: 0.7;
+}
+.settingContent .form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingContent input[type='text'] {
+  flex: 1;
+  background-color: var(--settings-input-background-color);
+  border: 1px solid var(--settings-input-border-color);
+  border-radius: 50px;
+  padding: 6px 18px;
+  color: var(--settings-input-text-color);
+  font-size: 14px;
+}
+
+.settingContent input[type='text']::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--settings-input-placeholder-color);
+  opacity: 1;
+  font-size: 14px;
+}
+
+.settingContent input[type='text']:focus {
+  border-color: var(--settings-input-border-focus-color);
+}
+@media (max-width: 768px) {
+  .Modal {
+    left: 0;
+    top: 0;
+    margin: 0;
+    height: 100vh;
+    max-height: 100vh;
+    transform: translate(0, 0);
+    border-radius: 0;
+    position: relative;
+    box-shadow: none;
+    width: auto;
+  }
+  .settingContent {
+    margin-top: 6px;
+  }
+  .settingRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

src/assets/variables.css

@@ -31,7 +31,9 @@ html.dark {
 
   /** Buttons **/
   --button-background-color: #1c2026;
+  --button-hover-background-color: #181c21;
   --button-text-color: #fff;
+  --button-hover-text-color: #d0d0d0;
 
   /**Card **/
   --card-background-color: #0d1116;
@@ -117,6 +119,8 @@ html.light {
 
   --button-background-color: #d2deeb;
   --button-text-color: #3c5065;
+  --button-hover-background-color: #b9cadc;
+  --button-hover-text-color: #3c5065;
 
   /**Card **/
   --card-background-color: #ffffff;