Skip to content

Instantly share code, notes, and snippets.

@legoktm

legoktm/claude_chat_2025-02-08T03:33:09.255Z.md Secret

Created February 8, 2025 03:33
Download ZIP
JSON Content Interceptor Web Extension
Raw
claude_chat_2025-02-08T03:33:09.255Z.md

JSON Content Interceptor Web Extension

human (Feb 7, 2025, 09:18 PM)

I want to write a web extension that can intercept the JSON content of URLs that match a pattern and present it in a text box

assistant (Feb 7, 2025, 09:19 PM)

I'll help you create a web extension that can intercept and display JSON content from specific URLs. Let me create a basic extension structure for you.

JSON Interceptor Web Extension

// manifest.json
{
  "manifest_version": 2,
  "name": "JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from specified URLs",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

// background.js
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.type === "xmlhttprequest") {
      try {
        // Store the URL and its content in local storage
        let filter = browser.webRequest.filterResponseData(details.requestId);
        let decoder = new TextDecoder("utf-8");
        let encoder = new TextEncoder();
        let str = '';

        filter.ondata = event => {
          str += decoder.decode(event.data, {stream: true});
          filter.write(event.data);
        };

        filter.onstop = event => {
          try {
            const jsonData = JSON.parse(str);
            chrome.storage.local.set({
              [details.url]: {
                timestamp: new Date().toISOString(),
                content: jsonData
              }
            });
          } catch (e) {
            console.log('Not valid JSON:', e);
          }
          filter.disconnect();
        };
      } catch (e) {
        console.error('Error intercepting request:', e);
      }
    }
    return { cancel: false };
  },
  {
    urls: ["<url_pattern_here>"], // Replace with your URL pattern
    types: ["xmlhttprequest"]
  },
  ["blocking"]
);

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 500px;
      padding: 10px;
    }
    #jsonContent {
      width: 100%;
      height: 300px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h3>Intercepted JSON Content</h3>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  chrome.storage.local.get(null, function(items) {
    const textArea = document.getElementById('jsonContent');
    const latestEntry = Object.entries(items)
      .sort((a, b) => b[1].timestamp.localeCompare(a[1].timestamp))[0];
    
    if (latestEntry) {
      textArea.value = JSON.stringify(latestEntry[1].content, null, 2);
    } else {
      textArea.value = 'No JSON content intercepted yet.';
    }
  });
});

This extension does the following:

  1. Manifest: Declares necessary permissions and components
  2. Background Script:
    • Listens for web requests matching your URL pattern
    • Intercepts the response and checks if it's valid JSON
    • Stores the JSON content in the extension's local storage
  3. Popup Interface:
    • Shows a simple textarea with the most recently intercepted JSON
    • Automatically formats the JSON for readability

To use this extension:

  1. Create a new directory and save these files in it
  2. Replace <url_pattern_here> in background.js with your desired URL pattern (e.g., "*://*.api.example.com/*")
  3. Load it as an unpacked extension in your browser:
    • Chrome: Go to chrome://extensions/, enable Developer mode, click "Load unpacked"
    • Firefox: Go to about:debugging, click "This Firefox", click "Load Temporary Add-on"

Would you like me to modify the URL pattern or add any additional features, such as:

  • Filtering capabilities
  • JSON search functionality
  • Export options
  • Multiple request history

human (Feb 7, 2025, 09:23 PM)

The URL would be in the format of https://claude.ai/api/organizations/63482faf-14ae-4a21-a8cc-625ca2faad48/chat_conversations/f95f4379-fdb7-449f-b989-02576efbb9e3?tree=True&rendering_mode=messages&render_all_tools=true but with different UUIDs

assistant (Feb 7, 2025, 09:24 PM)

I'll modify the extension to specifically handle Claude API URLs with UUIDs. I'll update the URL pattern and add some specific formatting for Claude chat conversations.

Claude Chat JSON Interceptor

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "*://*.claude.ai/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

