https://www.shripi.com/guide.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <meta name="description" content="Shripi guide — learn how to capture, filter, export, and redact API requests with the Shripi Chrome extension." />
7  <meta property="og:title" content="Guide – Shripi" />
8  <meta property="og:description" content="Step-by-step guide to capturing, filtering, exporting, and redacting API requests with Shripi." />
9  <meta property="og:type" content="website" />
10  <meta property="og:url" content="https://shripi.com/guide.html" />
11  <meta property="og:image" content="https://shripi.com/shripi-logo-dark-bg.png" />
12  <meta name="twitter:card" content="summary_large_image" />
13  <meta name="twitter:title" content="Guide – Shripi" />
14  <meta name="twitter:description" content="Step-by-step guide to capturing, filtering, exporting, and redacting API requests with Shripi." />
15  <meta name="twitter:image" content="https://shripi.com/shripi-logo-dark-bg.png" />
16  <link rel="canonical" href="https://shripi.com/guide.html" />
17  <title>Guide – Shripi</title>
18  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19  <link rel="stylesheet" href="/site.css" />
20  

20<script>(function(){var t=localStorage.getItem("shripi-theme");if(!t&&window.matchMedia("(prefers-color-scheme: light)").matches)t="light";if(t==="light")document.documentElement.setAttribute("data-theme","light");})()</script>

20
21
22</head>
23<body>
24  <div class="layout">
25    <header>
26      <div class="inner">
27        <div class="bar">
28          <a href="/" class="logo">
29            <div class="logo-mark"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
30            <span class="logo-text">shripi</span>
31          </a>
32          <input type="checkbox" id="menu-toggle" hidden />
33          <label for="menu-toggle" class="menu-btn" aria-label="Toggle menu"><span></span><span></span><span></span></label>
34          <nav>
35            <a href="/">Home</a>
36            <a href="/pricing.html">Pricing</a>
37            <a href="/changelog.html">Changelog</a>
38            <a href="/guide.html" class="active">Guide</a>
39            <a href="/policies.html">Policies</a>
40          </nav>
41          <div class="header-right">
42            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme" onclick="(function(){var t=document.documentElement.getAttribute('data-theme')=='light'?'dark':'light';document.documentElement.setAttribute('data-theme',t);localStorage.setItem('shripi-theme',t)})()">
43              <svg class="theme-icon theme-icon-sun" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.5"/><line x1="8" y1="1.5" x2="8" y2="3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="8" y1="12.5" x2="8" y2="14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="1.5" y1="8" x2="3.5" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="12.5" y1="8" x2="14.5" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="3.4" y1="3.4" x2="4.8" y2="4.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="11.2" y1="11.2" x2="12.6" y2="12.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="11.2" y1="4.8" x2="12.6" y2="3.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="3.4" y1="12.6" x2="4.8" y2="11.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
44              <svg class="theme-icon theme-icon-moon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13 10.5A5.5 5.5 0 0 1 5.5 3a5 5 0 1 0 7.5 7.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
45            </button>
46
47            <a href="/login.html" class="login-link" id="nav-auth-btn">Log in</a>
48            <div class="nav-user-menu" id="nav-user-menu" style="display:none">
49              <button class="nav-user-trigger" id="nav-user-trigger" aria-haspopup="true" aria-expanded="false">
50                <span class="nav-user-avatar" id="nav-user-avatar"></span>
51              </button>
52              <div class="nav-user-dropdown" id="nav-user-dropdown">
53                <div class="nav-user-info">
54                  <span class="nav-user-email" id="nav-user-email"></span>
55                  <span class="nav-user-plan" id="nav-user-plan"></span>
56                </div>
57                <div class="nav-user-divider"></div>
58                <button class="nav-user-signout" id="nav-user-signout">Log out</button>
59              </div>
60            </div>
61            <span class="btn-primary btn-sm is-disabled" aria-disabled="true" title="Launching in early October">Coming October →</span>
62          </div>
63        </div>
64      </div>
65    </header>
66
67    <main>
68      <div class="guide-layout container">
69
70        <!-- ── Sidebar ── -->
71        <aside class="guide-sidebar">
72          <nav class="guide-nav">
73            <a href="#installation" class="gn-link">Installation</a>
74            <a href="#quick-start" class="gn-link">Quick Start</a>
75            <a href="#filtering" class="gn-link">Filtering Requests</a>
76            <a href="#exporting" class="gn-link">Exporting</a>
77            <a href="#redaction" class="gn-link">Redaction</a>
78            <a href="#session-management" class="gn-link">Session Management</a>
79            <a href="#settings" class="gn-link">Settings Reference</a>
80          </nav>
81        </aside>
82
83        <!-- ── Content ── -->

