CreditKarmaExtractor/popup.html at main · cbangera2/CreditKarmaExtractor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Transactions</title>
    <link rel="stylesheet" href="popup.css">
</head>

<body data-theme="light">
    <header>
        <h1>Credit Karma Extractor</h1>
        <div class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div>
    </header>

    <main>
        <section class="card">
            <h3 class="section-title">Date Range</h3>
            <div class="input-row">
                <div class="input-group">
                    <label for="start-date">Start</label>
                    <input type="date" id="start-date">
                </div>
                <div class="input-group">
                    <label for="end-date">End</label>
                    <input type="date" id="end-date">
                </div>
            </div>
            <div class="quick-dates">
                <button class="pill-btn" data-range="ytd">YTD</button>
                <button class="pill-btn" data-range="last-month">Last Month</button>
                <button class="pill-btn" data-range="last-year">Last Year</button>
            </div>
        </section>

        <section class="card">
            <h3 class="section-title">Settings</h3>
            <label class="toggle-row" title="Uses the new hidden API. Much faster and deeper history.">
                <div>
                    <span style="display:block; font-size:12px; font-weight:500;">Use Fast API</span>
                    <span style="font-size:10px; color:var(--text-secondary);">Recommended</span>
                </div>
                <div class="toggle-switch">
                    <input type="checkbox" id="useApiCheckbox" checked>
                    <span class="slider"></span>
                </div>
            </label>
        </section>

        <section class="card">
            <h3 class="section-title">Files to Generate</h3>
            <div class="grid-columns">
                <label class="checkbox-label">
                    <input type="checkbox" id="allTransactionsCheckbox" checked> All Data
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="incomeCheckbox"> Income Only
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="expensesCheckbox"> Expenses Only
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="netWorthCheckbox"> Net Worth History
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="investmentsCheckbox"> Investment History
                </label>
            </div>
        </section>

        <section class="card">
            <h3 class="section-title">Columns</h3>
            <div class="grid-columns" style="grid-template-columns: 1fr 1fr 1fr;">
                <label class="checkbox-label"><input type="checkbox" id="col-date" checked> Date</label>
                <label class="checkbox-label"><input type="checkbox" id="col-desc" checked> Desc</label>
                <label class="checkbox-label"><input type="checkbox" id="col-amount" checked> Amount</label>
                <label class="checkbox-label"><input type="checkbox" id="col-category" checked> Category</label>
                <label class="checkbox-label"><input type="checkbox" id="col-type" checked> Type</label>
                <label class="checkbox-label"><input type="checkbox" id="col-account" checked> Account</label>
                <label class="checkbox-label"><input type="checkbox" id="col-notes" checked> Notes</label>
                <label class="checkbox-label"><input type="checkbox" id="col-labels" checked> Labels</label>
            </div>
        </section>

        <button id="export-btn" class="primary-btn">
            Export Selected Data
        </button>

        <button id="debug-raw-btn" class="pill-btn" style="width:100%; margin-top:8px;"
            title="Downloads the raw, unprocessed GraphQL responses from both transaction endpoints. Useful for diagnosing wrong/missing fields (e.g. categories) in the CSV export.">
            🔧 Debug: Export Raw API JSON
        </button>
    </main>

    <footer>
        <div class="footer-section">
            <h4>Analyze Your Data</h4>
            <div class="footer-links">
                <a href="https://www.creditkarma.com/networth/transactions" target="_blank">📊 Go to Transactions
                    Page</a>
                <a href="https://github.com/cbangera2/BudgetLens" target="_blank">📈 BudgetLens Web Dashboard</a>
                <a href="https://themeasureofaplan.com/budget-tracking-tool/" target="_blank">📑 TMOAP Spreadsheet
                    Tool</a>
            </div>
        </div>

        <div class="footer-section">
            <h4>Resources</h4>
            <div class="footer-links">
                <a href="https://github.com/cbangera2/CreditKarmaExtractor" target="_blank">📦 View on GitHub</a>
                <a href="https://github.com/cbangera2/CreditKarmaExtractor/issues" target="_blank">🐛 Report an
                    Issue</a>
            </div>
        </div>

        <div class="footer-meta">
            <p>v2.0 • &copy; 2026 Chirag Bangera. Not affiliated with Credit Karma.</p>
        </div>
    </footer>

    <script src="popup.js"></script>
</body>

</html>