// background.js
const CLAUDE_URL_PATTERN = /^https:\/\/claude\.ai\/api\/organizations\/[\w-]+\/chat_conversations\/[\w-]+/;

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.type === "xmlhttprequest" && CLAUDE_URL_PATTERN.test(details.url)) {
      try {
        let filter = browser.webRequest.filterResponseData(details.requestId);
        let decoder = new TextDecoder("utf-8");
        let encoder = new TextEncoder();
        let str = '';

        filter.ondata = event => {
          str += decoder.decode(event.data, {stream: true});
          filter.write(event.data);
        };

        filter.onstop = event => {
          try {
            const jsonData = JSON.parse(str);
            const conversationId = details.url.match(/chat_conversations\/([\w-]+)/)[1];
            chrome.storage.local.set({
              [conversationId]: {
                timestamp: new Date().toISOString(),
                url: details.url,
                content: jsonData
              }
            });
          } catch (e) {
            console.log('Not valid JSON:', e);
          }
          filter.disconnect();
        };
      } catch (e) {
        console.error('Error intercepting request:', e);
      }
    }
    return { cancel: false };
  },
  {
    urls: ["*://claude.ai/api/organizations/*/chat_conversations/*"],
    types: ["xmlhttprequest"]
  },
  ["blocking"]
);

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .conversation-select {
      width: 300px;
      padding: 5px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <select id="conversationSelect" class="conversation-select"></select>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const conversationSelect = document.getElementById('conversationSelect');
  const timestampDiv = document.getElementById('timestamp');

  function updateContent(items, selectedId) {
    const conversation = items[selectedId];
    if (conversation) {
      textArea.value = JSON.stringify(conversation.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(conversation.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  }

  chrome.storage.local.get(null, function(items) {
    const conversations = Object.entries(items)
      .sort((a, b) => b[1].timestamp.localeCompare(a[1].timestamp));
    
    conversationSelect.innerHTML = '';
    conversations.forEach(([id, data]) => {
      const option = document.createElement('option');
      option.value = id;
      option.textContent = `Conversation ${id.slice(0, 8)}...`;
      conversationSelect.appendChild(option);
    });

    if (conversations.length > 0) {
      updateContent(items, conversations[0][0]);
    }
  });

  conversationSelect.addEventListener('change', function() {
    chrome.storage.local.get(null, function(items) {
      updateContent(items, conversationSelect.value);
    });
  });
});

I've updated the extension to specifically handle Claude chat API URLs. Here are the key changes:

  1. URL Pattern:

    • Now matches URLs specifically from claude.ai
    • Uses regex to capture the UUIDs in the URL pattern
    • Only intercepts requests to the chat conversations endpoint

  2. Enhanced Storage:

    • Stores conversations by their UUID
    • Keeps track of the full URL and timestamp
    • Maintains history of different conversations

  3. Improved UI:

    • Added a dropdown to switch between different intercepted conversations
    • Shows timestamp for each intercepted request
    • Better styling for readability
    • Increased width and height for better visibility of JSON content

  4. Permissions:

    • Scoped down to only claude.ai domain
    • Added storage permission explicitly

To use this extension:

  1. Create a directory with these files
  2. Load it as an unpacked extension in your browser
  3. Visit Claude chat conversations
  4. Click the extension icon to see the intercepted JSON

Would you like me to add any additional features? I could add:

  • JSON search/filter functionality
  • Copy to clipboard button
  • Pretty-print/raw JSON toggle
  • Export functionality for the data

human (Feb 7, 2025, 09:32 PM)

I made one change, the URL pattern needs to be:

const CLAUDE_URL_PATTERN = /^https://claude.ai/api/organizations/[\w-]+/chat_conversations/[\w-]+?tree=True.*?/;

I don't need a selector in the popup. Instead can we have a refresh button that reloads the current tab?

assistant (Feb 7, 2025, 09:32 PM)

I'll update the URL pattern and modify the popup to have a refresh button instead of the conversation selector.

Claude Chat JSON Interceptor

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "tabs",
    "*://*.claude.ai/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

// background.js
const CLAUDE_URL_PATTERN = /^https:\/\/claude\.ai\/api\/organizations\/[\w-]+\/chat_conversations\/[\w-]+\?tree=True.*?/;

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.type === "xmlhttprequest" && CLAUDE_URL_PATTERN.test(details.url)) {
      try {
        let filter = browser.webRequest.filterResponseData(details.requestId);
        let decoder = new TextDecoder("utf-8");
        let encoder = new TextEncoder();
        let str = '';

        filter.ondata = event => {
          str += decoder.decode(event.data, {stream: true});
          filter.write(event.data);
        };

        filter.onstop = event => {
          try {
            const jsonData = JSON.parse(str);
            chrome.storage.local.set({
              lastIntercepted: {
                timestamp: new Date().toISOString(),
                url: details.url,
                content: jsonData
              }
            });
          } catch (e) {
            console.log('Not valid JSON:', e);
          }
          filter.disconnect();
        };
      } catch (e) {
        console.error('Error intercepting request:', e);
      }
    }
    return { cancel: false };
  },
  {
    urls: ["*://claude.ai/api/organizations/*/chat_conversations/*"],
    types: ["xmlhttprequest"]
  },
  ["blocking"]
);

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
    #refreshButton {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #refreshButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <button id="refreshButton">Refresh Page</button>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');

  // Load the most recent intercepted content
  chrome.storage.local.get('lastIntercepted', function(data) {
    if (data.lastIntercepted) {
      textArea.value = JSON.stringify(data.lastIntercepted.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(data.lastIntercepted.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  });

  // Add refresh button functionality
  refreshButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        chrome.tabs.reload(tabs[0].id);
      }
    });
  });
});