84        <article class="guide-content">
85
86          <div class="guide-header">
87            <span class="section-label">Documentation</span>
88            <h1>Shripi Guide</h1>
89            <p>Everything you need to know about using Shripi to capture, inspect, and export API requests.</p>
90          </div>
91
92          <!-- 1. Installation -->
93          <section id="installation" class="guide-section">
94            <h2>1. Installation</h2>
95            <p>Shripi is a Chrome extension. It arrives in the Chrome Web Store in early October — the steps below apply once it's live.</p>
96            <ol>
97              <li>Open the Chrome Web Store and search for <strong>Shripi</strong>. Once we launch, a direct link will be on the <a href="/">homepage</a>.</li>
98              <li>Click <strong>Add to Chrome</strong>, then confirm by clicking <strong>Add extension</strong> in the dialog.</li>
99              <li>The Shripi icon (<img src="/shripi-icon.svg" width="14" height="14" alt="Shripi" style="border-radius:3px;vertical-align:middle">) will appear in your Chrome toolbar. Pin it for easy access.</li>
100              <li>No account required to start capturing. Sign in only if you want to sync your Pro license.</li>
101            </ol>
102            <div class="guide-note">
103              <strong>Note:</strong> Shripi uses the Chrome DevTools Protocol. It works with any Chromium-based browser (Chrome, Edge, Brave, Arc) that supports the <code>debugger</code> API.
104            </div>
105          </section>
106
107          <!-- 2. Quick Start -->
108          <section id="quick-start" class="guide-section">
109            <h2>2. Quick Start</h2>
110            <p>Start capturing in three steps:</p>
111            <ol>
112              <li><strong>Click the Shripi icon</strong> in your toolbar to open the popup.</li>
113              <li><strong>Click "Start Capture"</strong> (or the toggle in the top bar). A green "Capturing" indicator confirms it's running.</li>
114              <li><strong>Browse your app</strong> and watch requests appear in real time. Click any row to inspect its full details — headers, body, response, timing.</li>
115            </ol>
116            <p>When you've captured what you need, click any request row and use the <strong>Copy as</strong> dropdown to export it as cURL, Python, Fetch, or Postman.</p>
117          </section>
118
119          <!-- 3. Filtering -->
120          <section id="filtering" class="guide-section">
121            <h2>3. Filtering Requests</h2>
122            <p>The toolbar above the request list gives you several ways to narrow down what you see:</p>
123            <ul>
124              <li><strong>Search box</strong> — Type to filter by URL, path, domain, or header values. Use the scope selector to limit search to URL only, domain only, or URL + headers.</li>
125              <li><strong>Method filter</strong> — Filter to GET, POST, PUT, PATCH, DELETE, or any combination.</li>
126              <li><strong>Status filter</strong> — Filter to 2xx (success), 3xx (redirect), 4xx (client error), or 5xx (server error).</li>
127              <li><strong>Grouped / flat view</strong> — Toggle between grouping requests by domain/endpoint or showing them in a flat chronological list.</li>
128            </ul>
129            <p>To exclude URLs from capture entirely (e.g. analytics or ad tracking calls), go to <strong>Settings → Exclude URL patterns</strong> and enter a substring or regex pattern.</p>
130          </section>
131
132          <!-- 4. Exporting -->
133          <section id="exporting" class="guide-section">
134            <h2>4. Exporting</h2>
135            <p>Shripi supports multiple export formats. Access them via the <strong>Export</strong> button in the toolbar.</p>
136            <table class="guide-table">
137              <thead>
138                <tr><th>Format</th><th>Best for</th><th>Plan</th></tr>
139              </thead>
140              <tbody>
141                <tr><td><code>cURL</code></td><td>Replaying a single request from the terminal</td><td>Free</td></tr>
142                <tr><td><code>Python (requests)</code></td><td>Scripting API calls in Python</td><td>Free</td></tr>
143                <tr><td><code>JavaScript (fetch)</code></td><td>Using in Node.js or browser scripts</td><td>Free</td></tr>
144                <tr><td><code>JSON</code></td><td>Full session dump for archiving or processing</td><td>Free</td></tr>
145                <tr><td><code>CSV</code></td><td>Spreadsheet analysis of request logs</td><td>Pro</td></tr>
146                <tr><td><code>Postman collection</code></td><td>Importing into Postman for testing</td><td>Pro</td></tr>
147                <tr><td><code>HAR 1.2</code></td><td>Sharing with Fiddler, Charles, or Chrome DevTools</td><td>Pro</td></tr>
148                <tr><td><code>Debug bundle (ZIP)</code></td><td>Sharing a full session for bug reports</td><td>Pro</td></tr>
149              </tbody>
150            </table>
151            <h3>Clean mode</h3>
152            <p>Enable <strong>Clean mode</strong> before exporting to strip browser-injected noise headers (<code>sec-fetch-*</code>, <code>user-agent</code>, <code>accept-encoding</code>) that are irrelevant to your API calls.</p>
153            <h3>Env var placeholders (Pro)</h3>
154            <p>With <strong>Env var placeholders</strong> enabled, redacted values are replaced by <code>${VARIABLE_NAME}</code> in cURL and Python exports. Python exports also auto-emit <code>os.getenv()</code> declarations so the code runs as-is once you export your env vars.</p>
155          </section>
156
157          <!-- 5. Redaction -->

