阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!

如今,大多數人都會使用多個 AI 助手,例如 ChatGPT、Claude 和 Perplexity。但它們都沒有共享上下文。

您最終會重複相同的內容,貼上長提示或忘記之前討論過的內容。

今天,我們將了解現有 AI 工具的不足之處,以及 OpenMemory Chrome 擴充功能如何解決這個問題。我們將介紹其架構、核心流程、程式碼概述、實用功能、隱私模型以及一些實際用例。

這將幫助您同步與多個 AI 助理合作的混亂情況。


涵蓋哪些內容?

總之,我們將詳細介紹這些主題。

  1. 現有AI助理的問題。

  2. OpenMemory Chrome 擴充功能如何解決這個問題?

  3. 儀表板上提供所有功能。

  4. 架構和程式碼概述。

  5. 隱私和資料安全。

  6. 帶有範例的實際用例。

如果您有興趣自己探索,請查看 GitHub 上的儲存庫


1、現有AI助理的問題。

如果你曾經在 ChatGPT、Claude、Perplexity、Grok 或其他任何 AI 助理之間切換過,你就會明白其中的痛點:每個助手都各自為政。沒有共享上下文。沒有記憶。

使用多種人工智慧工具的感覺就像擁有一支才華橫溢的同事團隊,但他們卻拒絕互相交談。

它效率低、混亂不堪、支離破碎。

1. 上下文碎片化

每次 AI 會話都從零開始。你的偏好設定、之前的聊天記錄,甚至你上傳的文件,都不會被繼承。

您可能在早上告訴 ChatGPT 一些事情,下午切換到 Claude,然後必須從頭開始重新解釋一切。

複製貼上在大多數情況下都可以發揮作用,但當您的內容分佈在五個選項卡和多個對話中時,複製貼上就變得不那麼容易了。

2. 有限的上下文窗口

是的,有些助手確實會「記住」最近的幾條訊息。但令牌限制意味著長線程或文件會被截斷。

重要細節消失了,後續工作也變得支離破碎。

3. 脆弱的提示鏈

試著讓AI助理透過呼叫外部API來處理多步驟任務,你建立了一個脆弱的提示鏈。 JSON blob中的一個錯誤字段,甚至API規範中的一個小調整,都可能讓整個系統崩潰。

您的助手不會執行任務,而是開始產生幻覺,除錯也變成了猜測。

4. 供應商鎖定

為 GPT-4 設計提示?很酷。但是,如果你切換到 Claude 或 Perplexity 等其他助手,則需要從頭重寫功能描述、系統提示和預期輸出。

這不是一個大問題,但沒有通用的解決方案。這意味著需要不斷地返工。


2. OpenMemory Chrome擴充功能如何解決這個問題?

Mem0 最近推出了一個OpenMemory chrome 擴展,它為您最喜歡的 AI 助理加入了一個通用的“記憶層”,這樣您就不必重複自己了。

無論您使用哪種 LLM 助手,它都可以即時透明地捕捉、檢索和注入「上下文記憶」。

無論您使用 ChatGPT、Grok、DeepSeek、Claude、Replit、Gemini 還是 Perplexity 聊天,它都會在後台工作以解決我們在第一部分討論的問題。

您可以在 Chrome 線上應用程式商店完全免費安裝此Chrome 擴充功能。它是開源的,在 GitHub 上已獲得 450 多顆星。

這是官方演示影片!

{% 嵌入 https://youtu.be/23wH1HTMzi0 %}

🔁 工作原理(基本流程)

以下是核心流程:

1)安裝擴充功能→點擊工具列圖示→透過 Google 登入(將您的 API 金鑰/存取權杖儲存在 Chrome 儲存體中)。

openmemory 擴充功能註冊

2) 登入後,您可以點擊圖示(或使用快速鍵Ctrl + M ),它會將可折疊的側邊欄插入目前頁面(在所有 URL 上),這樣您就可以隨時隨地存取您的回憶。