Key changes made:

  1. Updated the URL pattern to match your specification with ?tree=True
  2. Removed the conversation selector and simplified storage to just keep the last intercepted content
  3. Added a refresh button that reloads the current tab
  4. Added the tabs permission to enable tab reloading
  5. Simplified the UI to just show the most recent JSON content
  6. Kept the timestamp display to show when the content was last updated

The extension will now:

  1. Intercept JSON from the specified Claude API URL pattern
  2. Display the most recently intercepted JSON in the popup
  3. Allow you to refresh the current page with a button click

Would you like any adjustments to the styling or functionality?

human (Feb 7, 2025, 09:38 PM)

If I have the popup open, click refresh, it stores the new content in chrome.storage.local, but the popup won't show it until I close and re-open the popup. Can we have it automatically display the new content?

assistant (Feb 7, 2025, 09:39 PM)

Yes, we can use Chrome's storage onChanged event listener to update the popup content automatically when new data is stored. I'll modify the popup.js file.

Claude Chat JSON Interceptor

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "tabs",
    "*://*.claude.ai/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

// background.js
const CLAUDE_URL_PATTERN = /^https:\/\/claude\.ai\/api\/organizations\/[\w-]+\/chat_conversations\/[\w-]+\?tree=True.*?/;

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.type === "xmlhttprequest" && CLAUDE_URL_PATTERN.test(details.url)) {
      try {
        let filter = browser.webRequest.filterResponseData(details.requestId);
        let decoder = new TextDecoder("utf-8");
        let encoder = new TextEncoder();
        let str = '';

        filter.ondata = event => {
          str += decoder.decode(event.data, {stream: true});
          filter.write(event.data);
        };

        filter.onstop = event => {
          try {
            const jsonData = JSON.parse(str);
            chrome.storage.local.set({
              lastIntercepted: {
                timestamp: new Date().toISOString(),
                url: details.url,
                content: jsonData
              }
            });
          } catch (e) {
            console.log('Not valid JSON:', e);
          }
          filter.disconnect();
        };
      } catch (e) {
        console.error('Error intercepting request:', e);
      }
    }
    return { cancel: false };
  },
  {
    urls: ["*://claude.ai/api/organizations/*/chat_conversations/*"],
    types: ["xmlhttprequest"]
  },
  ["blocking"]
);

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
    #refreshButton {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #refreshButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <button id="refreshButton">Refresh Page</button>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');

  function updateContent(data) {
    if (data.lastIntercepted) {
      textArea.value = JSON.stringify(data.lastIntercepted.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(data.lastIntercepted.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  }

  // Load initial content
  chrome.storage.local.get('lastIntercepted', function(data) {
    updateContent(data);
  });

  // Listen for storage changes
  chrome.storage.onChanged.addListener(function(changes, namespace) {
    if (namespace === 'local' && changes.lastIntercepted) {
      updateContent({ lastIntercepted: changes.lastIntercepted.newValue });
    }
  });

  // Add refresh button functionality
  refreshButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        chrome.tabs.reload(tabs[0].id);
      }
    });
  });
});

Key changes made:

  1. Added a updateContent function to centralize the content update logic
  2. Added a chrome.storage.onChanged listener that automatically updates the popup content when the storage changes
  3. Refactored the initial content loading to use the same updateContent function

Now when you:

  1. Have the popup open
  2. Click refresh
  3. New content is intercepted and stored

The popup will automatically update to show the new content without requiring you to close and reopen it. The timestamp will also update to reflect when the new content was received.

human (Feb 7, 2025, 09:42 PM)

Thanks. I now want to add a second button, that uploads the JSON content as a GitHub Gist

assistant (Feb 7, 2025, 09:43 PM)

