打造你的超级学习流：Chrome + ChatGPT Sidebar + Anki 全流程整合

📘 Chrome + ChatGPT + Anki 快速集成方案（Markdown 版）

#️⃣ 1. 解决了什么问题

你希望实现：

  • 在 Chrome 浏览器中使用 ChatGPT Sidebar 随时提问
  • 选中文本/ChatGPT 输出内容后
  • 右键 / 快捷键 一键加入 Anki（自动填入 word/context/translation/note）

并且全流程稳定、无需切换工具、操作尽可能简单。

最终目标：

在 Chrome 中浏览 → ChatGPT 解释 → 一键加入 Anki（自动解析 JSON）

#️⃣ 2. 需要做哪些操作

你需要完成以下三件事：

✔ Step 1：安装 Chrome ChatGPT Sidebar

（用于快速 Ask ChatGPT，拥有 Atlas 一样的右侧栏）

✔ Step 2：使用 Automator 创建系统级“AddToAnki”快速操作

（用于右键 → AddToAnki / 快捷键 → AddToAnki）

✔ Step 3：准备 Python 脚本（AnkiConnect 接口）

（用于解析 JSON 并加入 zhanghao 牌组）

通过这三个步骤，你就能在 Chrome 内完成：
聊天 + 选中 + 一键加入 Anki。

#️⃣ 3. 如何做这些操作

## Step 1：安装 Chrome ChatGPT Sidebar

1. 打开 Chrome

2. 访问扩展商店：https://chrome.google.com/webstore/

3. 搜索：

ChatGPT Sidebar

推荐安装任意一种：

  • ChatGPT Sidebar – GPT Reader
  • ChatGPT for Chrome – GPT Sidebar

4. 点击「添加到 Chrome」

5. 打开 “Auto-open sidebar on text selection”（可选）

这样你在 Chrome 里：

  • 选中文本 → 自动出现 ChatGPT 右侧栏
  • 像 Atlas 一样随时问 ChatGPT
  • 浏览网页/PDF 直接右侧提问

## Step 2：创建系统级快捷操作「AddToAnki」

macOS Automator → 让你在 Chrome 里右键 or 快捷键直接加入 Anki。

1. 打开 Automator

2. 选择：新建文稿 → 快速操作（Quick Action）

顶部确保是：

工作流程收到当前：文本
位于：任何应用程序

3. 搜索动作：Run Shell Script（运行 Shell 脚本）

拖到右边。

配置：

Shell: /usr/local/bin/python3
传递输入: 标准输入（to stdin）

4. 将下面的 Python 脚本完整粘进去（见 Step 3）

5. 菜单栏 → 文件 → 存储…

名称：

AddToAnki

保存后，它会自动出现在：

  • Chrome 右键 → 服务 → AddToAnki
  • 或通过系统快捷键触发

## Step 3：Python 脚本（用于解析 JSON 并写入 Anki）

将下面脚本完整复制到 Automator 的运行 Shell 脚本模块里：

import sys
import json
import urllib.request

raw = sys.stdin.read().strip()
if not raw:
    sys.exit(0)

text = raw.strip()
if text.startswith("```"):
    lines = text.splitlines()
    lines = [ln for ln in lines[1:] if not ln.strip().startswith("```")]
    text = "\n".join(lines).strip()

word = context = translation = note = ""

try:
    obj = json.loads(text)
    word = obj.get("word", "").strip()
    context = obj.get("context", "").strip()
    translation = obj.get("translation", "").strip()
    note = obj.get("note", "").strip()
except json.JSONDecodeError:
    word = raw.strip()

if not any([word, context, translation, note]):
    sys.exit(0)

payload = {
    "action": "addNote",
    "version": 6,
    "params": {
        "note": {
            "deckName": "zhanghao",
            "modelName": "Saladict Word",
            "fields": {
                "word": word,
                "context": context,
                "translation": translation,
                "note": note
            },
            "options": {
                "allowDuplicate": False,
                "duplicateScope": "deck"
            },
            "tags": ["from-macos-service"]
        }
    }
}

data = json.dumps(payload).encode("utf-8")

try:
    req = urllib.request.Request(
        "http://127.0.0.1:8765",
        data=data,
        headers={"Content-Type": "application/json"}
    )
    urllib.request.urlopen(req)
except:
    pass

这个脚本会：

  • 自动解析你选中的 JSON
  • 自动填 word/context/translation/note
  • 自动发送到 Anki 的 zhanghao 牌组
  • 使用 Saladict Word 模型
  • 自动处理三种输入：
    • 纯文本
    • JSON
    • 带 json fenced block