回憶側邊欄

3) 側邊欄 UI 使用( GET /v1/memories )獲取您的記憶,讓您新增( POST /v1/memories )並在客戶端顯示相關的記憶。

4) 以上就是將上下文注入聊天的工作原理。在支援的 AI 網站(ChatGPT、Claude、Perplexity、Grok、Deepseek、Replit、Gemini)上,內容腳本會監聽你的Mem0 trigger ,然後呼叫 Mem0 POST /v1/memories/search search ) 來擷取相關的程式碼片段。

加入來自克勞德的上下文

加入克勞德的背景訊息

在 chatgpt 中為查詢加入了相關記憶

在 chatgpt 中為查詢加入了相關記憶

回憶側邊欄

5) 檢索到的記憶會作為輔助註釋加入到您的聊天輸入中,以便 AI knows您的上下文,然後(可選)自動發送提示。您將在此彈出視窗中看到刪除記憶的選項(點擊三個點後)。

相關記憶

6)發送後,您的完整聊天訊息歷史記錄將使用( POST /v1/memories )和infer=true非同步發布回 Mem0,因此您最近的交流將成為未來的記憶。

更新的記憶

7) 每個切換/新增/編輯/刪除/登出操作都會觸發一個輕量級事件( POST /v1/extension/ )用於使用情況分析,從而幫助隨著時間的推移改進擴展。

8) 透過側邊欄的點選單,您可以立即在新分頁中開啟完整的 Mem0 網頁控制面板,進行更深入的記憶體管理。此控制面板的網址為app.mem0.ai/dashboard/user/chrome-extension-user


3. 所有有用的功能。

以下是帶有螢幕截圖的功能,以幫助您理解。

  • 側邊欄使用者介面助您管理回憶。每個回憶都會顯示其文字和類別標籤。此外,清單中還提供一鍵複製或檢視控制項。

開放記憶體側邊欄

  • 您也可以從側邊欄即時找到相關回憶,並取得迄今為止的回憶總數。

相關記憶

  • 您可以點擊「開啟儀表板」按鈕,在新分頁中開啟完整的 Mem0 網頁儀表板,以便更深入地管理記憶體。您也可以在此儀表板中編輯和刪除記憶體。

mem0 儀表板

  • 最實用的功能是One-Click Sync它可以幫助您將 ChatGPT 記憶批次同步到 Mem0。這樣,您現有的所有記憶都可以重新使用,從而提升您的體驗。

一鍵同步 Chatgpt


4. 架構和程式碼概述。

從總體上看,該擴充功能遵循 Chrome Manifest V3 模型。 UI、後台邏輯和內容腳本之間的所有連接都在 manifest.json 中宣告。

⚡ 頂層檔案佈局如下所示。

.  
├── background.js            # MV3 service worker for toolbar actions & init  
├── popup.html / popup.js    # sign‑in UI for Google login  
├── sidebar.js               # injected sidebar for memory dashboard  
├── chatgpt/                 # site specific integration scripts  
│   └── content.js  
├── claude/                  # … for Claude.ai  
│   └── content.js  
├── perplexity/              # … for Perplexity.ai  
│   └── content.js  
├── mem0/                    # … for the Mem0 dashboard app itself  
│   └── content.js  
├── grok/                    # … for Grok.ai  
│   └── content.js  
├── deepseek/                # … for Deepseek Chat  
│   └── content.js  
├── icons/                   # All extension icon assets  
├── manifest.json  
├── README.md  
└── privacy-policy.md

background.js作為 MV3 Service Worker 運作。它監聽工具列點擊事件,在安裝時初始化預設值,並在收到請求時打開儀錶板。

chrome.action.onClicked.addListener((tab) => {  
  chrome.storage.sync.get(["apiKey","access_token"], data => {  
    if (data.apiKey || data.access_token) {  
      chrome.tabs.sendMessage(tab.id, { action: "toggleSidebar" });  
    } else {  
      chrome.action.openPopup();  
    }  
  });  
});

