14 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/searchBar.tsx:
--------------------------------------------------------------------------------
1 | import { useApp } from "../../../providers/app_provider";
2 | import "./searchBar.css";
3 |
4 | export const SearchBar = () => {
5 | const { searchTerm, setSearchTerm } = useApp();
6 |
7 | return (
8 | {label}
16 |
9 | setSearchTerm(e.target.value)}
14 | className="search-input"
15 | />
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/header.css:
--------------------------------------------------------------------------------
1 | .declutter-header {
2 | text-align: center;
3 | padding: 10px;
4 | color: var(--text-secondary);
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | }
10 |
11 | .header-icon {
12 | width: 25px;
13 | height: 25px;
14 | margin-bottom: 10px;
15 | background-color: var(--text-primary);
16 | color: var(--bg-primary);
17 | display: inline-flex;
18 | justify-content: center;
19 | align-items: center;
20 | border-radius: 50%;
21 | }
22 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | -
12 |
- Sidebar App 13 |
- Popup App 14 |
- Tutorial App 15 |
7 |
18 | );
19 | };
20 |
21 | export default SenderLineSkeleton;
22 |
--------------------------------------------------------------------------------
/src/domain/repositories/page_interaction_repo.ts:
--------------------------------------------------------------------------------
1 | export interface PageInteractionRepo {
2 | /**
3 | * Retrieves the Gmail account associated with the currently active browser tab.
4 | *
5 | * @returns {Promise
8 |
9 |
14 |
10 |
13 |
15 |
17 |
8 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "isolatedModules": true,
14 | "moduleDetection": "force",
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 |
18 | /* Linting */
19 | "strict": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "noUncheckedSideEffectImports": true
24 | },
25 | "include": ["src"]
26 | }
27 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/themeToggle.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useTheme } from "../../../providers/theme_provider";
3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 | import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
5 | import "./themeToggle.css";
6 |
7 | const ThemeToggle: React.FC = () => {
8 | const { theme, toggleTheme } = useTheme();
9 |
10 | return (
11 |
21 | );
22 | };
23 |
24 | export default ThemeToggle;
25 |
--------------------------------------------------------------------------------
/src/presentation/providers/theme_context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | export type ThemeMode = "light" | "dark";
4 | export type ThemeSetting = ThemeMode | "system";
5 |
6 | export interface ThemeContextType {
7 | theme: ThemeMode;
8 | setting: ThemeSetting;
9 | setSetting: (s: ThemeSetting) => void;
10 | toggleTheme: () => void;
11 | resetToSystem: () => void;
12 | }
13 |
14 | export const defaultThemeContext: ThemeContextType = {
15 | theme: "light",
16 | setting: "system",
17 | setSetting: () => console.warn("ThemeProvider not initialized"),
18 | toggleTheme: () => console.warn("ThemeProvider not initialized"),
19 | resetToSystem: () => console.warn("ThemeProvider not initialized"),
20 | };
21 |
22 | export const ThemeContext =
23 | createContext
9 |
21 | No senders yet
10 |Load senders to get started
11 |
12 |
19 |
20 |
20 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/loadingBar.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import "./loadingBar.css";
3 |
4 | const LoadingBar = () => {
5 | // const [progress, setProgress] = useState(0);
6 | // const { checkFetchProgress } = useApp();
7 |
8 | useEffect(() => {
9 | // Check progress every 500ms
10 | // const interval = setInterval(() => checkFetchProgress(setProgress), 500);
11 | // Clean up the interval when the component unmounts
12 | // return () => clearInterval(interval);
13 | });
14 |
15 | return (
16 |
21 |
23 | {email}
24 |
17 |
28 | );
29 | };
30 |
31 | export default LoadingBar;
32 |
--------------------------------------------------------------------------------
/src/presentation/apps/tutorial/Tutorial.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import "./Tutorial.css";
3 | import { Step1, Step2, Step3, Success, WelcomeStep } from "./components/steps";
4 | import { Modal } from "./components/modal";
5 |
6 | const Tutorial = () => {
7 | const [step, setStep] = useState(0);
8 |
9 | const handleNext = () => {
10 | setStep(step + 1);
11 | };
12 |
13 | return (
14 |
18 |
26 |
27 |
16 | {step === 0 ? (
17 |
28 |
22 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/extras/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/data/repositories/mocks/mock_storage_repo.ts:
--------------------------------------------------------------------------------
1 | import { StorageRepo } from "../../../domain/repositories/storage_repo";
2 | import { Sender } from "../../../domain/entities/sender";
3 |
4 | export class MockStorageRepo implements StorageRepo {
5 | private mockSenders: Sender[] = [];
6 |
7 | constructor(initialSenders: Sender[] = this.mockSenders) {
8 | this.mockSenders = initialSenders;
9 | }
10 |
11 | setSenders(senders: Sender[]) {
12 | this.mockSenders = senders;
13 | }
14 |
15 | // - Mock implementations -
16 |
17 | storeSenders(senders: Sender[], accountEmail: string): Promise
16 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/presentation/apps/popup/Popup.css:
--------------------------------------------------------------------------------
1 | @media (prefers-color-scheme: dark) {
2 | :root {
3 | --bg-primary: #1a1a1a;
4 | --text-primary: #f0f0f0;
5 | --button-bg: #333;
6 | --border-color: #444;
7 | --link-color: #9dbdff;
8 | }
9 | }
10 |
11 | @media (prefers-color-scheme: light) {
12 | :root {
13 | --bg-primary: #fff;
14 | --text-primary: #000;
15 | --button-bg: #f0f0f0;
16 | --border-color: #e0e0e0;
17 | --link-color: #1a0dab;
18 | }
19 | }
20 |
21 | * {
22 | background-color: var(--bg-primary);
23 | color: var(--text-primary);
24 | box-sizing: border-box;
25 | margin: 0;
26 | padding: 0;
27 | }
28 |
29 | .popup-content {
30 | background-color: var(--bg-primary);
31 | color: var(--text-primary);
32 | padding: 15px 0;
33 | margin: 0 20px;
34 | width: 300px;
35 | text-align: center;
36 | }
37 |
38 | .version-info {
39 | margin-top: 10px;
40 | font-size: 0.85rem;
41 | }
42 |
43 | .open-gmail-button {
44 | padding: 15px 30px;
45 | font-size: 0.95rem;
46 | background-color: #233b86;
47 | color: white;
48 | font-weight: bold;
49 | border: none;
50 | border-radius: 20px;
51 | cursor: pointer;
52 | display: flex;
53 | align-items: center;
54 | gap: 8px;
55 | }
56 |
57 | .open-gmail-button img {
58 | background-color: #233b86;
59 | }
60 |
61 | .open-gmail-button:hover {
62 | background-color: #1a4c9b;
63 | }
64 |
65 | a {
66 | color: var(--link-color);
67 | }
68 |
69 | .spacer {
70 | height: 5px;
71 | }
72 |
--------------------------------------------------------------------------------
/.github/workflows/lint-test.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: lint & test
3 |
4 | on:
5 | push:
6 | branches: [main]
7 | pull_request:
8 | branches: [main]
9 |
10 | jobs:
11 | lint:
12 | name: lint
13 | runs-on: ubuntu-latest
14 | steps:
15 | - name: Checkout Code
16 | uses: actions/checkout@v4
17 | with:
18 | fetch-depth: 0
19 |
20 | - name: Install dependencies
21 | run: npm ci
22 |
23 | - name: Lint Code Base
24 | uses: super-linter/super-linter/slim@v7
25 | env:
26 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
27 | VALIDATE_CHECKOV: false
28 | VALIDATE_JAVASCRIPT_STANDARD: false
29 | VALIDATE_TYPESCRIPT_STANDARD: false
30 | VALIDATE_MARKDOWN: false
31 | VALIDATE_JSON: false
32 | VALIDATE_NATURAL_LANGUAGE: false
33 | VALIDATE_JSCPD: false
34 | LINTER_RULES_PATH: .
35 | JAVASCRIPT_ES_CONFIG_FILE: eslint.config.js
36 | TYPESCRIPT_ES_CONFIG_FILE: eslint.config.js
37 |
38 | test:
39 | name: test
40 | runs-on: ubuntu-latest
41 | steps:
42 | - name: Checkout code
43 | uses: actions/checkout@v4
44 |
45 | - name: Set up Node.js
46 | uses: actions/setup-node@v4
47 | with:
48 | node-version: "20"
49 |
50 | - name: Install dependencies
51 | run: |
52 | npm install
53 |
54 | - name: Run Jest tests
55 | run: |
56 | npm test
57 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from "@eslint/js";
2 | import globals from "globals";
3 | import reactHooks from "eslint-plugin-react-hooks";
4 | import reactRefresh from "eslint-plugin-react-refresh";
5 | import tseslint from "typescript-eslint";
6 |
7 | export default tseslint.config(
8 | { ignores: ["dist"] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ["**/*.{ts,tsx}"],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | "react-hooks": reactHooks,
18 | "react-refresh": reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | "react-refresh/only-export-components": [
23 | "warn",
24 | { allowConstantExport: true },
25 | ],
26 | "@typescript-eslint/no-explicit-any": "off",
27 | "@typescript-eslint/no-unused-expressions": [
28 | "error",
29 | {
30 | allowShortCircuit: true,
31 | allowTernary: true,
32 | allowTaggedTemplates: true,
33 | },
34 | ],
35 | "@typescript-eslint/no-unused-vars": [
36 | "error",
37 | {
38 | args: "all",
39 | argsIgnorePattern: "^_",
40 | caughtErrors: "all",
41 | caughtErrorsIgnorePattern: "^_",
42 | destructuredArrayIgnorePattern: "^_",
43 | varsIgnorePattern: "^_",
44 | },
45 | ],
46 | },
47 | },
48 | );
49 |
--------------------------------------------------------------------------------
/src/data/repositories/chrome_page_interaction_repo.ts:
--------------------------------------------------------------------------------
1 | import { PageInteractionRepo } from "../../domain/repositories/page_interaction_repo";
2 |
3 | export class ChromePageInteractionRepo implements PageInteractionRepo {
4 | async getActiveTabEmailAccount(): Promise
17 |
26 |
27 | Scanning inbox...
18 | 25 |
28 |
29 | Page {progress.currentPage} of {progress.totalPages}
30 |
31 |
32 | {progress.processedEmails.toLocaleString()} emails processed
33 |
34 |
35 |
36 |
37 |
41 |
42 |
43 | {progress.percentage}%
44 |
13 | {fetchProgress ? (
14 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/actionButton.tsx:
--------------------------------------------------------------------------------
1 | import "./actionButton.css";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { faBan, faTrash } from "@fortawesome/free-solid-svg-icons";
4 | import { IconProp } from "@fortawesome/fontawesome-svg-core";
5 | import { useModal } from "../providers/modalContext";
6 | import { useApp } from "../../../providers/app_provider";
7 |
8 | export const ActionButton = ({ id }: { id: string }) => {
9 | const text: string = id == "unsubscribe-button" ? "Unsubscribe" : "Delete";
10 | const icon: IconProp = id == "unsubscribe-button" ? faBan : faTrash;
11 | const { selectedSenders } = useApp();
12 | const { setModal } = useModal();
13 |
14 | const handleClick = () => {
15 | const selectedSenderKeys: string[] = Object.keys(selectedSenders);
16 | if (selectedSenderKeys.length > 0) {
17 | // open confirmation modal
18 | setModal({
19 | action: id === "unsubscribe-button" ? "unsubscribe" : "delete",
20 | type: "confirm",
21 | extras: {
22 | emailsNum: selectedSenderKeys.reduce(
23 | (sum, key) => sum + selectedSenders[key],
24 | 0,
25 | ),
26 | sendersNum: selectedSenderKeys.length,
27 | },
28 | });
29 | } else {
30 | // open no-senders modal
31 | setModal({ type: "no-sender" });
32 | }
33 | };
34 |
35 | return (
36 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/presentation/apps/sidebar/components/senderLine.tsx:
--------------------------------------------------------------------------------
1 | import "./senderLine.css";
2 | import { useApp } from "../../../providers/app_provider";
3 |
4 | interface SenderLineProps {
5 | senderName: string;
6 | senderEmail: string;
7 | senderCount: number;
8 | }
9 |
10 | export const SenderLine = ({
11 | senderName,
12 | senderEmail,
13 | senderCount,
14 | }: SenderLineProps) => {
15 | const { selectedSenders, setSelectedSenders, searchEmailSenders } = useApp();
16 |
17 | const selectLine = () => {
18 | setSelectedSenders((prev) => {
19 | const newSelected = { ...prev };
20 | if (!(senderEmail in newSelected)) {
21 | newSelected[senderEmail] = senderCount;
22 | } else {
23 | delete newSelected[senderEmail];
24 | }
25 | return newSelected;
26 | });
27 | };
28 |
29 | return (
30 |
30 |
32 | ) : (
33 | No senders match "{searchTerm}"
31 |
37 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from "@playwright/test";
2 |
3 | /**
4 | * Read environment variables from file.
5 | * https://github.com/motdotla/dotenv
6 | */
7 | // import dotenv from 'dotenv';
8 | // import path from 'path';
9 | // dotenv.config({ path: path.resolve(__dirname, '.env') });
10 |
11 | /**
12 | * See https://playwright.dev/docs/test-configuration.
13 | */
14 | export default defineConfig({
15 | testDir: "./test/ui",
16 | /* Run tests in files in parallel */
17 | fullyParallel: true,
18 | /* Fail the build on CI if you accidentally left test.only in the source code. */
19 | forbidOnly: !!process.env.CI,
20 | /* Retry on CI only */
21 | retries: process.env.CI ? 2 : 0,
22 | /* Opt out of parallel tests on CI. */
23 | workers: process.env.CI ? 1 : undefined,
24 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
25 | reporter: "html",
26 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
27 | use: {
28 | /* Base URL to use in actions like `await page.goto('/')`. */
29 | baseURL: "http://localhost:5173",
30 |
31 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32 | trace: "on-first-retry",
33 | },
34 |
35 | /* Configure projects for major browsers */
36 | projects: [
37 | {
38 | name: "Google Chrome",
39 | use: {
40 | ...devices["Desktop Chrome"],
41 | channel: "chrome",
42 | viewport: { width: 360, height: 890 },
43 | },
44 | },
45 | ],
46 |
47 | /* Run your local dev server before starting the tests */
48 | webServer: {
49 | command: "npm run dev",
50 | url: "http://localhost:5173",
51 | reuseExistingServer: !process.env.CI,
52 | },
53 | });
54 |
--------------------------------------------------------------------------------
/public/background.js:
--------------------------------------------------------------------------------
1 | const GMAIL_ORIGIN = "https://mail.google.com";
2 |
3 | // Allows users to open the side panel by clicking on the action toolbar icon
4 | chrome.sidePanel
5 | .setPanelBehavior({ openPanelOnActionClick: true })
6 | .catch((error) => console.error(error));
7 |
8 | chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
9 | if (!tab.url) return;
10 | const url = new URL(tab.url);
11 | if (url.origin === GMAIL_ORIGIN) {
12 | // Enables the side panel and disables popup on Gmail pages
13 | await chrome.sidePanel.setOptions({
14 | tabId,
15 | path: "sidebar/index.html",
16 | enabled: true,
17 | });
18 | await chrome.action.setPopup({ tabId, popup: "" });
19 | } else {
20 | // Disables the side panel and enables popup on all other sites
21 | await chrome.sidePanel.setOptions({
22 | tabId,
23 | enabled: false,
24 | });
25 | chrome.action.setPopup({ tabId, popup: "popup/index.html" });
26 | }
27 | });
28 |
29 | // Shows a tutorial when the extension is installed
30 | chrome.runtime.onInstalled.addListener(function (object) {
31 | if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
32 | chrome.tabs.create({ url: "https://mail.google.com/" }, function (tab) {
33 | // Wait for the tab to finish loading before sending the message
34 | function handleUpdated(tabId, info) {
35 | if (tabId === tab.id && info.status === "complete") {
36 | chrome.tabs.sendMessage(tab.id, { action: "SHOW_TUTORIAL" });
37 | chrome.tabs.onUpdated.removeListener(handleUpdated);
38 | }
39 | }
40 | chrome.tabs.onUpdated.addListener(handleUpdated);
41 | });
42 | }
43 | });
44 |
45 | // Shows an uninstall survey when extension is removed
46 | chrome.runtime.setUninstallURL("https://tally.so/r/w4yg5X");
47 |
--------------------------------------------------------------------------------
/src/data/repositories/chrome_local_storage_repo.ts:
--------------------------------------------------------------------------------
1 | import { Sender } from "../../domain/entities/sender";
2 | import { StorageRepo } from "../../domain/repositories/storage_repo";
3 |
4 | export class ChromeLocalStorageRepo implements StorageRepo {
5 | async storeSenders(senders: Sender[], accountEmail: string): Promise
38 |
55 |
39 |
44 |
45 |
46 | {senderName}
47 | searchEmailSenders([senderEmail])}
50 | >
51 | {senderEmail}
52 |
53 |
54 |
56 | {senderCount}
57 |
58 |
32 |
52 |
35 |
45 |
46 |
36 |
39 |
40 |
41 |
44 |
16 |
68 | );
69 | };
70 |
71 | export default PopupApp;
72 |
--------------------------------------------------------------------------------
/test/ui/sidebar/delete.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from "@playwright/test";
2 | import { selectAliceBob, setupSidebarTest } from "./helpers";
3 |
4 | test.describe("UI tests for Epic 2 - Delete Functionality", () => {
5 | const logs: string[] = [];
6 |
7 | test.beforeEach(async ({ page }) => {
8 | await setupSidebarTest(page, logs);
9 | });
10 |
11 | test("2.1 - shows delete confirmation popup with correct counts and buttons", async ({
12 | page,
13 | }) => {
14 | // Select two senders
15 | await selectAliceBob(page, "delete");
16 |
17 | const modal = page.locator("#delete-confirm-modal");
18 | await expect(modal).toBeVisible();
19 | await expect(modal).toContainText("2 sender(s)");
20 | await expect(modal).toContainText("110 email(s)");
21 | await expect(
22 | page.getByRole("button", { name: "Show all emails" }),
23 | ).toBeVisible();
24 | await expect(page.getByRole("button", { name: "Delete" })).toBeVisible();
25 | });
26 |
27 | test("2.2 - “Show all senders” opens Gmail search, modal persists", async ({
28 | page,
29 | }) => {
30 | // select two senders
31 | await selectAliceBob(page, "delete");
32 |
33 | // click "Show all emails" button
34 | await page.getByRole("button", { name: "Show all emails" }).click();
35 |
36 | // check that the search function was called
37 | expect(logs).toContain(
38 | "[MOCK] Searching email senders: [alice@email.com, bob@email.com]",
39 | );
40 |
41 | // check that the modal is still visible
42 | const modal = page.locator("#delete-confirm-modal");
43 | await expect(modal).toBeVisible();
44 | });
45 |
46 | test("2.3 - clicking “Confirm” triggers deletion", async ({ page }) => {
47 | // Select two senders
48 | await selectAliceBob(page, "delete");
49 |
50 | // Confirm deletion
51 | await page.getByRole("button", { name: "Confirm" }).click();
52 |
53 | // "Success" modal appears at the end
54 | const modal = page.locator("#delete-success-modal");
55 | await expect(modal).toBeVisible();
56 |
57 | // Delete function was called with correct senders
58 | expect(logs).toContain(
59 | "[MOCK] Deleting senders: [alice@email.com, bob@email.com]",
60 | );
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/test/ui/sidebar/helpers.ts:
--------------------------------------------------------------------------------
1 | import { Page } from "@playwright/test";
2 |
3 | export const selectAliceBob = async (
4 | page: Page,
5 | action: "delete" | "unsubscribe",
6 | ) => {
7 | // Helper function to select Alice and Bob senders, then click action
8 | await page
9 | .locator("div")
10 | .filter({ hasText: /^Alicealice@email\.com32$/ })
11 | .getByRole("checkbox")
12 | .check();
13 | await page
14 | .locator("div")
15 | .filter({ hasText: /^Bobbob@email\.com78$/ })
16 | .getByRole("checkbox")
17 | .check();
18 | await page.click(`#${action}-button`);
19 | };
20 |
21 | export const selectEveFrank = async (
22 | page: Page,
23 | action: "delete" | "unsubscribe",
24 | ) => {
25 | // Helper function to select Eve and Frank senders, then click action
26 | await page
27 | .locator("div")
28 | .filter({ hasText: /^Eveeve@email\.com49$/ })
29 | .getByRole("checkbox")
30 | .check();
31 | await page
32 | .locator("div")
33 | .filter({ hasText: /^Frankfrank@email\.com12$/ })
34 | .getByRole("checkbox")
35 | .check();
36 | await page.click(`#${action}-button`);
37 | };
38 |
39 | export const setupSidebarTest = async (page: Page, logs: string[]) => {
40 | await page.goto("/presentation/apps/sidebar/");
41 |
42 | logs.length = 0; // reset logs before each test
43 | page.on("console", (msg) => logs.push(msg.text()));
44 |
45 | // Load senders
46 | await page.locator("#load-senders").click();
47 | };
48 |
49 | export const waitForProgressToComplete = async (
50 | page: Page,
51 | timeout = 10000,
52 | ) => {
53 | // Wait for progress bar to appear and then disappear
54 | await page.waitForSelector(".fetch-progress-container", {
55 | state: "visible",
56 | timeout: 5000,
57 | });
58 |
59 | await page.waitForSelector(".fetch-progress-container", {
60 | state: "hidden",
61 | timeout,
62 | });
63 | };
64 |
65 | export const getProgressPercentage = async (page: Page): PromiseInboxWhiz
17 |Manage your inbox effortlessly with InboxWhiz!
18 | 19 | 37 | 38 |
39 |
63 |
64 | 40 | Need help? Have suggestions?{" "} 41 | 42 | Contact Us 43 | 44 |
45 | 46 |47 | Support Development:{" "} 48 | 49 | Donate Here 50 | 51 | 💖 52 |
53 | 54 |55 | Loved the tool? {" "} 56 | 57 | Leave a Review 58 | 59 | ⭐ 60 |
61 | 62 |
65 |
67 | Version {version}
66 |
42 | ![Welcome]({getAssetUrl("images/icon-128.png",)
48 |
54 | );
55 | };
56 |
57 | export const Step1 = ({ onNext }: { onNext: () => void }) => {
58 | return (
59 |
48 | Welcome to InboxWhiz!
49 |Declutter your Gmail in seconds.
50 | 53 |
60 | ![Extension icon demo]({getAssetUrl("assets/extension-button.png")})
69 |
72 |
73 | );
74 | };
75 |
76 | export const Step2 = ({ onNext }: { onNext: () => void }) => {
77 | return (
78 | 61 | Go to Gmail and click the InboxWhiz icon 62 |
63 |
69 |
72 |
79 | ![Top Senders]({getAssetUrl("assets/top-senders.gif")})
86 |
89 |
90 | );
91 | };
92 |
93 | export const Step3 = ({ onNext }: { onNext: () => void }) => {
94 | return (
95 | See your top senders
80 |
86 |
89 |
96 | ![Unsubscribe]({getAssetUrl("assets/unsubscribe.gif")})
105 |
108 |
109 | );
110 | };
111 |
112 | export const Success = () => {
113 | return (
114 | 97 | Click Delete or Unsubscribe to clean up your inbox 98 |
99 |
105 |
108 |
115 |
147 | );
148 | };
149 |
--------------------------------------------------------------------------------
/src/data/content_scripts/content.ts:
--------------------------------------------------------------------------------
1 | // src/data/content_scripts/content.ts
2 | import { BrowserEmailService } from "../services/browser_email_service";
3 | import { PageInteractionService } from "../services/page_interaction_service";
4 |
5 | let currentAbortController: AbortController | null = null;
6 |
7 | // Establish connection with the side panel
8 | chrome.runtime.onConnect.addListener(function (port) {
9 | console.assert(port.name === "gmail-port");
10 | port.postMessage({ message: "Content script connected" });
11 |
12 | port.onMessage.addListener(function (msg) {
13 | console.log("sidepanel said: ", msg);
14 |
15 | if (msg.action === "FETCH_SENDERS") {
16 | fetchSenders(port);
17 | } else if (msg.action === "DELETE_SENDERS") {
18 | deleteSenders(port, msg.emails);
19 | } else if (msg.action === "UNSUBSCRIBE_SENDERS") {
20 | unsubscribeSenders(port, msg.emails);
21 | } else if (msg.action === "BLOCK_SENDER") {
22 | blockSender(port, msg.email);
23 | } else if (msg.action === "CANCEL_FETCH") {
24 | if (currentAbortController) {
25 | currentAbortController.abort();
26 | console.log("Fetch cancelled by user");
27 | }
28 | }
29 | });
30 | });
31 |
32 | async function fetchSenders(port: chrome.runtime.Port) {
33 | try {
34 | // Create new abort controller for this fetch
35 | currentAbortController = new AbortController();
36 |
37 | const senders = await BrowserEmailService.fetchSendersFromBrowser({
38 | onProgress: (progress) => {
39 | // Send progress updates to the side panel
40 | port.postMessage({
41 | action: "FETCH_PROGRESS",
42 | progress,
43 | });
44 | },
45 | batchSize: 10,
46 | signal: currentAbortController.signal,
47 | });
48 |
49 | const serialized = senders.map((sender) => ({
50 | email: sender.email,
51 | names: Array.from(sender.names), // convert Set -> array
52 | emailCount: sender.emailCount,
53 | }));
54 |
55 | port.postMessage({
56 | action: "FETCH_SENDERS_RESPONSE",
57 | success: true,
58 | data: serialized,
59 | });
60 | } catch (error) {
61 | port.postMessage({
62 | action: "FETCH_SENDERS_RESPONSE",
63 | success: false,
64 | error: (error as Error).message,
65 | });
66 | } finally {
67 | currentAbortController = null;
68 | }
69 | }
70 |
71 | async function deleteSenders(port: chrome.runtime.Port, emails: string[]) {
72 | try {
73 | await BrowserEmailService.deleteSendersFromBrowser(emails);
74 | port.postMessage({
75 | action: "DELETE_SENDERS_RESPONSE",
76 | success: true,
77 | });
78 | } catch (error) {
79 | port.postMessage({
80 | action: "DELETE_SENDERS_RESPONSE",
81 | success: false,
82 | error: (error as Error).message,
83 | });
84 | }
85 | }
86 |
87 | async function unsubscribeSenders(port: chrome.runtime.Port, emails: string[]) {
88 | try {
89 | const failures =
90 | await BrowserEmailService.unsubscribeSendersFromBrowser(emails);
91 | port.postMessage({
92 | action: "UNSUBSCRIBE_SENDERS_RESPONSE",
93 | success: true,
94 | failures: failures,
95 | });
96 | } catch (error) {
97 | port.postMessage({
98 | action: "UNSUBSCRIBE_SENDERS_RESPONSE",
99 | success: false,
100 | error: (error as Error).message,
101 | });
102 | }
103 | }
104 |
105 | async function blockSender(port: chrome.runtime.Port, email: string) {
106 | try {
107 | await BrowserEmailService.blockSenderFromBrowser(email);
108 | port.postMessage({
109 | action: "BLOCK_SENDER_RESPONSE",
110 | success: true,
111 | });
112 | } catch (error) {
113 | port.postMessage({
114 | action: "BLOCK_SENDER_RESPONSE",
115 | success: false,
116 | error: (error as Error).message,
117 | });
118 | }
119 | }
120 |
121 | // Get email account
122 | chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
123 | if (message.action === "GET_EMAIL_ACCOUNT") {
124 | const value = PageInteractionService.getActiveTabEmailAccount();
125 | sendResponse({ result: value });
126 | }
127 | });
128 |
129 | // Search email senders
130 | chrome.runtime.onMessage.addListener((message) => {
131 | if (message.type === "SEARCH_EMAIL_SENDERS") {
132 | PageInteractionService.searchEmailSenders(message.emails);
133 | }
134 | });
135 |
136 | // Show tutorial
137 | chrome.runtime.onMessage.addListener((message) => {
138 | if (message.action === "SHOW_TUTORIAL") {
139 | PageInteractionService.displayTutorial();
140 | }
141 | });
142 |
143 | // Close tutorial
144 | chrome.runtime.onMessage.addListener((message) => {
145 | if (message.action === "CLOSE_TUTORIAL") {
146 | PageInteractionService.closeTutorial();
147 | }
148 | });
149 |
--------------------------------------------------------------------------------
/src/data/repositories/browser_email_repo.ts:
--------------------------------------------------------------------------------
1 | import { Sender } from "../../domain/entities/sender";
2 | import { EmailRepo } from "../../domain/repositories/email_repo";
3 | import { FetchProgress } from "../../domain/types/progress";
4 | import { PortManager } from "../ports/port_manager";
5 |
6 | export class BrowserEmailRepo implements EmailRepo {
7 | private onProgressCallback?: (progress: FetchProgress) => void;
8 |
9 | setProgressCallback(callback: (progress: FetchProgress) => void): void {
10 | this.onProgressCallback = callback;
11 | }
12 |
13 | async cancelFetch(): Promise
123 |
124 |
128 |
131 |
132 |
133 |
128 |
131 | You are ready to clean up your inbox.
134 | 135 | 144 | 145 | 146 |30 | Are you sure you want to unsubscribe from {sendersNum}{" "} 31 | selected sender(s)? 32 |
33 | 34 |
35 |
38 | Delete {emailsNum} email(s) from selected senders
39 |
40 | }
41 | defaultChecked={true}
42 | onChange={(checked) => setDeleteEmails(checked)}
43 | />
44 |
45 | setBlockSenders(checked)}
49 | />
50 |
51 |
52 |
55 |
58 |
59 | );
60 | };
61 |
62 | const UnsubscribePending = ({ subtype }: { subtype: string }) => {
63 | let message: string;
64 | switch (subtype) {
65 | case "working":
66 | message = "Unsubscribing from senders...";
67 | break;
68 | case "finding-link":
69 | message = "Finding unsubscribe links...";
70 | break;
71 | case "blocking":
72 | message = "Blocking sender...";
73 | break;
74 | default:
75 | message = "Processing...";
76 | break;
77 | }
78 |
79 | return (
80 | <>
81 | {message}
82 | 83 | 84 | 85 | ); 86 | }; 87 | 88 | const UnsubscribeContinue = ({ 89 | email, 90 | link, 91 | onContinue, 92 | }: { 93 | email: string; 94 | link: string; 95 | onContinue: () => void; 96 | }) => { 97 | const openLink = () => { 98 | window.open(link, "_blank"); 99 | }; 100 | return ( 101 | <> 102 |103 | To stop getting messages from {email}, go to their website to 104 | unsubscribe. 105 |
106 |107 | Once you've finished on the website, click "Continue" to proceed. 108 |
109 | 110 | 113 | 116 | 117 | ); 118 | }; 119 | 120 | const UnsubscribeError = ({ 121 | email, 122 | onContinue, 123 | }: { 124 | email: string; 125 | onContinue: () => void; 126 | }) => { 127 | const { blockSender } = useApp(); 128 | const { setModal } = useModal(); 129 | 130 | const handleBlockSender = async () => { 131 | setModal({ action: "unsubscribe", type: "pending", subtype: "blocking" }); 132 | await blockSender(email); 133 | onContinue(); // Continue to next sender after blocking 134 | }; 135 | 136 | return ( 137 | <> 138 |139 | Unable to unsubscribe from {email}. 140 |
141 |Block sender instead?
142 | 145 | 148 | 149 | ); 150 | }; 151 | 152 | const UnsubscribeSuccess = () => { 153 | return ( 154 | <> 155 |✅ Success!
156 |You have been unsubscribed from selected senders.
157 |158 | Note: You may need to reload your browser to see changes. 159 |
160 | 161 | ); 162 | }; 163 | 164 | const DeleteConfirm = ({ emailsNum, sendersNum }: ConfirmProps) => { 165 | const { 166 | reloadSenders, 167 | selectedSenders, 168 | setSelectedSenders, 169 | deleteSenders, 170 | searchEmailSenders, 171 | } = useApp(); 172 | const { setModal } = useModal(); 173 | 174 | const showEmails = () => { 175 | searchEmailSenders(Object.keys(selectedSenders)); 176 | }; 177 | 178 | const deleteEmails = async () => { 179 | try { 180 | // Set modal to pending state 181 | setModal({ action: "delete", type: "pending" }); 182 | 183 | // Delete senders and remove them from selectedSenders 184 | await deleteSenders(Object.keys(selectedSenders)); 185 | for (const senderEmail in selectedSenders) { 186 | setSelectedSenders((prev) => { 187 | const newSelected = { ...prev }; 188 | delete newSelected[senderEmail]; 189 | return newSelected; 190 | }); 191 | } 192 | 193 | // Set modal to success state 194 | setModal({ action: "delete", type: "success" }); 195 | 196 | // Wait 1 sec then reload senders 197 | setTimeout(() => { 198 | reloadSenders(); 199 | }, 1000); 200 | } catch { 201 | setModal({ action: "delete", type: "error" }); 202 | } 203 | }; 204 | 205 | return ( 206 | <> 207 |208 | Are you sure you want to delete {emailsNum} email(s) from{" "} 209 | {sendersNum} sender(s)? 210 |
211 |Note: This will not block or unsubscribe.
212 | 213 | 216 | 219 | 220 | ); 221 | }; 222 | 223 | const DeletePending = () => { 224 | return ( 225 | <> 226 |Deleting emails...
227 | 228 | 229 | 230 | ); 231 | }; 232 | 233 | const DeleteSuccess = () => { 234 | return ( 235 | <> 236 |✅ Success!
237 |Selected senders have been deleted.
238 |239 | Note: You may need to reload your browser to see changes. 240 |
241 | 242 | ); 243 | }; 244 | 245 | const DeleteError = () => { 246 | return ( 247 | <> 248 |❌ Error!
249 |There was an error deleting the selected senders.
250 | 251 | ); 252 | }; 253 | 254 | const NoSender = () => { 255 | const { setModal } = useModal(); 256 | return ( 257 | <> 258 |Oops!
259 |You haven't selected a sender yet.
260 | 261 | 262 | 263 | 266 | 267 | ); 268 | }; 269 | 270 | export const ModalPopup = () => { 271 | const { modal, setModal } = useModal(); 272 | if (!modal) return null; 273 | 274 | const { action, type, subtype, extras } = modal; 275 | const id: string = action ? `${action}-${type}-modal` : `${type}-modal`; 276 | 277 | const handleBackgroundClick = (event: React.MouseEvent
338 |
340 | );
341 | };
342 |
--------------------------------------------------------------------------------
/src/data/services/browser_email_service.ts:
--------------------------------------------------------------------------------
1 | // src/data/services/browser_email_service.ts
2 |
3 | import { Sender } from "../../domain/entities/sender";
4 | import { FetchProgress } from "../../domain/types/progress";
5 | import { PageInteractionService } from "./page_interaction_service";
6 |
7 | export interface FetchOptions {
8 | onProgress?: (progress: FetchProgress) => void;
9 | batchSize?: number;
10 | maxPages?: number;
11 | signal?: AbortSignal;
12 | }
13 |
14 | /**
15 | * Service class that implements browser-specific email operations to aid BrowserEmailRepo.
16 | * Provides methods to interact with email data within the browser environment.
17 | * All methods here must be run in the content script to work properly.
18 | */
19 | export class BrowserEmailService {
20 | static async fetchSendersFromBrowser(
21 | options: FetchOptions = {},
22 | ): Promise{getChild()}
339 |