feat: add Gemini AI Studio support with export functionality

Author: Trifall

package-lock.json

@@ -67,7 +67,8 @@
     "run": {
       "startUrl": [
         "https://chatgpt.com",
-        "https://claude.ai"
+        "https://claude.ai",
+        "https://aistudio.google.com"
       ]
     }
   },

package.json

@@ -31,6 +31,10 @@ ChatGPT Button:
 
 ![ChatGPT Export Button](https://github.com/user-attachments/assets/9a030781-4e8d-47a0-87b2-c15461f08ce4)
 
+Gemini AIStudio Button:
+
+<!-- ![Gemini AIStudio Export Button]() -->
+
 ## Getting started
 
 <!--
@@ -52,7 +56,7 @@ The build step will create the `dist` folder, this folder will contain the gener
 Using [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
 
 1. Run `npm run watch` to watch for file changes and build continuously
-1. Run `npm install --global web-ext` (only only for the first time)
+1. Run `npm install --global web-ext` (only for the first time)
 1. In another terminal, run `web-ext run -t chromium`
 1. Check that the extension is loaded by opening the extension options ([in Firefox](media/extension_options_firefox.png) or [in Chrome](media/extension_options_chrome.png)).
 

readme.md

@@ -3,42 +3,75 @@ import browser from 'webextension-polyfill'
 import { detectSite } from '@/modules/site-detection'
 import { createExportButton } from '@/modules/ui'
 
-console.log('💈 Content script loaded for', browser.runtime.getManifest().name)
+console.log(' Content script loaded for', browser.runtime.getManifest().name)
 
 function init() {
   const site = detectSite()
 
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.addedNodes.length) {
-        if (site === 'claude') {
-          // for Claude.ai, look for the share button container
-          const shareButtonContainer = document.querySelector('button[data-testid="share-button"]')
-            ?.parentElement?.parentElement
-          if (
-            shareButtonContainer &&
-            !document.querySelector('[data-testid="export-chat-button"]')
-          ) {
-            const exportButton = createExportButton()
-            shareButtonContainer.parentElement?.appendChild(exportButton)
-          }
-        } else {
-          // for ChatGPT, look for the share button
-          const shareButton = document.querySelector('[data-testid="share-chat-button"]')
-          if (shareButton && !document.querySelector('[data-testid="export-chat-button"]')) {
-            const exportButton = createExportButton()
-            shareButton.parentElement?.insertBefore(exportButton, shareButton)
+  // track if we've already added the button to prevent infinite loops
+  let buttonAdded = false
+
+  // for Gemini, wait a bit before starting to observe since the Angular app needs time to load
+  const startDelay = site === 'gemini' ? 2000 : 0
+
+  setTimeout(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length) {
+          if (site === 'claude') {
+            // for Claude.ai, look for the share button container
+            const shareButtonContainer = document.querySelector(
+              'button[data-testid="share-button"]'
+            )?.parentElement?.parentElement
+            if (
+              shareButtonContainer &&
+              !document.querySelector('[data-testid="export-chat-button"]')
+            ) {
+              const exportButton = createExportButton()
+              shareButtonContainer.parentElement?.appendChild(exportButton)
+            }
+          } else if (site === 'gemini' && !buttonAdded) {
+            // for Gemini (aistudio.google.com), add retry logic due to delayed Angular UI loading
+            const tryAddGeminiButton = (retryCount = 0) => {
+              const toolbarRight = document.querySelector('ms-toolbar .toolbar-right')
+              if (
+                toolbarRight &&
+                !document.querySelector('[data-testid="export-chat-button"]') &&
+                !buttonAdded
+              ) {
+                const exportButton = createExportButton()
+                // insert before the last button (tune/settings button)
+                const lastButton = toolbarRight.lastElementChild
+                if (lastButton && lastButton.tagName === 'BUTTON') {
+                  toolbarRight.insertBefore(exportButton, lastButton)
+                } else {
+                  toolbarRight.appendChild(exportButton)
+                }
+                buttonAdded = true
+              } else if (!toolbarRight && retryCount < 4 && !buttonAdded) {
+                // retry up to 5 times with increasing delay
+                setTimeout(() => tryAddGeminiButton(retryCount + 1), 1000 + retryCount * 500)
+              }
+            }
+            tryAddGeminiButton()
+          } else {
+            // for ChatGPT, look for the share button
+            const shareButton = document.querySelector('[data-testid="share-chat-button"]')
+            if (shareButton && !document.querySelector('[data-testid="export-chat-button"]')) {
+              const exportButton = createExportButton()
+              shareButton.parentElement?.insertBefore(exportButton, shareButton)
+            }
           }
         }
-      }
+      })
     })
-  })
 
-  // start observing
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
+    // start observing
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+  }, startDelay)
 }
 
 init()

src/content.ts

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/chrome-manifest",
   "name": "Chat Export",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Export LLM chat conversations to Markdown, XML, JSON, and HTML",
   "manifest_version": 3,
   "minimum_chrome_version": "121",