⚡ 對於每個支援的 AI 聊天站點,其資料夾下方都有一個特定於站點的 content.js 檔案。它們都遵循類似的模式:

  • 在網站的聊天 UI 中註入「 Add related memories按鈕。

  • Observe DOM changes ,以便在聊天介面更新時重新註入按鈕

  • Capture the current user message ,呼叫 Mem0 API 搜尋相關記憶,並在發送之前inject those memories聊天提示中

  • 將新訊息和上下文Asynchronously send回 Mem0 作為精煉內存

例如,ChatGPT 整合器( chatgpt/content.js )的開頭如下:

let isProcessingMem0 = false;  
let observer;  

async function handleMem0Click(clickSendButton=false) {  
  const memoryEnabled = await getMemoryEnabledState();  
  if (!memoryEnabled) { /* just send the message */ return; }  
  const message = getInputValue();  
  // Call Mem0 search endpoint  
  const searchResponse = await fetch("https://api.mem0.ai/v1/memories/search/",{…});  
  const responseData = await searchResponse.json();  
  // Inject UI into the chat input …  
  // Then send memory back to Mem0 service …  
}

相同的流程重複在以下位置/調整: claude/content.jsperplexity/content.jsmem0/content.jsgrok/content.jsdeepseek/content.js

⚡ Popup ( popup.js ) 處理「使用 Google 登入」的驗證流程。它提示使用者登錄,儲存其使用者 ID,然後重定向到 Mem0 Web 應用。

// not the complete code  
googleSignInButton.addEventListener("click", function () {  
  chrome.storage.sync.set({ userId: "chrome-extension-user" });  
  const url = data.userLoggedIn  
    ? "https://app.mem0.ai/extension"  
    : "https://app.mem0.ai/login?source=chrome-extension";  
  chrome.tabs.create({ url }, () => window.close());  
});

⚡ 側邊欄儀表板 ( sidebar.js ) 提供了一個通用的側邊欄,可注入到所有頁面 ()。它提供了一個完整的記憶體儀表板,任何人都可以:

  • 看和搜尋記憶

  • 開啟/關閉相關記憶

  • 開啟完整的 Mem0 網頁儀表板

  • 登出

以下是sidebar.js的一個小片段:

function initializeMem0Sidebar() {  
  chrome.runtime.onMessage.addListener((request,_,__) => {  
    if (request.action === "toggleSidebar") {  
      chrome.storage.sync.get(["apiKey","access_token"], data=>{  
        if (data.apiKey||data.access_token) toggleSidebar();  
        else chrome.runtime.sendMessage({action:"openPopup"});  
      });  
    }  
  });  
}  

function toggleSidebar() {  
  if (!document.getElementById("mem0-sidebar")) createSidebar();  
  sidebarVisible = !sidebarVisible;  
  fetchAndDisplayMemories();  
}  
…

5.隱私和資料安全。

對於LLMs (LLM) 應用來說,隱私最終是一個令人擔憂的問題。但 Mem0 的設計旨在讓您完全掌控自己的個人資料。

✅ Chrome Manifest V3 帶來了更嚴格的安全模型(無遠端程式碼、服務工作者背景、預設 CSP)。

✅ 所有敏感的使用者憑證( apiKeyaccess_tokenuserIduser preferences )均使用chrome.storage.sync進行存儲,並進行靜態加密(如果使用者選擇啟用,則可以跨裝置同步)。任何憑證都不會記錄到控制台,也不會傳送給任何第三方。