I'll add a "Create Gist" button that uploads the JSON content to GitHub Gists. We'll need to add GitHub authentication handling.

Claude Chat JSON Interceptor with Gist Upload

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "tabs",
    "identity",
    "*://*.claude.ai/*",
    "*://github.com/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "oauth2": {
    "client_id": "YOUR_GITHUB_CLIENT_ID",
    "scopes": ["gist"]
  }
}

// background.js
[Previous background.js code remains the same]

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
    .button-container {
      display: flex;
      gap: 10px;
    }
    .button {
      padding: 8px 16px;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #refreshButton {
      background-color: #007bff;
    }
    #refreshButton:hover {
      background-color: #0056b3;
    }
    #gistButton {
      background-color: #28a745;
    }
    #gistButton:hover {
      background-color: #218838;
    }
    .status {
      margin-top: 10px;
      padding: 8px;
      border-radius: 4px;
      display: none;
    }
    .status.success {
      background-color: #d4edda;
      color: #155724;
      display: block;
    }
    .status.error {
      background-color: #f8d7da;
      color: #721c24;
      display: block;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <div class="button-container">
      <button id="refreshButton" class="button">Refresh Page</button>
      <button id="gistButton" class="button">Create Gist</button>
    </div>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <div id="status" class="status"></div>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');
  const gistButton = document.getElementById('gistButton');
  const statusDiv = document.getElementById('status');

  function updateContent(data) {
    if (data.lastIntercepted) {
      textArea.value = JSON.stringify(data.lastIntercepted.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(data.lastIntercepted.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  }

  function showStatus(message, isError = false) {
    statusDiv.textContent = message;
    statusDiv.className = `status ${isError ? 'error' : 'success'}`;
    setTimeout(() => {
      statusDiv.className = 'status';
    }, 5000);
  }

  async function getGithubToken() {
    try {
      return new Promise((resolve, reject) => {
        chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
          if (chrome.runtime.lastError) {
            reject(chrome.runtime.lastError);
          } else {
            resolve(token);
          }
        });
      });
    } catch (error) {
      throw new Error('Failed to get GitHub token: ' + error.message);
    }
  }

  async function createGist(content) {
    try {
      const token = await getGithubToken();
      const timestamp = new Date().toISOString();
      
      const response = await fetch('https://api.github.com/gists', {
        method: 'POST',
        headers: {
          'Authorization': `token ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          description: 'Claude Chat JSON Content',
          public: false,
          files: {
            [`claude_chat_${timestamp}.json`]: {
              content: JSON.stringify(content, null, 2)
            }
          }
        })
      });

      if (!response.ok) {
        throw new Error(`GitHub API responded with ${response.status}`);
      }

      const data = await response.json();
      return data.html_url;
    } catch (error) {
      throw new Error('Failed to create gist: ' + error.message);
    }
  }

  // Load initial content
  chrome.storage.local.get('lastIntercepted', function(data) {
    updateContent(data);
  });

  // Listen for storage changes
  chrome.storage.onChanged.addListener(function(changes, namespace) {
    if (namespace === 'local' && changes.lastIntercepted) {
      updateContent({ lastIntercepted: changes.lastIntercepted.newValue });
    }
  });

  // Refresh button functionality
  refreshButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        chrome.tabs.reload(tabs[0].id);
      }
    });
  });

  // Gist button functionality
  gistButton.addEventListener('click', async function() {
    try {
      gistButton.disabled = true;
      const content = JSON.parse(textArea.value);
      const gistUrl = await createGist(content);
      showStatus(`Gist created successfully! URL: ${gistUrl}`);
      // Open the gist in a new tab
      chrome.tabs.create({ url: gistUrl });
    } catch (error) {
      showStatus(error.message, true);
    } finally {
      gistButton.disabled = false;
    }
  });
});

To use the Gist functionality, you'll need to:

  1. Create a GitHub OAuth App:

    • Go to GitHub Settings > Developer Settings > OAuth Apps > New OAuth App
    • Set Application name (e.g., "Claude Chat JSON Interceptor")
    • Set Homepage URL (can be anything for development)
    • Set Authorization callback URL to: https://<your-extension-id>.chromiumapp.org/
    • Get the Client ID and replace YOUR_GITHUB_CLIENT_ID in manifest.json

  2. After installing the extension:

    • First click on the "Create Gist" button will trigger GitHub authentication
    • Accept the permissions request
    • The extension will then create private gists with your JSON content
    • Each gist will be opened in a new tab automatically

The new features include:

  • GitHub OAuth authentication
  • Gist creation with timestamped filenames
  • Status messages for success/failure
  • Automatic opening of created gists
  • Button state management during creation
  • Error handling and user feedback

Would you like me to modify any part of the implementation or add additional features to the Gist creation?

human (Feb 7, 2025, 09:44 PM)

Will this work in Firefox too?

assistant (Feb 7, 2025, 09:45 PM)

No, this implementation is Chrome-specific. Firefox uses a different OAuth implementation and has its own extension APIs. Let me modify the code to work in both browsers.

Cross-browser Claude Chat JSON Interceptor

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "tabs",
    "*://*.claude.ai/*",
    "*://github.com/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  // Firefox specific settings
  "browser_specific_settings": {
    "gecko": {
      "id": "claude-json-interceptor@example.com",
      "strict_min_version": "57.0"
    }
  }
}

// background.js
const CLAUDE_URL_PATTERN = /^https:\/\/claude\.ai\/api\/organizations\/[\w-]+\/chat_conversations\/[\w-]+\?tree=True.*?/;

const browserAPI = typeof browser !== 'undefined' ? browser : chrome;

browserAPI.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.type === "xmlhttprequest" && CLAUDE_URL_PATTERN.test(details.url)) {
      try {
        const filter = browserAPI.webRequest.filterResponseData(details.requestId);
        const decoder = new TextDecoder("utf-8");
        let str = '';

        filter.ondata = event => {
          str += decoder.decode(event.data, {stream: true});
          filter.write(event.data);
        };

        filter.onstop = event => {
          try {
            const jsonData = JSON.parse(str);
            browserAPI.storage.local.set({
              lastIntercepted: {
                timestamp: new Date().toISOString(),
                url: details.url,
                content: jsonData
              }
            });
          } catch (e) {
            console.log('Not valid JSON:', e);
          }
          filter.disconnect();
        };
      } catch (e) {
        console.error('Error intercepting request:', e);
      }
    }
    return { cancel: false };
  },
  {
    urls: ["*://claude.ai/api/organizations/*/chat_conversations/*"],
    types: ["xmlhttprequest"]
  },
  ["blocking"]
);

// popup.html (remains the same as previous version)

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const browserAPI = typeof browser !== 'undefined' ? browser : chrome;
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');
  const gistButton = document.getElementById('gistButton');
  const statusDiv = document.getElementById('status');

  // Your GitHub OAuth App credentials
  const CLIENT_ID = 'YOUR_GITHUB_CLIENT_ID';
  const REDIRECT_URI = browserAPI.identity.getRedirectURL ? 
    browserAPI.identity.getRedirectURL() : 
    chrome.identity.getRedirectURL();

  function updateContent(data) {
    if (data.lastIntercepted) {
      textArea.value = JSON.stringify(data.lastIntercepted.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(data.lastIntercepted.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  }

  function showStatus(message, isError = false) {
    statusDiv.textContent = message;
    statusDiv.className = `status ${isError ? 'error' : 'success'}`;
    setTimeout(() => {
      statusDiv.className = 'status';
    }, 5000);
  }

  // Cross-browser GitHub authentication
  async function getGithubToken() {
    const authUrl = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=gist&redirect_uri=${encodeURIComponent(REDIRECT_URI)}`;
    
    try {
      let authResponse;
      
      if (typeof browser !== 'undefined') {
        // Firefox authentication
        authResponse = await browser.identity.launchWebAuthFlow({
          interactive: true,
          url: authUrl
        });
      } else {
        // Chrome authentication
        authResponse = await new Promise((resolve, reject) => {
          chrome.identity.launchWebAuthFlow({
            interactive: true,
            url: authUrl
          }, (responseUrl) => {
            if (chrome.runtime.lastError) {
              reject(chrome.runtime.lastError);
            } else {
              resolve(responseUrl);
            }
          });
        });
      }

      // Extract the code from the response URL
      const code = new URL(authResponse).searchParams.get('code');
      
      // Exchange code for token (this needs to be done through your backend)
      // For security reasons, the client_secret cannot be included in the extension
      // You'll need to set up a small backend service to handle the token exchange
      const tokenResponse = await fetch('YOUR_BACKEND_TOKEN_EXCHANGE_ENDPOINT', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ code })
      });

      const { access_token } = await tokenResponse.json();
      return access_token;

    } catch (error) {
      throw new Error('Failed to get GitHub token: ' + error.message);
    }
  }

  async function createGist(content) {
    try {
      const token = await getGithubToken();
      const timestamp = new Date().toISOString();
      
      const response = await fetch('https://api.github.com/gists', {
        method: 'POST',
        headers: {
          'Authorization': `token ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          description: 'Claude Chat JSON Content',
          public: false,
          files: {
            [`claude_chat_${timestamp}.json`]: {
              content: JSON.stringify(content, null, 2)
            }
          }
        })
      });

      if (!response.ok) {
        throw new Error(`GitHub API responded with ${response.status}`);
      }

      const data = await response.json();
      return data.html_url;
    } catch (error) {
      throw new Error('Failed to create gist: ' + error.message);
    }
  }

  // Load initial content
  browserAPI.storage.local.get('lastIntercepted', function(data) {
    updateContent(data);
  });

  // Listen for storage changes
  browserAPI.storage.onChanged.addListener(function(changes, namespace) {
    if (namespace === 'local' && changes.lastIntercepted) {
      updateContent({ lastIntercepted: changes.lastIntercepted.newValue });
    }
  });

  // Refresh button functionality
  refreshButton.addEventListener('click', function() {
    browserAPI.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        browserAPI.tabs.reload(tabs[0].id);
      }
    });
  });

  // Gist button functionality
  gistButton.addEventListener('click', async function() {
    try {
      gistButton.disabled = true;
      const content = JSON.parse(textArea.value);
      const gistUrl = await createGist(content);
      showStatus(`Gist created successfully! URL: ${gistUrl}`);
      browserAPI.tabs.create({ url: gistUrl });
    } catch (error) {
      showStatus(error.message, true);
    } finally {
      gistButton.disabled = false;
    }
  });
});

Key changes for cross-browser support:

  1. Added Firefox-specific manifest settings with browser_specific_settings
  2. Created a browserAPI variable that uses the appropriate API (browser or chrome)
  3. Modified the authentication flow to work in both browsers using launchWebAuthFlow
  4. Added proper Firefox extension ID in the manifest
  5. Used browser's redirect URL generation instead of hardcoding it

Important note about GitHub OAuth: Due to security concerns, you'll need to set up a small backend service to handle the OAuth token exchange. The client secret should never be included in the extension code. Your backend should:

  1. Receive the OAuth code
  2. Exchange it with GitHub for an access token using your client secret
  3. Return the access token to the extension

To set this up:

  1. Create a GitHub OAuth App (as described before)
  2. Set up a small backend service (e.g., using Node.js, Python, etc.)
  3. Update the YOUR_BACKEND_TOKEN_EXCHANGE_ENDPOINT in the code
  4. Update the YOUR_GITHUB_CLIENT_ID in the code

Would you like me to:

  1. Provide an example backend implementation for the token exchange?
  2. Add any additional cross-browser features?
  3. Modify the authentication flow in any way?

human (Feb 7, 2025, 09:46 PM)

Let's take a step back. How about we let the user configure a GitHub token in the addon preferences. If it's set, we can display the create gist button.

assistant (Feb 7, 2025, 09:46 PM)

Ah, that's a much simpler approach! Let's modify the extension to add a settings page and make the Gist button conditional on having a configured token.

Claude Chat JSON Interceptor with Token Config

// manifest.json
{
  "manifest_version": 2,
  "name": "Claude Chat JSON Interceptor",
  "version": "1.0",
  "description": "Intercepts and displays JSON content from Claude chat API",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "tabs",
    "*://*.claude.ai/*",
    "*://api.github.com/*"
  ],
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

// options.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      padding: 1em;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .container {
      max-width: 500px;
      margin: 0 auto;
    }
    .field {
      margin-bottom: 1em;
    }
    label {
      display: block;
      margin-bottom: 0.5em;
      font-weight: 500;
    }
    input[type="text"] {
      width: 100%;
      padding: 0.5em;
      margin-bottom: 0.5em;
    }
    .note {
      font-size: 0.9em;
      color: #666;
    }
    #status {
      margin-top: 1em;
      padding: 0.5em;
      display: none;
    }
    #status.success {
      background-color: #d4edda;
      color: #155724;
    }
    #status.error {
      background-color: #f8d7da;
      color: #721c24;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="field">
      <label for="github-token">GitHub Personal Access Token</label>
      <input type="text" id="github-token">
      <p class="note">
        Create a token with 'gist' scope at: 
        <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings → Developer Settings → Personal access tokens</a>
      </p>
    </div>
    <button id="save">Save</button>
    <div id="status"></div>
  </div>
  <script src="options.js"></script>
</body>
</html>

// options.js
document.addEventListener('DOMContentLoaded', function() {
  const tokenInput = document.getElementById('github-token');
  const saveButton = document.getElementById('save');
  const status = document.getElementById('status');

  // Load saved token
  chrome.storage.local.get('githubToken', function(data) {
    if (data.githubToken) {
      tokenInput.value = data.githubToken;
    }
  });

  function showStatus(message, isError = false) {
    status.textContent = message;
    status.className = isError ? 'error' : 'success';
    status.style.display = 'block';
    setTimeout(() => {
      status.style.display = 'none';
    }, 3000);
  }

  saveButton.addEventListener('click', function() {
    const token = tokenInput.value.trim();
    
    if (!token) {
      showStatus('Please enter a token', true);
      return;
    }

    chrome.storage.local.set({
      githubToken: token
    }, function() {
      showStatus('Settings saved successfully!');
    });
  });
});

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
    .button-container {
      display: flex;
      gap: 10px;
    }
    .button {
      padding: 8px 16px;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #refreshButton {
      background-color: #007bff;
    }
    #refreshButton:hover {
      background-color: #0056b3;
    }
    #gistButton {
      background-color: #28a745;
    }
    #gistButton:hover {
      background-color: #218838;
    }
    #configureLink {
      font-size: 0.9em;
      color: #666;
      text-decoration: none;
      margin-top: 5px;
      display: inline-block;
    }
    .status {
      margin-top: 10px;
      padding: 8px;
      border-radius: 4px;
      display: none;
    }
    .status.success {
      background-color: #d4edda;
      color: #155724;
      display: block;
    }
    .status.error {
      background-color: #f8d7da;
      color: #721c24;
      display: block;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <div class="button-container">
      <button id="refreshButton" class="button">Refresh Page</button>
      <button id="gistButton" class="button" style="display: none">Create Gist</button>
    </div>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <div id="status" class="status"></div>
  <textarea id="jsonContent" readonly></textarea>
  <a href="#" id="configureLink">Configure GitHub token</a>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');
  const gistButton = document.getElementById('gistButton');
  const configureLink = document.getElementById('configureLink');
  const statusDiv = document.getElementById('status');

  function updateContent(data) {
    if (data.lastIntercepted) {
      textArea.value = JSON.stringify(data.lastIntercepted.content, null, 2);
      timestampDiv.textContent = `Last updated: ${new Date(data.lastIntercepted.timestamp).toLocaleString()}`;
    } else {
      textArea.value = 'No JSON content intercepted yet.';
      timestampDiv.textContent = '';
    }
  }

  function showStatus(message, isError = false) {
    statusDiv.textContent = message;
    statusDiv.className = `status ${isError ? 'error' : 'success'}`;
    setTimeout(() => {
      statusDiv.className = 'status';
    }, 5000);
  }

  async function createGist(content, token) {
    const response = await fetch('https://api.github.com/gists', {
      method: 'POST',
      headers: {
        'Authorization': `token ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        description: 'Claude Chat JSON Content',
        public: false,
        files: {
          [`claude_chat_${new Date().toISOString()}.json`]: {
            content: JSON.stringify(content, null, 2)
          }
        }
      })
    });

    if (!response.ok) {
      throw new Error(`GitHub API responded with ${response.status}`);
    }

    return await response.json();
  }

  // Load initial content and check for GitHub token
  chrome.storage.local.get(['lastIntercepted', 'githubToken'], function(data) {
    updateContent(data);
    if (data.githubToken) {
      gistButton.style.display = 'block';
    }
  });

  // Listen for storage changes
  chrome.storage.onChanged.addListener(function(changes, namespace) {
    if (changes.lastIntercepted) {
      updateContent({ lastIntercepted: changes.lastIntercepted.newValue });
    }
    if (changes.githubToken) {
      gistButton.style.display = changes.githubToken.newValue ? 'block' : 'none';
    }
  });

  // Refresh button functionality
  refreshButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs[0]) {
        chrome.tabs.reload(tabs[0].id);
      }
    });
  });

  // Configure link functionality
  configureLink.addEventListener('click', function(e) {
    e.preventDefault();
    chrome.runtime.openOptionsPage();
  });

  // Gist button functionality
  gistButton.addEventListener('click', async function() {
    try {
      gistButton.disabled = true;
      const content = JSON.parse(textArea.value);
      
      // Get the token from storage
      const data = await new Promise(resolve => {
        chrome.storage.local.get('githubToken', resolve);
      });
      
      if (!data.githubToken) {
        throw new Error('GitHub token not configured');
      }

      const gistData = await createGist(content, data.githubToken);
      showStatus(`Gist created successfully! URL: ${gistData.html_url}`);
      chrome.tabs.create({ url: gistData.html_url });
    } catch (error) {
      showStatus(error.message, true);
    } finally {
      gistButton.disabled = false;
    }
  });
});

