block custom url

ginny100 · Dec 31, 2024 · 18d26d8 · 18d26d8
1 parent d5de5f5
commit 18d26d8
Show file tree

Hide file tree

Showing 6 changed files with 274 additions and 94 deletions.
diff --git a/packages/shared/lib/constants/apps.ts b/packages/shared/lib/constants/apps.ts
diff --git a/packages/storage/lib/constants/apps.ts b/packages/storage/lib/constants/apps.ts
@@ -0,0 +1,157 @@
+export interface App {
+  name: string;
+  icon: string;
+  url: string;
+}
+
+export const availableApps: Array<App> = [
+  { name: '9GAG', icon: 'https://www.google.com/s2/favicons?domain=9gag.com&size=32', url: 'https://www.9gag.com' },
+  {
+    name: 'Alibaba',
+    icon: 'https://www.google.com/s2/favicons?domain=alibaba.com&size=32',
+    url: 'https://www.alibaba.com',
+  },
+  {
+    name: 'Amazon',
+    icon: 'https://www.google.com/s2/favicons?domain=amazon.com&size=32',
+    url: 'https://www.amazon.com',
+  },
+  { name: 'BBC', icon: 'https://www.google.com/s2/favicons?domain=bbc.com&size=32', url: 'https://www.bbc.com' },
+  {
+    name: 'BuzzFeed',
+    icon: 'https://www.google.com/s2/favicons?domain=buzzfeed.com&size=32',
+    url: 'https://www.buzzfeed.com',
+  },
+  { name: 'CNN', icon: 'https://www.google.com/s2/favicons?domain=cnn.com&size=32', url: 'https://www.cnn.com' },
+  {
+    name: 'Disney+',
+    icon: 'https://www.google.com/s2/favicons?domain=disneyplus.com&size=32',
+    url: 'https://www.disneyplus.com',
+  },
+  {
+    name: 'Discord',
+    icon: 'https://www.google.com/s2/favicons?domain=discord.com&size=32',
+    url: 'https://www.discord.com',
+  },
+  {
+    name: 'DoorDash',
+    icon: 'https://www.google.com/s2/favicons?domain=doordash.com&size=32',
+    url: 'https://www.doordash.com',
+  },
+  {
+    name: 'Epic Games',
+    icon: 'https://www.google.com/s2/favicons?domain=epicgames.com&size=32',
+    url: 'https://www.epicgames.com',
+  },
+  { name: 'Etsy', icon: 'https://www.google.com/s2/favicons?domain=etsy.com&size=32', url: 'https://www.etsy.com' },
+  {
+    name: 'Facebook',
+    icon: 'https://www.google.com/s2/favicons?domain=facebook.com&size=32',
+    url: 'https://www.facebook.com',
+  },
+  {
+    name: 'Messenger',
+    icon: 'https://www.google.com/s2/favicons?domain=messenger.com&size=32',
+    url: 'https://www.messenger.com',
+  },
+  {
+    name: 'HuffPost',
+    icon: 'https://www.google.com/s2/favicons?domain=huffpost.com&size=32',
+    url: 'https://www.huffpost.com',
+  },
+  { name: 'Hulu', icon: 'https://www.google.com/s2/favicons?domain=hulu.com&size=32', url: 'https://www.hulu.com' },
+  { name: 'Imgur', icon: 'https://www.google.com/s2/favicons?domain=imgur.com&size=32', url: 'https://www.imgur.com' },
+  {
+    name: 'Instagram',
+    icon: 'https://www.google.com/s2/favicons?domain=instagram.com&size=32',
+    url: 'https://www.instagram.com',
+  },
+  {
+    name: 'Kongregate',
+    icon: 'https://www.google.com/s2/favicons?domain=kongregate.com&size=32',
+    url: 'https://www.kongregate.com',
+  },
+  {
+    name: 'LinkedIn',
+    icon: 'https://www.google.com/s2/favicons?domain=linkedin.com&size=32',
+    url: 'https://www.linkedin.com',
+  },
+  {
+    name: 'Miniclip',
+    icon: 'https://www.google.com/s2/favicons?domain=miniclip.com&size=32',
+    url: 'https://www.miniclip.com',
+  },
+  {
+    name: 'Netflix',
+    icon: 'https://www.google.com/s2/favicons?domain=netflix.com&size=32',
+    url: 'https://www.netflix.com',
+  },
+  {
+    name: 'Pinterest',
+    icon: 'https://www.google.com/s2/favicons?domain=pinterest.com&size=32',
+    url: 'https://www.pinterest.com',
+  },
+  { name: 'Quora', icon: 'https://www.google.com/s2/favicons?domain=quora.com&size=32', url: 'https://www.quora.com' },
+  {
+    name: 'Reddit',
+    icon: 'https://www.google.com/s2/favicons?domain=reddit.com&size=32',
+    url: 'https://www.reddit.com',
+  },
+  { name: 'Slack', icon: 'https://www.google.com/s2/favicons?domain=slack.com&size=32', url: 'https://www.slack.com' },
+  {
+    name: 'Snapchat',
+    icon: 'https://www.google.com/s2/favicons?domain=snapchat.com&size=32',
+    url: 'https://www.snapchat.com',
+  },
+  {
+    name: 'Spotify',
+    icon: 'https://www.google.com/s2/favicons?domain=spotify.com&size=32',
+    url: 'https://www.spotify.com',
+  },
+  {
+    name: 'Steam',
+    icon: 'https://www.google.com/s2/favicons?domain=steampowered.com&size=32',
+    url: 'https://store.steampowered.com',
+  },
+  {
+    name: 'Telegram',
+    icon: 'https://www.google.com/s2/favicons?domain=telegram.org&size=32',
+    url: 'https://www.telegram.org',
+  },
+  {
+    name: 'TikTok',
+    icon: 'https://www.google.com/s2/favicons?domain=tiktok.com&size=32',
+    url: 'https://www.tiktok.com',
+  },
+  {
+    name: 'Tumblr',
+    icon: 'https://www.google.com/s2/favicons?domain=tumblr.com&size=32',
+    url: 'https://www.tumblr.com',
+  },
+  { name: 'Twitch', icon: 'https://www.google.com/s2/favicons?domain=twitch.tv&size=32', url: 'https://www.twitch.tv' },
+  {
+    name: 'Twitter',
+    icon: 'https://www.google.com/s2/favicons?domain=twitter.com&size=32',
+    url: 'https://www.twitter.com',
+  },
+  {
+    name: 'Uber Eats',
+    icon: 'https://www.google.com/s2/favicons?domain=ubereats.com&size=32',
+    url: 'https://www.ubereats.com',
+  },
+  {
+    name: 'Walmart',
+    icon: 'https://www.google.com/s2/favicons?domain=walmart.com&size=32',
+    url: 'https://www.walmart.com',
+  },
+  {
+    name: 'WhatsApp',
+    icon: 'https://www.google.com/s2/favicons?domain=whatsapp.com&size=32',
+    url: 'https://www.whatsapp.com',
+  },
+  {
+    name: 'Youtube',
+    icon: 'https://www.google.com/s2/favicons?domain=youtube.com&size=32',
+    url: 'https://www.youtube.com',
+  },
+] as const;
diff --git a/packages/storage/lib/impl/zenStorage.ts b/packages/storage/lib/impl/zenStorage.ts
@@ -1,6 +1,7 @@
 import { StorageEnum } from '../base/enums';
 import { createStorage } from '../base/base';
 import type { BaseStorage } from '../base/types';