✅ 登入流程( popup.js )設定這些值,並且在呼叫 Mem0 的 API( https://api.mem0.ai/* & https://app.mem0.ai/ )時絕不會將它們傳送到除通過 HTTPS 之外的任何網域。

✅ Mem0 僅為已知的 AI 助理網域(以及側邊欄 UI 的所有頁面)注入邏輯。這確保了除非使用者明確切換其 UI,否則它無法嗅探任意頁面。

✅ 頁面內容不會外洩。側邊欄的唯一用途是顯示您自己的記憶(從api.mem0.ai獲取)。

✅ 每位助理的內容腳本(例如chatgpt/content.js )僅限:

  • 閱讀您最近的幾個使用者/助理訊息。

  • 將這些訊息(加上您目前的提示)傳送到 Mem0 的搜尋 API。

  • 將傳回的「記憶」作為上下文注入聊天輸入。

  • 可選擇將對話資料發佈到 Mem0 的記憶 API(以儲存新的記憶)。

該擴充功能不嵌入任何第三方分析或追蹤器。由於最佳實踐,您的資料絕對安全。


6. 帶有範例的實際用例。

熟悉了 Chrome 擴充功能後,你會發現它可以用於任何你想讓 AI 在互動過程中remember某些內容的地方。以下是一些實際用例:

✅ 開發人員筆記和捕獲程式碼片段以供將來重複使用

作為開發人員,我們總是複製貼上程式碼來理解、學習並找到解決方案。我們沒有意識到的是,我們有時會一遍又一遍地重複同樣的事情。

假設您將long code snippets複製到 ChatGPT 中進行解釋。在後續的跟進提示中,您希望這些程式碼片段自動重新顯示(而不是保留在剪貼簿中)。

技術流程可以是:

  • 在 ChatGPT 上,只需按下 Ctrl + M(或點擊工具列圖示)。輸入提示文字 → 貼上程式碼片段 → chatgpt/content.js攔截提交 → 使用 → POST /v1/memories非同步回發到 Mem0。

  • 輸入您的問題 → 像往常一樣按 Enter → 擴充功能會將相關的過去片段作為helper note加入到前面(這樣 ChatGPT 就會立即知道您的專案背景)。

  • ChatGPT 回覆後 → 它會自動呼叫POST /v1/memories並傳入infer=true ,因此這次對話將成為未來的記憶。

✅ 跨助理研究與腦力激盪

我們都同意每個人工智慧助理都有特定的優勢,例如:

  • ChatGPT用於通用推理

  • 研究的Perplexity (提取已驗證的來源)

  • Claude用於理解長篇背景(非常適合起草)

  • Grok提供即時趨勢洞察,尤其是圍繞 X(Twitter)內容。

假設您正在撰寫任何技術性內容的文章。

  • 您首先研究 Perplexity,關鍵統計資料和片段透過 Mem0 保存以供日後使用。

  • 現在你切換到 Claude 進行草稿。當你開始輸入時,Mem0 會自動將 Perplexity 的研究筆記插入你的提示中,以便它具有完整的上下文。

  • 您可以嘗試使用 ChatGPT 來優化語氣/片段。同樣, no repetition → 您的原始提綱 + Claude 的草稿已由 Mem0 加入到前面,以幫助 GPT 在先前工作的基礎上進行建置。

  • 最後,如果您要在 X 上建立一個線程(🧵),您可以向 Grok 詢問任何熱門標題或 Twitter 角度,以將它們全部聯繫在一起。

當然,大多數人不會同時使用超過三個助手,但這個例子展示了 OpenMemory Chrome 擴充功能如何讓您的工作流程變得更好。


不再需要複製貼上聊天內容或提醒你的 AI 你剛才說了什麼。

OpenMemory 在後台靜靜地執行,因此您的 AI 助理最終感覺就像一個大腦。

如果您有任何問題或回饋,請告訴我。

祝你今天過得愉快!下次見 :)

| 您可以檢查
我在anmolbaranwal.com上工作。
感謝您的閱讀! 🥰 | 嘰嘰喳喳 GitHub 領英 |

| --------- | -------- |

結尾揮手告別的 GIF


原文出處:https://dev.to/anmolbaranwal/how-to-sync-context-across-ai-assistants-chatgpt-claude-perplexity-in-your-browser-2k9l


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!