Key changes:

  1. Added an options page for token configuration:

    • Simple form to input GitHub token
    • Saves token to chrome.storage.local
    • Includes link to GitHub token creation page

  2. Modified popup:

    • Gist button only shows when token is configured
    • Added link to open options page
    • Updates UI when token is added/removed

  3. Simplified GitHub integration:

    • No OAuth flow needed
    • Direct API calls using personal access token
    • Better error handling

To use the extension:

  1. Install the extension
  2. Click "Configure GitHub token" link
  3. Create a GitHub personal access token with 'gist' scope
  4. Enter the token in the options page
  5. The "Create Gist" button will appear in the popup
  6. Click to create private gists of the JSON content

The extension will now work in both Chrome and Firefox, with a much simpler configuration process. Would you like me to modify anything about the implementation?

human (Feb 7, 2025, 10:00 PM)

Yay! Can we move the "Configure GitHub token" link to be a button that's a settings gear with the other buttons?

assistant (Feb 7, 2025, 10:01 PM)

I'll update the popup to include a settings gear icon button in the button group.

Claude Chat JSON Interceptor with Settings Button

// popup.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 600px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    #jsonContent {
      width: 100%;
      height: 400px;
      margin-top: 10px;
      font-family: monospace;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timestamp {
      color: #666;
      font-size: 0.9em;
    }
    .button-container {
      display: flex;
      gap: 10px;
    }
    .button {
      padding: 8px 16px;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    #refreshButton {
      background-color: #007bff;
    }
    #refreshButton:hover {
      background-color: #0056b3;
    }
    #gistButton {
      background-color: #28a745;
    }
    #gistButton:hover {
      background-color: #218838;
    }
    #settingsButton {
      background-color: #6c757d;
      padding: 8px;
    }
    #settingsButton:hover {
      background-color: #5a6268;
    }
    #settingsButton svg {
      width: 16px;
      height: 16px;
    }
    .status {
      margin-top: 10px;
      padding: 8px;
      border-radius: 4px;
      display: none;
    }
    .status.success {
      background-color: #d4edda;
      color: #155724;
      display: block;
    }
    .status.error {
      background-color: #f8d7da;
      color: #721c24;
      display: block;
    }
  </style>