+import { type App } from '../constants/apps';
 
 export enum ZenTimerState {
   Focus = 'focus',
@@ -17,7 +18,7 @@ export interface ZenSettings {
   sessions: number;
   focusMinutes: number;
   breakMinutes: number;
-  blockedApps: string[];
+  blockedApps: App[];
   timerActive: boolean;
   currentSession: number;
   timerState: ZenTimerState;
@@ -29,8 +30,8 @@ export type ZenStorage = BaseStorage<ZenSettings> & {
   updateSessions: (sessions: number) => Promise<void>;
   updateFocusMinutes: (minutes: number) => Promise<void>;
   updateBreakMinutes: (minutes: number) => Promise<void>;
-  addBlockedApp: (appName: string) => Promise<void>;
-  removeBlockedApp: (appName: string) => Promise<void>;
+  addBlockedApp: (app: App) => Promise<boolean>;
+  removeBlockedApp: (appUrl: string) => Promise<void>;
   updateTimerState: (
     timerState: Partial<Pick<ZenSettings, 'timerActive' | 'currentSession' | 'timerState' | 'timeLeft'>>,
   ) => Promise<void>;
@@ -73,16 +74,23 @@ export const zenStorage: ZenStorage = {
       breakMinutes: minutes,
     }));
   },
-  addBlockedApp: async (appName: string) => {
-    await storage.set(current => ({
-      ...current,
-      blockedApps: [...current.blockedApps, appName],
-    }));
+  addBlockedApp: async (app: App) => {
+    // only add if not in blockedApps
+    const alreadyExists = (await storage.get()).blockedApps.some(blockedApp => blockedApp.url === app.url);
+    if (!alreadyExists) {
+      await storage.set(current => ({
+        ...current,
+        blockedApps: [...current.blockedApps, app],
+      }));
+      return true;
+    } else {
+      return false;
+    }
   },
-  removeBlockedApp: async (appName: string) => {
+  removeBlockedApp: async (appUrl: string) => {
     await storage.set(current => ({
       ...current,
-      blockedApps: current.blockedApps.filter(app => app !== appName),
+      blockedApps: current.blockedApps.filter(app => app.url !== appUrl),
     }));
   },
   updateTimerState: async (

diff --git a/packages/storage/tsconfig.json b/packages/storage/tsconfig.json
@@ -3,7 +3,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "types": ["chrome"]
+    "types": ["chrome"],
+    "paths": {
+      "@extension/shared/*": ["../shared/*"]
+    }
   },
   "include": ["index.ts", "lib"]
 }
diff --git a/pages/content-ui/src/App.tsx b/pages/content-ui/src/App.tsx
@@ -1,4 +1,3 @@
-import { availableApps } from '@extension/shared/lib/constants/apps';
 import { useStorage } from '@extension/shared';
 import { zenStorage, ZenTimerState } from '@extension/storage';
 import { useEffect, useMemo } from 'react';
@@ -11,12 +10,28 @@ export default function App() {
     console.log('content-ui: 🎭 App component loaded ');
   }, []);
 