## Step 4（可选）：设置系统级快捷键

让 Chrome 中可以通过快捷键直接 AddToAnki。

  1. 打开 「系统设置」
  2. 键盘 → 键盘快捷键 → 服务
  3. 找到 AddToAnki
  4. 设置一个快捷键，例如：
Option + Command + A

之后：

  • 在 Chrome 里选中文本
  • 按 ⌥⌘A

→ 自动加入 Anki。

#️⃣ 4. 最终实现的效果

在 Chrome 浏览器 内你可以：

✔ 1. 像 Atlas 一样查询 ChatGPT

（通过 ChatGPT Sidebar 自动打开右侧栏）

✔ 2. 选中文本 → 右键 → AddToAnki

（调用 Python + AnkiConnect）

✔ 3. 或：选中文本 → 按 ⌥⌘A 直接加入 Anki

（快捷操作）

✔ 4. JSON 自动解析，自动填入四个字段

（word / context / translation / note）

✔ 5. Anki 中自动加入到 zhanghao 牌组

并使用 Saladict Word 模型

最终你获得：

一个简洁、可扩展、稳定的 Chrome + ChatGPT + Anki 整合系统：
Ask GPT → 选中文字 → 右键 或 ⌥⌘A → 自动进 Anki。

最终实现效果图：
image
image
image
image

##方案 2（可选）：设置系统级快捷键

简化版本，浏览器插件完成Anki词卡添加，需要，复制，黏贴，点击按钮的操作，脚本如下，需要自己打开chrome浏览器插件的开发者模式，自己添加

#!/usr/bin/env bash
set -e

EXT_DIR="anki-json-sender-extension"

mkdir -p "$EXT_DIR"

# manifest.json
cat > "$EXT_DIR/manifest.json" << 'EOF'
{
  "manifest_version": 3,
  "name": "Anki JSON Sender",
  "version": "1.0",
  "description": "Send JSON content from the popup to local AnkiConnect service.",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_title": "Send to Anki",
    "default_popup": "popup.html"
  }
}
EOF

# popup.html
cat > "$EXT_DIR/popup.html" << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Send JSON to Anki</title>
    <style>
        body { width: 260px; padding: 10px; font-family: Arial, sans-serif; }
        h3 { margin-top: 0; font-size: 16px; }
        textarea { width: 100%; height: 160px; box-sizing: border-box; }
        button { width: 100%; padding: 8px; margin-top: 8px; cursor: pointer; }
    </style>
</head>
<body>
    <h3>发送 JSON 到 Anki</h3>
    <textarea id="jsonInput" placeholder='{
  "word": "Sequential",
  "context": "A container that builds a neural network...",
  "translation": "按顺序堆叠层的容器...",
  "note": "Used for simple feed-forward models..."
}'></textarea>
    <button id="sendBtn">发送到 Anki</button>

    <script src="popup.js"></script>
</body>
</html>
EOF

# popup.js
cat > "$EXT_DIR/popup.js" << 'EOF'
document.getElementById("sendBtn").addEventListener("click", async () => {
  const text = document.getElementById("jsonInput").value.trim();

  if (!text) {
    alert("JSON 不能为空");
    return;
  }

  let jsonObject;
  try {
    jsonObject = JSON.parse(text);
  } catch (e) {
    console.error(e);
    alert("JSON 格式错误");
    return;
  }

  const payload = {
    action: "addNote",
    version: 6,
    params: {
      note: {
        deckName: "zhanghao",
        modelName: "Saladict Word",
        fields: {
          word: jsonObject.word || "",
          context: jsonObject.context || "",
          translation: jsonObject.translation || "",
          note: jsonObject.note || ""
        },
        options: {
          allowDuplicate: false,
          duplicateScope: "deck"
        },
        tags: ["from-chrome-extension"]
      }
    }
  };

  try {
    const res = await fetch("http://127.0.0.1:8765", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    const result = await res.json();
    console.log("AnkiConnect Result:", result);

    if (result.error) {
      alert("Anki 返回错误: " + result.error);
    } else {
      alert("发送成功！");
    }
  } catch (err) {
    console.error(err);
    alert("发送失败，请检查 Anki 是否打开、AnkiConnect 是否在 8765 端口监听。");
  }
});
EOF

echo "已生成 Chrome 插件目录：$EXT_DIR"
echo "Chrome 中打开 chrome://extensions，开启开发者模式，选择“加载已解压的扩展程序”，指向该目录即可。"

效果图如下
image
image

posted @ 2025-11-22 20:55  方子敬  阅读(1)  评论(0)    收藏  举报