158          <section id="redaction" class="guide-section">
159            <h2>5. Redaction</h2>
160            <p>Redaction is <strong>on by default</strong>. It strips sensitive values before they appear in the UI or any export, so you never accidentally share credentials.</p>
161            <h3>What gets redacted</h3>
162            <ul>
163              <li><strong>Authorization headers</strong> — Any header matching the auth header name patterns (default: <code>^authorization$</code>).</li>
164              <li><strong>Sensitive cookies</strong> — Cookies with names matching known session patterns (<code>sessionid</code>, <code>token</code>, <code>auth</code>, etc.).</li>
165              <li><strong>Sensitive query params</strong> — URL parameters like <code>token</code>, <code>api_key</code>, <code>secret</code>, <code>access_token</code>.</li>
166              <li><strong>JSON body keys</strong> — Keys like <code>password</code>, <code>secret</code>, <code>private_key</code> in request bodies.</li>
167            </ul>
168            <h3>Customizing redaction (Pro)</h3>
169            <p>In <strong>Settings → Redaction</strong> you can:</p>
170            <ul>
171              <li>Add custom auth header name patterns (regex, e.g. <code>^x-api-key$</code>)</li>
172              <li>Add custom auth header value patterns</li>
173              <li>Add custom sensitive cookie name patterns</li>
174              <li>Add custom sensitive query param patterns</li>
175            </ul>
176            <div class="guide-note">
177              <strong>Raw data mode:</strong> Toggle <strong>Show raw data</strong> in settings to temporarily disable redaction in the UI. Exports will still apply redaction unless you explicitly disable it.
178            </div>
179          </section>
180
181          <!-- 6. Session Management -->
182          <section id="session-management" class="guide-section">
183            <h2>6. Session Management</h2>
184            <p>Shripi keeps captured requests in memory by default. When you close the extension or navigate away, the session resets.</p>
185            <h3>Persistent storage (Pro)</h3>
186            <p>Enable <strong>Persistent storage</strong> in Settings to save your captured session to IndexedDB. Your requests survive browser restarts and tab refreshes.</p>
187            <h3>Request limit</h3>
188            <p>Set a <strong>Request limit</strong> (default: 500) to cap how many requests are stored. When the limit is reached, the oldest requests are pruned automatically. Set to <code>0</code> for unlimited (Pro).</p>
189            <h3>Clearing history</h3>
190            <p>Click the <strong>Clear</strong> button in the toolbar to delete all captured requests for the current session. You'll be prompted to confirm. This action is irreversible.</p>
191          </section>
192
193          <!-- 8. Settings -->
194          <section id="settings" class="guide-section">
195            <h2>7. Settings Reference</h2>
196            <table class="guide-table">
197              <thead>
198                <tr><th>Setting</th><th>Default</th><th>Description</th></tr>
199              </thead>
200              <tbody>
201                <tr><td>Request limit</td><td>500</td><td>Max number of requests stored. 0 = unlimited (Pro).</td></tr>
202                <tr><td>Persistent storage</td><td>Off</td><td>Persist captured requests across browser restarts (Pro).</td></tr>
203                <tr><td>Preserve logs</td><td>Off</td><td>Don't clear captured requests on navigation.</td></tr>
204                <tr><td>Redaction enabled</td><td>On</td><td>Apply redaction to all captured and exported data.</td></tr>
205                <tr><td>Show raw data</td><td>Off</td><td>Show unredacted values in the UI.</td></tr>
206                <tr><td>Env var placeholders</td><td>Off</td><td>Replace redacted values with <code>${VAR}</code> in exports (Pro).</td></tr>
207                <tr><td>Exclude URL patterns</td><td>—</td><td>Comma-separated substrings or regex. Matching URLs are not captured.</td></tr>
208                <tr><td>Auth header name patterns</td><td><code>^authorization$</code></td><td>Regex patterns for header names to redact (Pro).</td></tr>
209                <tr><td>Sensitive cookie patterns</td><td>built-in list</td><td>Cookie name patterns to redact (Pro).</td></tr>
210                <tr><td>Sensitive param patterns</td><td>built-in list</td><td>Query param name patterns to redact (Pro).</td></tr>
211              </tbody>
212            </table>
213          </section>
214
215        </article>
216      </div>
217    </main>
218
219    <footer>
220      <div class="inner">
221        <div class="row">
222          <div class="footer-brand">
223            <div class="footer-mark"><div class="fb1"></div><div class="fb2"></div><div class="fb3"></div></div>
224            <p class="footer-copy">© 2026 Shripi. All rights reserved.</p>
225          </div>
226          <nav>
227            <a href="/policies.html">Policies</a>
228            <a href="/privacy-policy.html">Privacy</a>
229            <a href="/refund-policy.html">Refund</a>
230            <a href="/terms.html">Terms</a>
231          </nav>
232        </div>
233      </div>
234    </footer>
235  </div>
236
237  

