☰

JSON Response Capture

Capture and save JSON responses from web requests with URL filtering

  1. // ==UserScript==
  2. // @name         JSON Response Capture
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Capture and save JSON responses from web requests with URL filtering
  6. // @author       nickm8
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js
  12. // ==/UserScript==
  13.  
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     const style = document.createElement('style');
  19.     style.textContent = `
  20.         :root {
  21.             --bg-primary: #ffffff;
  22.             --bg-secondary: #f9fafb;
  23.             --text-primary: #1f2937;
  24.             --text-secondary: #4b5563;
  25.             --text-tertiary: #6b7280;
  26.             --border-color: #e5e7eb;
  27.             --shadow-color: rgba(0, 0, 0, 0.1);
  28.             --hover-color: #2563eb;
  29.             --danger-color: #dc2626;
  30.             --tag-bg: #f3f4f6;
  31.         }
  32.  
  33.         @media (prefers-color-scheme: dark) {
  34.             :root {
  35.                 --bg-primary: #1f2937;
  36.                 --bg-secondary: #374151;
  37.                 --text-primary: #f9fafb;
  38.                 --text-secondary: #d1d5db;
  39.                 --text-tertiary: #9ca3af;
  40.                 --border-color: #4b5563;
  41.                 --shadow-color: rgba(0, 0, 0, 0.3);
  42.                 --hover-color: #60a5fa;
  43.                 --danger-color: #ef4444;
  44.                 --tag-bg: #374151;
  45.             }
  46.         }
  47.  
  48.         .json-capture-panel {
  49.             position: fixed;
  50.             bottom: 1rem;
  51.             right: 1rem;
  52.             background: var(--bg-primary);
  53.             color: var(--text-primary);
  54.             border-radius: 0.5rem;
  55.             box-shadow: 0 4px 6px -1px var(--shadow-color);
  56.             transition: all 200ms;
  57.             z-index: 10000;
  58.         }
  59.  
  60.         .json-capture-panel.minimized { width: 3rem; }
  61.         .json-capture-panel.expanded { width: 24rem; }
  62.  
  63.         .json-capture-header {
  64.             display: flex;
  65.             align-items: center;
  66.             justify-content: space-between;
  67.             padding: 0.5rem;
  68.             border-bottom: 1px solid var(--border-color);
  69.             background: var(--bg-secondary);
  70.             border-top-left-radius: 0.5rem;
  71.             border-top-right-radius: 0.5rem;
  72.         }
  73.  
  74.         .json-capture-content {
  75.             max-height: 24rem;
  76.             overflow: auto;
  77.             padding: 1rem;
  78.         }
  79.  
  80.         .json-capture-item {
  81.             margin-bottom: 1rem;
  82.             padding: 0.5rem;
  83.             border: 1px solid var(--border-color);
  84.             border-radius: 0.375rem;
  85.         }
  86.  
  87.         .json-capture-url {
  88.             font-size: 0.875rem;
  89.             color: var(--text-secondary);
  90.             margin-bottom: 0.25rem;
  91.             word-break: break-all;
  92.         }
  93.  
  94.         .json-capture-timestamp {
  95.             font-size: 0.75rem;
  96.             color: var(--text-tertiary);
  97.             margin-bottom: 0.5rem;
  98.         }
  99.  
  100.         .json-capture-json {
  101.             font-size: 0.75rem;
  102.             background: var(--bg-secondary);
  103.             padding: 0.5rem;
  104.             border-radius: 0.375rem;
  105.             overflow: auto;
  106.             white-space: pre-wrap;
  107.             max-height: 12rem;
  108.             color: var(--text-primary);
  109.         }
  110.  
  111.         .json-capture-button {
  112.             padding: 0.25rem 0.5rem;
  113.             background: none;
  114.             border: none;
  115.             cursor: pointer;
  116.             color: var(--text-secondary);
  117.         }
  118.  
  119.         .json-capture-button:hover {
  120.             color: var(--hover-color);
  121.         }
  122.  
  123.         .json-capture-button.delete:hover {
  124.             color: var(--danger-color);
  125.         }
  126.  
  127.         .config-section {
  128.             margin-bottom: 1rem;
  129.             padding: 0.5rem;
  130.             border: 1px solid var(--border-color);
  131.             border-radius: 0.375rem;
  132.         }
  133.  
  134.         .config-title {
  135.             font-weight: 600;
  136.             margin-bottom: 0.5rem;
  137.             color: var(--text-primary);
  138.         }
  139.  
  140.         .config-input {
  141.             display: flex;
  142.             gap: 0.5rem;
  143.             margin-bottom: 0.5rem;
  144.         }
  145.  
  146.         .config-input input {
  147.             flex: 1;
  148.             padding: 0.25rem 0.5rem;
  149.             border: 1px solid var(--border-color);
  150.             border-radius: 0.25rem;
  151.             background: var(--bg-primary);
  152.             color: var(--text-primary);
  153.         }
  154.  
  155.         .config-list {
  156.             display: flex;
  157.             flex-wrap: wrap;
  158.             gap: 0.25rem;
  159.         }
  160.  
  161.         .config-tag {
  162.             background: var(--tag-bg);
  163.             color: var(--text-primary);
  164.             padding: 0.25rem 0.5rem;
  165.             border-radius: 0.25rem;
  166.             display: flex;
  167.             align-items: center;
  168.             gap: 0.25rem;
  169.         }
  170.  
  171.         .config-tag button {
  172.             padding: 0;
  173.             background: none;
  174.             border: none;
  175.             cursor: pointer;
  176.             color: var(--text-tertiary);
  177.         }
  178.  
  179.         .tabs {
  180.             display: flex;
  181.             border-bottom: 1px solid var(--border-color);
  182.             margin-bottom: 1rem;
  183.         }
  184.  
  185.         .tab {
  186.             padding: 0.5rem 1rem;
  187.             cursor: pointer;
  188.             border-bottom: 2px solid transparent;
  189.             color: var(--text-secondary);
  190.         }
  191.  
  192.         .tab.active {
  193.             border-bottom-color: var(--hover-color);
  194.             color: var(--hover-color);
  195.         }
  196.     `;
  197.     document.head.appendChild(style);
  198.  
  199.     const { useState, useEffect } = React;
  200.  
  201.     // Configuration component
  202.     function ConfigSection({ matches, ignores, onUpdateMatches, onUpdateIgnores }) {
  203.         const [newMatch, setNewMatch] = useState('');
  204.         const [newIgnore, setNewIgnore] = useState('');
  205.  
  206.         const addMatch = () => {
  207.             if (newMatch && !matches.includes(newMatch)) {
  208.                 onUpdateMatches([...matches, newMatch]);
  209.                 setNewMatch('');
  210.             }
  211.         };
  212.  
  213.         const addIgnore = () => {
  214.             if (newIgnore && !ignores.includes(newIgnore)) {
  215.                 onUpdateIgnores([...ignores, newIgnore]);
  216.                 setNewIgnore('');
  217.             }
  218.         };
  219.  
  220.         const removeMatch = (match) => {
  221.             onUpdateMatches(matches.filter(m => m !== match));
  222.         };
  223.  
  224.         const removeIgnore = (ignore) => {
  225.             onUpdateIgnores(ignores.filter(i => i !== ignore));
  226.         };
  227.  
  228.         return React.createElement('div', { className: 'config-content' }, [
  229.             React.createElement('div', { key: 'matches', className: 'config-section' }, [
  230.                 React.createElement('div', { className: 'config-title' }, 'URL Matches'),
  231.                 React.createElement('div', { className: 'config-input' }, [
  232.                     React.createElement('input', {
  233.                         value: newMatch,
  234.                         onChange: (e) => setNewMatch(e.target.value),
  235.                         placeholder: 'Enter URL keyword to match',
  236.                         onKeyPress: (e) => e.key === 'Enter' && addMatch()
  237.                     }),
  238.                     React.createElement('button', {
  239.                         className: 'json-capture-button',
  240.                         onClick: addMatch
  241.                     }, '+')
  242.                 ]),
  243.                 React.createElement('div', { className: 'config-list' },
  244.                     matches.map(match => 
  245.                         React.createElement('span', { key: match, className: 'config-tag' }, [
  246.                             match,
  247.                             React.createElement('button', {
  248.                                 onClick: () => removeMatch(match)
  249.                             }, '×')
  250.                         ])
  251.                     )
  252.                 )
  253.             ]),
  254.             React.createElement('div', { key: 'ignores', className: 'config-section' }, [
  255.                 React.createElement('div', { className: 'config-title' }, 'URL Ignores'),
  256.                 React.createElement('div', { className: 'config-input' }, [
  257.                     React.createElement('input', {
  258.                         value: newIgnore,
  259.                         onChange: (e) => setNewIgnore(e.target.value),
  260.                         placeholder: 'Enter URL keyword to ignore',
  261.                         onKeyPress: (e) => e.key === 'Enter' && addIgnore()
  262.                     }),
  263.                     React.createElement('button', {
  264.                         className: 'json-capture-button',
  265.                         onClick: addIgnore
  266.                     }, '+')
  267.                 ]),
  268.                 React.createElement('div', { className: 'config-list' },
  269.                     ignores.map(ignore => 
  270.                         React.createElement('span', { key: ignore, className: 'config-tag' }, [
  271.                             ignore,
  272.                             React.createElement('button', {
  273.                                 onClick: () => removeIgnore(ignore)
  274.                             }, '×')
  275.                         ])
  276.                     )
  277.                 )
  278.             ])
  279.         ]);
  280.     }
  281.  
  282.     function JsonCapturePanel() {
  283.         const [captures, setCaptures] = useState([]);
  284.         const [isMinimized, setIsMinimized] = useState(true);
  285.         const [activeTab, setActiveTab] = useState('captures');
  286.         const [matches, setMatches] = useState([]);
  287.         const [ignores, setIgnores] = useState([]);
  288.         const domain = window.location.hostname;
  289.  
  290.         // Load configuration from localStorage
  291.         useEffect(() => {
  292.             const config = JSON.parse(localStorage.getItem(`jsonCapture_${domain}`) || '{"matches":[],"ignores":[]}');
  293.             setMatches(config.matches);
  294.             setIgnores(config.ignores);
  295.         }, []);
  296.  
  297.         // Save configuration to localStorage
  298.         useEffect(() => {
  299.             localStorage.setItem(`jsonCapture_${domain}`, JSON.stringify({ matches, ignores }));
  300.         }, [matches, ignores]);
  301.  
  302.         const shouldCaptureUrl = (url) => {
  303.             if (matches.length === 0) return false;
  304.             return matches.some(match => url.includes(match)) && 
  305.                    !ignores.some(ignore => url.includes(ignore));
  306.         };
  307.  
  308.         useEffect(() => {
  309.             // Intercept fetch
  310.             const originalFetch = window.fetch;
  311.             window.fetch = async function(...args) {
  312.                 const response = await originalFetch.apply(this, args);
  313.                 const clone = response.clone();
  314.  
  315.                 try {
  316.                     const contentType = clone.headers.get('content-type');
  317.                     if (contentType && contentType.includes('application/json')) {
  318.                         const url = typeof args[0] === 'string' ? args[0] : args[0].url;
  319.                         if (shouldCaptureUrl(url)) {
  320.                             const json = await clone.json();
  321.                             setCaptures(prev => [...prev, {
  322.                                 timestamp: new Date().toISOString(),
  323.                                 url,
  324.                                 data: json
  325.                             }]);
  326.                         }
  327.                     }
  328.                 } catch (err) {
  329.                     console.error('Error processing response:', err);
  330.                 }
  331.  
  332.                 return response;
  333.             };
  334.  
  335.             // Intercept XHR
  336.             const originalXHROpen = XMLHttpRequest.prototype.open;
  337.             const originalXHRSend = XMLHttpRequest.prototype.send;
  338.  
  339.             XMLHttpRequest.prototype.open = function(...args) {
  340.                 this._url = args[1];
  341.                 return originalXHROpen.apply(this, args);
  342.             };
  343.  
  344.             XMLHttpRequest.prototype.send = function(...args) {
  345.                 this.addEventListener('load', function() {
  346.                     try {
  347.                         const contentType = this.getResponseHeader('content-type');
  348.                         if (contentType && contentType.includes('application/json')) {
  349.                             if (shouldCaptureUrl(this._url)) {
  350.                                 const json = JSON.parse(this.responseText);
  351.                                 setCaptures(prev => [...prev, {
  352.                                     timestamp: new Date().toISOString(),
  353.                                     url: this._url,
  354.                                     data: json
  355.                                 }]);
  356.                             }
  357.                         }
  358.                     } catch (err) {
  359.                         console.error('Error processing XHR response:', err);
  360.                     }
  361.                 });
  362.  
  363.                 return originalXHRSend.apply(this, args);
  364.             };
  365.         }, [matches, ignores]);
  366.  
  367.         const handleSave = () => {
  368.             const blob = new Blob([JSON.stringify(captures, null, 2)], { type: 'application/json' });
  369.             const url = URL.createObjectURL(blob);
  370.             const a = document.createElement('a');
  371.             a.href = url;
  372.             a.download = `json-captures-${domain}-${new Date().toISOString()}.json`;
  373.             a.click();
  374.             URL.revokeObjectURL(url);
  375.         };
  376.  
  377.         const handleClear = () => {
  378.             setCaptures([]);
  379.         };
  380.  
  381.         return React.createElement('div', {
  382.             className: `json-capture-panel ${isMinimized ? 'minimized' : 'expanded'}`
  383.         }, [
  384.             // Header
  385.             React.createElement('div', {
  386.                 key: 'header',
  387.                 className: 'json-capture-header'
  388.             }, [
  389.                 !isMinimized && React.createElement('div', {
  390.                     key: 'title'
  391.                 }, `JSON Captures (${captures.length})`),
  392.                 React.createElement('div', {
  393.                     key: 'controls',
  394.                     style: { display: 'flex', gap: '0.5rem' }
  395.                 }, [
  396.                     !isMinimized && React.createElement('button', {
  397.                         key: 'save',
  398.                         className: 'json-capture-button',
  399.                         onClick: handleSave,
  400.                         title: 'Save captures'
  401.                     }, '💾'),
  402.                     React.createElement('button', {
  403.                         key: 'toggle',
  404.                         className: 'json-capture-button',
  405.                         onClick: () => setIsMinimized(!isMinimized),
  406.                         title: isMinimized ? 'Expand' : 'Minimize'
  407.                     }, isMinimized ? '⤢' : '⤡'),
  408.                     !isMinimized && React.createElement('button', {
  409.                         key: 'clear',
  410.                         className: 'json-capture-button delete',
  411.                         onClick: handleClear,
  412.                         title: 'Clear captures'
  413.                     }, '✕')
  414.                 ])
  415.             ]),
  416.             // Content
  417.             !isMinimized && React.createElement('div', { key: 'content' }, [
  418.                 // Tabs
  419.                 React.createElement('div', { key: 'tabs', className: 'tabs' }, [
  420.                     React.createElement('div', {
  421.                         className: `tab ${activeTab === 'captures' ? 'active' : ''}`,
  422.                         onClick: () => setActiveTab('captures')
  423.                     }, 'Captures'),
  424.                     React.createElement('div', {
  425.                         className: `tab ${activeTab === 'config' ? 'active' : ''}`,
  426.                         onClick: () => setActiveTab('config')
  427.                     }, 'Configuration')
  428.                 ]),
  429.                 // Tab content
  430.                 activeTab === 'captures' ? 
  431.                     React.createElement('div', {
  432.                         key: 'captures',
  433.                         className: 'json-capture-content'
  434.                     },
  435.                         captures.length === 0
  436.                             ? React.createElement('div', {
  437.                                 style: { textAlign: 'center', color: '#6b7280' }
  438.                             }, matches.length === 0 ? 'Configure URL matches to start capturing' : 'No JSON responses captured yet')
  439.                             : captures.map((capture, index) =>
  440.                                 React.createElement('div', {
  441.                                     key: index,
  442.                                     className: 'json-capture-item'
  443.                                 }, [
  444.                                     React.createElement('div', {
  445.                                         key: 'url',
  446.                                         className: 'json-capture-url'
  447.                                     }, capture.url),
  448.                                     React.createElement('div', {
  449.                                         key: 'timestamp',
  450.                                         className: 'json-capture-timestamp'
  451.                                     }, capture.timestamp),
  452.                                     React.createElement('pre', {
  453.                                         key: 'json',
  454.                                         className: 'json-capture-json'
  455.                                     }, JSON.stringify(capture.data, null, 2))
  456.                                 ])
  457.                             )
  458.                     )
  459.                     : React.createElement(ConfigSection, {
  460.                         key: 'config',
  461.                         matches,
  462.                         ignores,
  463.                         onUpdateMatches: setMatches,
  464.                         onUpdateIgnores: setIgnores
  465.                     })
  466.             ])
  467. ]);
  468. }
  469.  
  470. const container = document.createElement('div');
  471. document.body.appendChild(container);
  472. ReactDOM.render(React.createElement(JsonCapturePanel), container);
  473. })();