feat: claude support

Author: L-a-r-t

src/api/getConversation.ts

@@ -1,9 +1,9 @@
 import { getConversation as chatgptGetConversation } from "~models/chatgpt/api/getConversation"
+import { getConversation as claudeGetConversation } from "~models/claude/api/getConversation"
+import { getConversation as deepseekGetConversation } from "~models/deepseek/api/getConversation"
+import { getConversation as mistralGetConversation } from "~models/mistral/api/getConversation"
 import type { SupportedModels } from "~utils/types"
 
-import { getConversation as deepseekGetConversation } from "../models/deepseek/api/getConversation"
-import { getConversation as mistralGetConversation } from "./mistral/getConversation"
-
 export const getConversation = async ({ model, params }: Params) => {
   switch (model) {
     case "chatgpt":
@@ -12,6 +12,8 @@ export const getConversation = async ({ model, params }: Params) => {
       return deepseekGetConversation(params)
     case "mistral":
       return mistralGetConversation(params)
+    case "claude":
+      return claudeGetConversation(params)
     default:
       throw new Error("Model not supported")
   }

src/background/functions/save.ts

@@ -49,7 +49,8 @@ const save = async (
 
     console.log({ rawHeaders })
     const headers = convertHeaders(
-      rawHeaders.filter((h) => h.name.toLowerCase() != "cookie")
+      // rawHeaders.filter((h) => h.name.toLowerCase() != "cookie")
+      rawHeaders
     )
     const rawConversation = await getConversation({
       model: model,
@@ -65,7 +66,11 @@ const save = async (
       textDocs =
         (await getConversationTextdocs({
           model: model as any,
-          params: { rawConversation, headers, includeVersions: true }
+          params: {
+            rawConversation,
+            headers,
+            includeVersions: true
+          }
         })) ?? []
     }
 

src/background/index.ts

@@ -78,7 +78,8 @@ const saveHeaders = (model: SupportedModels, headers: any) => {
 const trackedURLs = [
   "https://chatgpt.com/*",
   "https://chat.deepseek.com/*",
-  "https://chat.mistral.ai/*"
+  "https://chat.mistral.ai/*",
+  "https://claude.ai/*"
 ]
 
 const deepseekUrls = [
@@ -124,6 +125,14 @@ chrome.webRequest.onSendHeaders.addListener(
       return
     }
 
+    if (
+      res.requestHeaders.some((h) => h.name.toLowerCase() === "cookie") &&
+      res.url.includes("claude.ai")
+    ) {
+      saveHeaders("claude", res.requestHeaders)
+      return
+    }
+
     // cacheHeaders = res.requestHeaders
   },
   {

src/background/messages/getCurrentTab.ts

@@ -31,6 +31,10 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
       model = "mistral"
       await storage.set(STORAGE_KEYS.model, "mistral")
     }
+    if (tab.url?.includes("claude.ai")) {
+      model = "claude"
+      await storage.set(STORAGE_KEYS.model, "claude")
+    }
 
     res.send({ tabId: tab.id, tabUrl: tab.url, model })
   } catch (err) {

src/contents/claude.tsx

@@ -0,0 +1,12 @@
+import {
+  Content,
+  config as _config,
+  getInlineAnchorList as _getInlineAnchorList,
+  render as _render
+} from "~models/claude/contents"
+
+export const config = _config
+export const getInlineAnchorList = _getInlineAnchorList
+export const render = _render
+
+export default Content

src/contents/popup.tsx

@@ -16,7 +16,8 @@ export const config: PlasmoCSConfig = {
   matches: [
     "https://chat.deepseek.com/*",
     "https://chatgpt.com/*",
-    "https://chat.mistral.ai/*"
+    "https://chat.mistral.ai/*",
+    "https://claude.ai/*"
   ]
 }
 

src/models/claude/api/getConversation.ts

@@ -0,0 +1,52 @@
+import type { Conversation } from "~utils/types"
+
+export const getConversation = async ({
+  convId,
+  headers
+}: {
+  convId: string
+  headers: any
+}) => {
+  try {
+    const tabs = await chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    })
+
+    const tab = tabs[0]
+    if (!tab.id) throw new Error("No active tab found")
+
+    const pattern = /(?<=lastActiveOrg=)([^;]+)/
+
+    const match = headers["Cookie"].match(pattern)
+
+    const orgId = match[0]
+
+    const req = await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: (headers, convId, orgId) =>
+        fetch(
+          `https://claude.ai/api/organizations/${orgId}/chat_conversations/${convId}?tree=True&rendering_mode=messages&render_all_tools=true`,
+          {
+            method: "GET",
+            headers: headers,
+            referrer: "https://claude.ai/chat/" + convId,
+            referrerPolicy: "strict-origin-when-cross-origin",
+            mode: "cors",
+            credentials: "include"
+          }
+        ).then((res) => res.json()),
+      args: [headers, convId, orgId]
+    })
+
+    const data = req[0].result
+
+    console.log(data)
+
+    return data as Conversation["claude"]
+  } catch (err) {
+    console.error(err)
+
+    return null
+  }
+}

src/models/claude/contents/index.tsx

@@ -0,0 +1,198 @@
+import type {
+  PlasmoCSConfig,
+  PlasmoGetInlineAnchorList,
+  PlasmoRender
+} from "plasmo"
+import { useCallback, useEffect, useState } from "react"
+import { createRoot } from "react-dom/client"
+import { compress } from "shrink-string"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+import LogoIcon from "~common/logo"
+import PinIcon from "~common/pin"
+
+// import ClaudeLogoIcon from "~common/claudeLogo"
+import "~styles.css"
+
+import { STORAGE_KEYS } from "~utils/consts"
+import { getChatConfig, i18n } from "~utils/functions"
+import type { AutosaveStatus, PopupEnum, ToBeSaved } from "~utils/types"
+
+// Run on Claude conversation pages
+export const config: PlasmoCSConfig = {
+  matches: ["https://claude.ai/*"]
+}
+
+// Select each Claude message container (adjust selector as needed)
+export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
+  document.querySelectorAll(".font-claude-message")
+
+export const render: PlasmoRender<Element> = async ({
+  anchor,
+  createRootContainer
+}) => {
+  if (!anchor || !createRootContainer) return
+
+  const rootContainer = await createRootContainer(anchor)
+  const root = createRoot(rootContainer)
+  const parent = anchor.element
+
+  // Mark this element for pin indexing
+  parent?.classList.add("pin")
+
+  root.render(<Content parent={parent} />)
+}
+
+type Props = { parent: Element }
+
+export const Content = ({ parent }: Props) => {
+  const [toBeSaved, setToBeSaved] = useStorage<ToBeSaved>(
+    STORAGE_KEYS.toBeSaved
+  )
+  const [showPopup, setShowPopup] = useStorage<PopupEnum | false>(
+    STORAGE_KEYS.showPopup,
+    false
+  )
+  const [authenticated] = useStorage(STORAGE_KEYS.authenticated, false)
+  const [isPremium] = useStorage(STORAGE_KEYS.isPremium, false)
+  const [activeTrial] = useStorage(STORAGE_KEYS.activeTrial, false)
+  const [chatID] = useStorage(STORAGE_KEYS.chatID, "")
+  const [status] = useStorage<AutosaveStatus>(
+    STORAGE_KEYS.autosaveStatus,
+    "generating"
+  )
+
+  const [autosaveEnabled, setAutosave] = useState(false)
+  const [isLastMessage, setIsLastMessage] = useState(false)
+  const [showPin, setShowPin] = useState(true)
+  const [pinIndex, setPinIndex] = useState(-1)
+
+  useEffect(() => {
+    setPinIndex(getPinIndex(parent))
+  }, [parent])
+
+  useEffect(() => {
+    if (!(isPremium || activeTrial) || !chatID) return
+    const checkAutosave = async () => {
+      const config = await getChatConfig(chatID)
+      if (config) setAutosave(config.enabled)
+    }
+    checkAutosave()
+
+    setIsLastMessage(() => {
+      const pins = document.querySelectorAll(".pin")
+      const lastPin = pins[pins.length - 1]
+      if (!lastPin) return false
+      const parentNode = parent.firstChild?.parentNode
+      return parentNode
+        ? lastPin.firstChild?.parentNode?.isSameNode(
+            parent.firstChild?.parentNode
+          ) ?? false
+        : false
+    })
+  }, [chatID, status, parent, isPremium, activeTrial])
+
+  const LastMessageIcon = useCallback(() => {
+    switch (status) {
+      case "disabled":
+        return <LogoIcon />
+      case "generating":
+        return <LogoIcon loading />
+      case "saving":
+        return <LogoIcon loading />
+      case "error":
+        return <LogoIcon error />
+      case "saved":
+        return <LogoIcon />
+      default:
+        return <LogoIcon />
+    }
+  }, [status])
+
+  const handleClick = async () => {
+    if (!authenticated) {
+      alert(i18n("errConnect"))
+      return
+    }
+
+    const container = parent.parentElement
+    console.log({ parent, container })
+
+    // For Claude, assume message text is in <p> elements
+    const text = Array.from(parent!.querySelectorAll(".grid")).map(
+      (el) => el.innerHTML
+    )
+
+    let uncompressedAnswer = text[0]
+
+    const answer = await compress(uncompressedAnswer)
+
+    // Assume prompt text is in a <p> within the previous sibling container
+    const promptElement =
+      container?.parentElement?.parentElement?.previousElementSibling?.querySelector(
+        "p.whitespace-pre-wrap"
+      )
+    const prompt = promptElement
+      ? await compress(promptElement.textContent || "")
+      : ""
+    const title = document.title
+    const url = window.location.href
+
+    await setToBeSaved({ answer, prompt, title, url, pin: pinIndex })
+    await setShowPopup("save")
+  }
+
+  if (!showPin) return null
+
+  // If autosave is enabled, render with adjusted styling
+  if (autosaveEnabled)
+    return (
+      <div style={{ position: "relative", width: "100%", height: 33 }}>
+        <button
+          className="flex items-center ml-2 mt-1"
+          onClick={
+            isLastMessage && status === "error"
+              ? () => setShowPopup("error")
+              : status === "saved"
+              ? handleClick
+              : undefined
+          }
+          style={{
+            position: "absolute",
+            right: 0,
+            background: "transparent",
+            border: "none",
+            marginTop: 10,
+            cursor: status !== "generating" ? "pointer" : "default"
+          }}>
+          {isLastMessage ? <LastMessageIcon /> : <LogoIcon />}
+        </button>
+      </div>
+    )
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: 33 }}>
+      <button
+        onClick={handleClick}
+        className="text-gray-800 dark:text-gray-100 flex items-center ml-2 mt-1"
+        style={{
+          position: "absolute",
+          right: 0,
+          background: "transparent",
+          border: "none",
+          marginTop: 10,
+          padding: 4,
+          borderRadius: 4,
+          cursor: "pointer"
+        }}>
+        <PinIcon />
+      </button>
+    </div>
+  )
+}
+
+const getPinIndex = (parent: Element) => {
+  const pins = document.querySelectorAll(".pin")
+  return Array.from(pins).findIndex((pin) => pin.isSameNode(parent))
+}