</head>
<body>
  <div class="header">
    <h3>Claude Chat JSON Content</h3>
    <div class="button-container">
      <button id="refreshButton" class="button">Refresh Page</button>
      <button id="gistButton" class="button" style="display: none">Create Gist</button>
      <button id="settingsButton" class="button" title="Configure GitHub Token">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="timestamp" id="timestamp"></div>
  <div id="status" class="status"></div>
  <textarea id="jsonContent" readonly></textarea>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const textArea = document.getElementById('jsonContent');
  const timestampDiv = document.getElementById('timestamp');
  const refreshButton = document.getElementById('refreshButton');
  const gistButton = document.getElementById('gistButton');
  const settingsButton = document.getElementById('settingsButton');
  const statusDiv = document.getElementById('status');

  // ... (rest of the popup.js code remains the same, just replace configureLink with settingsButton)

  // Settings button functionality
  settingsButton.addEventListener('click', function() {
    chrome.runtime.openOptionsPage();
  });

  // ... (rest of the event listeners and functions remain the same)
});

Key changes:

  1. Removed the text link at the bottom
  2. Added a settings gear button to the button group
  3. Styled the gear button to match the other buttons:
    • Same height and border radius
    • Gray background color
    • White gear icon
    • Hover state
  4. Added a tooltip that shows "Configure GitHub Token" on hover
  5. Used an SVG gear icon that matches the style of the UI

The buttons now form a cohesive group with:

  • Refresh (blue)
  • Create Gist (green, when token is configured)
  • Settings gear (gray)

Would you like me to adjust any of the styling or change the gear icon to a different design?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment