从零构建AI增强工具：Thinking-Claude浏览器扩展开发实战指南

【免费下载链接】Thinking-Claude Let your Claude able to think 项目地址: https://gitcode.com/gh_mirrors/th/Thinking-Claude

还在为手动解析AI思考过程而烦恼？想让Claude的思维可视化变得简单直观？本文将带你从零开始构建一个功能完备的Thinking-Claude浏览器扩展，掌握现代扩展开发技术栈与AI增强工具的核心实现原理。完成本教程后，你将获得从环境搭建、核心功能开发到扩展打包发布的全流程实战经验。

项目概述：让AI思考过程可见化

Thinking-Claude是一个旨在增强Claude AI思考能力的浏览器扩展项目，其核心价值在于让AI的思考过程（Thinking Process）变得可视化、可交互。项目采用现代前端技术栈构建，主要分为两个部分：思考协议（Thinking Protocol） 和 浏览器扩展（Browser Extension）。

• 思考协议：指导Claude遵循自然、全面的思考流程，相关实现可见model_instructions/目录下的各版本指令集
• 浏览器扩展：将AI的思考过程组织为可折叠的交互区域，提供复制、展开/折叠等功能，源码位于extensions/chrome/

扩展核心功能

• 🎯 思考过程可视化：自动识别并格式化AI输出中的思考块
• 🔄 交互控制：折叠/展开不同思考段落
• 📋 一键复制：轻松复制任意思考段落内容
• ⚡ 自动处理：新消息加载时自动应用格式化
• 🎨 现代UI设计：简洁美观的界面，与Claude原生风格融合

开发环境搭建

技术栈概览

项目采用现代化前端技术栈构建，主要包括：

技术类别	核心技术	相关配置文件
编程语言	TypeScript 5.2+	tsconfig.json
构建工具	Webpack 5, Bun	webpack.config.js, package.json
UI框架	React 18, Tailwind CSS	src/components/
扩展规范	Chrome Extension Manifest V3	manifest.json
代码质量	ESLint, Prettier	eslint.config.cjs, prettier.config.cjs

环境准备

安装必要工具

1. Node.js (v18+)：JavaScript运行时环境

   node --version  # 验证安装
   

2. Bun：快速的JavaScript工具链（替代npm/yarn）

   # 安装Bun (Linux/macOS)
   curl -fsSL https://bun.sh/install | bash
   
   # Windows用户需先安装WSL，再执行上述命令
   
   # 验证安装
   bun --version
   

获取项目代码

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/th/Thinking-Claude.git
cd Thinking-Claude/extensions/chrome

# 安装依赖
bun install

项目结构解析

项目采用模块化架构设计，核心目录结构如下：

chrome/
├── public/               # 静态资源
│   ├── icons/            # 扩展图标
│   └── manifest.json     # 扩展配置
├── src/                  # 源代码
│   ├── background/       # 后台服务脚本
│   ├── content/          # 内容脚本
│   │   └── v3/features/  # 核心功能模块
│   ├── components/       # UI组件
│   └── styles/           # 样式文件
├── webpack/              # 构建配置
└── package.json          # 项目配置

关键目录说明：

• content脚本：src/content/ - 在Claude网页环境中运行的脚本
• 后台服务：src/background/ - 扩展后台服务
• UI组件：src/components/ - 扩展UI组件，包括指令选择器等
• 功能模块：src/content/v3/features/ - 扩展核心功能实现

核心功能开发实战

1. 思考块处理功能

思考块处理是扩展的核心功能，负责识别、格式化和增强AI输出中的思考过程。相关实现位于src/content/v3/features/thinking-block/目录。

实现思路

关键代码实现

核心类TCThinkingBlock实现如下（简化版）：

// [src/content/v3/features/thinking-block/index.ts](https://link.gitcode.com/i/60e3ee843c797316767b2e514b29ab8c)
import { BaseFeature } from "../base-feature";
import { processThinkingBlocks } from "./process-thinking-block";

export class TCThinkingBlock extends BaseFeature {
  constructor(private mutationObserver) {
    super("tc-thinking-block");
  }

  initialize() {
    // 检查是否应该初始化（基于URL）
    if (!shouldInitialize(window.location.href)) {
      return;
    }

    // 设置DOM变化监听
    this.mutationObserver.initialize();
    
    // 订阅DOM变化事件，处理思考块
    const unsubscribe = this.mutationObserver.subscribe(processThinkingBlocks);

    // 返回清理函数
    return () => {
      unsubscribe();
      // 清理自定义属性
      document.querySelectorAll("[data-tc-processed]")
        .forEach(el => el.removeAttribute("data-tc-processed"));
    };
  }
}

2. 指令选择器组件

指令选择器允许用户选择不同的思考指令集，相关代码位于src/components/instruction-selector/目录。

组件结构：

• instruction-selector/index.tsx：主组件入口
• instruction-item.tsx：单个指令项组件
• instruction-description.tsx：指令描述组件

关键实现示例：

// [src/components/instruction-selector/instruction-item.tsx](https://link.gitcode.com/i/32b2967f49a6e5dac05529d3354b5a83)
import React from 'react';
import { Instruction } from '@/types';
import { InstructionDescription } from './instruction-description';

interface InstructionItemProps {
  instruction: Instruction;
  selected: boolean;
  onSelect: (id: string) => void;
}

export const InstructionItem: React.FC<InstructionItemProps> = ({
  instruction,
  selected,
  onSelect
}) => {
  return (
    <div 
      className={`instruction-item ${selected ? 'selected' : ''}`}
      onClick={() => onSelect(instruction.id)}
    >
      <h3>{instruction.name}</h3>
      <InstructionDescription description={instruction.description} />
    </div>
  );
};

3. 扩展配置清单

项目使用Manifest V3规范，配置文件public/manifest.json定义了扩展的基本信息、权限和资源：

{
  "manifest_version": 3,
  "name": "Thinking Claude",
  "version": "3.2.3",
  "description": "Chrome extension for letting Claude think like a real human",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.claude.ai/*"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "icons": {
    "16": "icons/thinking-claude-16.png",
    "48": "icons/thinking-claude-48.png",
    "128": "icons/thinking-claude-128.png"
  },
  "permissions": ["storage", "webNavigation", "tabs"]
}

构建与调试

开发命令

项目提供了完整的开发命令集，定义在package.json中：

命令	功能
bun run start	启动开发服务器，支持热重载
bun run build	构建生产版本
bun run watch	监听文件变化，自动构建
bun run test	运行测试
bun run lint	代码检查

本地调试扩展

1. 构建扩展：

   cd extensions/chrome
   bun run build  # 生成dist目录
   

2. 在Chrome中加载扩展：

   • 打开chrome://extensions/
   • 启用"开发者模式"（右上角开关）
   • 点击"加载已解压的扩展程序"
   • 选择项目中的dist目录

3. 测试扩展：

   • 访问Claude.ai
   • 开始对话，观察思考过程是否被格式化
   • 使用Chrome开发者工具调试：chrome://extensions/ → 点击扩展下的"背景页"链接

打包与发布

打包扩展

执行构建命令生成生产版本：

bun run build  # 输出到dist目录

构建过程会执行以下操作：

• 编译TypeScript代码
• 处理CSS样式（Tailwind）
• 优化资源文件
• 生成Manifest文件

版本管理

项目采用语义化版本控制，版本号在两个文件中维护：

• package.json：version字段
• manifest.json：version字段

可使用脚本检查版本一致性：

bun run check-version-sync  # [scripts/check-version-sync.ts](https://link.gitcode.com/i/514ec53222e00bfca76282321832c157)

发布渠道

1. Chrome Web Store：官方发布渠道
2. 手动安装：提供ZIP包下载，用户手动加载
3. 开发者构建：通过GitHub Releases提供预发布版本

结语与进阶

通过本文的实战指南，你已经了解了Thinking-Claude浏览器扩展的核心开发流程。要进一步深入项目，可探索以下方向：

• 深入思考协议：研究model_instructions/目录下的各版本指令集，理解如何引导AI思考
• 扩展功能开发：参考现有功能实现，开发新的特性，如src/content/v3/features/
• UI组件库：学习项目中的UI组件设计，位于src/components/ui/
• 贡献代码：阅读主项目README.md中的贡献指南，参与开源协作

掌握这些知识后，你不仅能够扩展Thinking-Claude的功能，还能独立开发其他浏览器扩展，为AI工具构建更强大的交互体验。

本文档基于Thinking-Claude v3.2.3版本编写，最新信息请参考项目CHANGELOG.md

【免费下载链接】Thinking-Claude Let your Claude able to think 项目地址: https://gitcode.com/gh_mirrors/th/Thinking-Claude