237<script src="/config.js"></script>

237
238  

238<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>

238
239  

239<script>
240    (async () => {
241      const cfg = window.SHRIPI_CONFIG;
242      const sb = supabase.createClient(cfg.supabaseUrl, cfg.supabaseAnonKey);
243      const { data: { session } } = await sb.auth.getSession();
244      if (!session) return;
245      document.getElementById('nav-auth-btn').style.display = 'none';
246      document.getElementById('nav-user-menu').style.display = '';
247      const email = session.user.email || '';
248      document.getElementById('nav-user-avatar').textContent = email[0].toUpperCase();
249      document.getElementById('nav-user-email').textContent = email;
250      const { data: groups } = await sb.from('groups').select('id').eq('user_id', session.user.id);
251      const isPro = groups && groups.length > 0;
252      const planEl = document.getElementById('nav-user-plan');
253      planEl.textContent = isPro ? 'Pro' : 'Free';
254      planEl.className = 'nav-user-plan ' + (isPro ? 'plan-pro' : 'plan-free');
255      const trigger = document.getElementById('nav-user-trigger');
256      const dropdown = document.getElementById('nav-user-dropdown');
257      trigger.addEventListener('click', (e) => {
258        e.stopPropagation();
259        const open = dropdown.classList.toggle('open');
260        trigger.setAttribute('aria-expanded', open);
261      });
262      document.addEventListener('click', () => {
263        dropdown.classList.remove('open');
264        trigger.setAttribute('aria-expanded', 'false');
265      });
266      document.getElementById('nav-user-signout').addEventListener('click', async () => {
267        await sb.auth.signOut();
268        window.location.reload();
269      });
270    })();
271  </script>

271
272  

272<script>
273    // Highlight active sidebar link on scroll
274    const sections = document.querySelectorAll('.guide-section')
275    const links = document.querySelectorAll('.gn-link')
276    const observer = new IntersectionObserver(entries => {
277      entries.forEach(entry => {
278        if (entry.isIntersecting) {
279          links.forEach(l => l.classList.remove('active'))
280          const id = entry.target.id
281          const active = document.querySelector(`.gn-link[href="#${id}"]`)
282          if (active) active.classList.add('active')
283        }
284      })
285    }, { rootMargin: '-20% 0px -70% 0px' })
286    sections.forEach(s => observer.observe(s))
287  </script>

287
288</body>
289</html>