+  const normalizeUrl = (url: string) => {
+    return url
+      .replace(/^https?:\/\//, '')
+      .replace(/^www\./, '')
+      .toLowerCase();
+  };
+
   const shouldBlock = useMemo(() => {
-    const currentAppName = availableApps.find(app => app.url === window.location.origin)?.name;
-    if (!currentAppName) return false;
-    console.log('content-ui: 🎭 current App Name is ', currentAppName);
-    console.log('content-ui: 🎭 blockedApps = ', zenSettings?.blockedApps);
-    return zenSettings?.timerState === ZenTimerState.Focus && zenSettings?.blockedApps.includes(currentAppName);
+    const currentOrigin = window.location.origin;
+    const rootOrigin = new URL(currentOrigin).hostname.split('.').slice(-2).join('.');
+    const origins = [rootOrigin, currentOrigin];
+
+    return origins.some(origin => {
+      const normalizedOrigin = normalizeUrl(origin);
+      return (
+        zenSettings?.timerState === ZenTimerState.Focus &&
+        zenSettings?.blockedApps.some(app => {
+          const normalizedAppUrl = normalizeUrl(app.url);
+          return normalizedAppUrl === normalizedOrigin;
+        })
+      );
+    });
   }, [zenSettings]);
 
   useEffect(() => {