@@ -18,7 +18,12 @@
   "host_permissions": ["https://chat.openai.com/*"],
   "content_scripts": [
     {
-      "matches": ["https://chat.openai.com/*", "https://chatgpt.com/*", "https://claude.ai/*"],
+      "matches": [
+        "https://chat.openai.com/*",
+        "https://chatgpt.com/*",
+        "https://claude.ai/*",
+        "https://aistudio.google.com/*"
+      ],
       "js": ["content.ts"],
       "css": ["styles/content.css"],
       "run_at": "document_end"

src/manifest.json

@@ -97,6 +97,120 @@ export async function getChatContent(restoreClipboard: boolean = false): Promise
 
       messages.push({ role, content })
     }
+  } else if (site === 'gemini') {
+    // aistudio.google.com (Gemini)
+    const chatTurns = document.querySelectorAll('ms-chat-turn')
+
+    for (const turn of chatTurns) {
+      // scroll this specific turn into view to ensure it's loaded
+      turn.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      })
+
+      // wait for content to load
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // determine role based on the chat-turn-container class
+      const container = turn.querySelector('.chat-turn-container')
+      if (!container) {
+        continue
+      }
+
+      const role = container.classList.contains('user') ? 'user' : 'assistant'
+
+      // find the more options button
+      const optionsElement = turn.querySelector('ms-chat-turn-options')
+      if (!optionsElement) {
+        continue
+      }
+
+      const moreOptionsButton = optionsElement.querySelector(
+        'button[aria-label="Open options"]'
+      ) as HTMLButtonElement
+      if (!moreOptionsButton) {
+        continue
+      }
+
+      // click the more options button to open the overlay menu
+      moreOptionsButton.click()
+
+      // wait for overlay to appear
+      await new Promise((resolve) => setTimeout(resolve, 300))
+
+      // find the overlay container (it's a sibling of body)
+      const overlayContainer = document.querySelector('.cdk-overlay-container')
+      if (!overlayContainer) {
+        // if we can't find the overlay, skip this message
+        continue
+      }
+
+      // find the "Copy as markdown" button in the overlay
+      let copyMarkdownButton: HTMLButtonElement | null = null
+
+      // try different approaches to find the copy as markdown button
+      const buttons = Array.from(overlayContainer.querySelectorAll('button'))
+      for (const btn of buttons) {
+        if (btn.textContent?.includes('Copy as markdown')) {
+          copyMarkdownButton = btn as HTMLButtonElement
+          break
+        }
+      }
+
+      // also try finding by the specific icon class mentioned in the HTML
+      if (!copyMarkdownButton) {
+        copyMarkdownButton = overlayContainer.querySelector(
+          'button .copy-markdown-button'
+        ) as HTMLButtonElement
+      }
+
+      if (!copyMarkdownButton) {
+        // close the overlay by clicking outside or pressing Escape
+        const backdrop = document.querySelector('.cdk-overlay-backdrop')
+        if (backdrop) {
+          ;(backdrop as HTMLElement).click()
+        }
+        continue
+      }
+
+      // click the copy as markdown button
+      copyMarkdownButton.click()
+
+      // wait for clipboard to be updated
+      await new Promise((resolve) => setTimeout(resolve, 200))
+
+      // get the content from clipboard
+      const content = await navigator.clipboard.readText()
+
+      // Check for thinking content in Gemini messages
+      let thinkingContent = ''
+      if (role === 'assistant') {
+        const thinkingChunk = turn.querySelector('ms-thought-chunk')
+        if (thinkingChunk) {
+          // Find the thinking panel that contains "Thoughts" text
+          const thinkingPanel = thinkingChunk.querySelector('mat-panel-title')
+          if (thinkingPanel && thinkingPanel.textContent?.includes('Thoughts')) {
+            // Extract thinking content from the expanded panel
+            const thinkingBody = thinkingChunk.querySelector('.mat-expansion-panel-body')
+            if (thinkingBody) {
+              const thinkingText = thinkingBody.textContent?.trim() || ''
+              if (thinkingText) {
+                thinkingContent = `*Thinking*\n${thinkingText}\n\n`
+              }
+            }
+          }
+        }
+      }
+
+      if (content && content.trim()) {
+        // Combine thinking content (if any) with regular content
+        const finalContent = thinkingContent + content.trim()
+        messages.push({ role, content: finalContent })
+      }
+
+      // wait a bit to avoid rate limiting
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
   } else {
     // claude.ai
     const messageDivs = document.querySelectorAll('div.font-claude-message, div.font-user-message')

src/modules/chat-content.ts

@@ -1,3 +1,4 @@
 export const CLAUDE_URLS = ['https://claude.ai']
 export const CHATGPT_URLS = ['https://chat.openai.com', 'https://chatgpt.com']
+export const GEMINI_URLS = ['https://aistudio.google.com']
 export const SURROUND_PASTE_FILE_IN_BACKTICKS = true

src/modules/constants.ts

@@ -1,7 +1,7 @@
 import { Message } from './types'
 
 export async function formatContent(messages: Array<Message>, format: string): Promise<string> {
-  console.log(`Messages: ${JSON.stringify(messages)}`)
+  // console.log(`Messages: ${JSON.stringify(messages)}`)
 
   switch (format) {
     case 'markdown':

src/modules/content-formatting.ts

@@ -1,4 +1,4 @@
-import { CHATGPT_URLS, CLAUDE_URLS } from './constants'
+import { CHATGPT_URLS, CLAUDE_URLS, GEMINI_URLS } from './constants'
 import { Site } from './types'
 
 export function detectSite(): Site {
@@ -9,5 +9,8 @@ export function detectSite(): Site {
   if (CLAUDE_URLS.some((u) => url.includes(u))) {
     return 'claude'
   }
+  if (GEMINI_URLS.some((u) => url.includes(u))) {
+    return 'gemini'
+  }
   throw new Error('Unsupported site')
 }

src/modules/site-detection.ts

@@ -1,4 +1,4 @@
-export type Site = 'chatgpt' | 'claude'
+export type Site = 'chatgpt' | 'claude' | 'gemini'
 
 export interface Message {
   role: string