AskAnything

AskAnything

AskAnything 是一个AI侧边浮标浏览器插件，旨在提供智能化的辅助功能。

一款Chrome浏览器扩展，提供即时AI问答功能、多媒体理解和本地Markdown笔记浏览编辑功能，支持多种大语言模型。 要使用AI功能，你需要自行在扩展的选项页面中配置相应的API密钥。

功能特点

• 🎯 浮动按钮 - 页面右侧随时可见的浮标，支持拖拽。
• ⚙️ 选项页面 - 用于配置不同AI模型的API密钥和可选的自定义API端点。
• 🧠 多模型支持 - 支持ChatGPT, Claude, DeepSeek, 通义千问 (需用户自行提供并配置API密钥)。
• 🎭 多媒体分析 - 支持图片理解和B站视频分析（仅限通义千问模型），提供图片内容描述、视频结构化摘要、章节划分和时间戳跳转。
• 📝 上下文感知 - 自动获取选中文本或页面信息，并将其包含在发送给AI的请求中。
• 📊 流式回复 - 实时流式显示AI回答。
• 🧭 智能工具调用 - 集成网络搜索、图片理解等自定义工具，提供更丰富的AI交互体验。
• 📓 Markdown笔记 - 内置Markdown笔记编辑器，支持创建、编辑、导入和导出笔记，可与AI对话分屏显示。
• 🔍 本地历史 - 使用 chrome.storage.local 存储最近50条对话历史。
• ⌨️ 快捷键支持 - Alt+Shift+A (可修改) 快速访问。
• 📑 右键菜单 - 选中文本右键询问。

⚠️ 重要：API密钥配置

为了使用 AskAnything 的AI问答功能，你必须提供你自己账户的大模型和搜索API密钥。本扩展不会收集或存储你的密钥到任何远程服务器，密钥仅安全地存储在你本地浏览器的 chrome.storage.local 中。

配置步骤:

1. 安装扩展: 首先按照下面的"本地测试"步骤加载扩展。
2. 打开选项页面:
   • 在Chrome浏览器右上角的扩展程序图标列表中，找到 AskAnything 图标。
   • 右键点击该图标，选择"选项"。
   • (或者，在浏览器地址栏输入 chrome://extensions，找到该扩展，点击"详细信息"，然后选择"扩展程序选项")。
3. 输入API密钥: 在选项页面中，为你想使用的AI模型提供商（如 OpenAI, Anthropic 等）输入对应的API密钥。
4. (可选) 自定义API端点: 如果你需要使用代理服务器或者特定区域的API端点，可以在相应的字段中输入。
5. 保存设置: 点击保存按钮。

只有正确配置了API密钥，对应的AI模型才能正常工作。

开发设置

前提条件

• Node.js v18+
• npm v8+

安装依赖

npm install

开发模式

启动开发服务器，代码更改时会自动重新构建。

npm run dev

构建扩展

为生产环境构建优化后的扩展。

npm run build

构建的扩展将位于dist目录中。

打包发布

为发布创建优化的zip包：

npm run package

这将会：

1. 执行完整构建
2. 清理不必要的文件（如source maps）
3. 创建 askanything.zip 文件，可直接用于发布

安装方式

方式一：从 GitHub Releases 下载（推荐）

1. 访问本项目的 GitHub Releases 页面
2. 下载最新版本的 askanything.zip 文件
3. 解压下载的 zip 文件到任意目录
4. 打开Chrome浏览器，导航至 chrome://extensions
5. 启用页面右上角的"开发者模式"开关
6. 点击左上角的"加载已解压的扩展程序"按钮
7. 选择刚才解压的文件夹
8. 重要: 扩展加载后，请务必配置API密钥 (参见上面的"API密钥配置"部分)

方式二：本地构建安装

如果你想从源码构建或进行开发，可以按照以下步骤：

本地测试 (加载已解压的扩展)

1. 运行 npm run build 生成 dist 目录。
2. 打开Chrome浏览器，导航至 chrome://extensions。
3. 启用页面右上角的"开发者模式"开关。
4. 点击左上角的"加载已解压的扩展程序"按钮。
5. 选择项目的 dist 目录。
6. 重要: 扩展加载后，请务必配置API密钥 (参见上面的"API密钥配置"部分)。

如何使用

配置好API密钥后，可以通过以下方式激活 AskAnything 侧边栏：

1. 点击浮动按钮: 点击页面右侧的蓝色圆形浮动按钮。
2. 快捷键: 使用快捷键 Alt+Shift+A (可以在 chrome://extensions/shortcuts 中修改)。

打开侧边栏后：

• 在顶部的下拉菜单中选择你想使用的AI模型。
• 在底部的输入框中输入你的问题。
• 按回车或点击发送按钮。
• AI的回答将以流式方式显示在聊天区域。
• 可以点击"停止"按钮中断当前的AI回答。

使用多媒体分析功能

当选择通义千问模型时，可以使用多媒体分析功能，支持图片理解和B站视频分析：

1. 打开多媒体分析:

   • 点击控制栏中的"🎭 多媒体分析"按钮
   • 面板展开后可以看到"📷 图片分析"和"🎬 视频分析"两个标签

2. 图片分析功能:

   • 切换到"📷 图片分析"标签
   • 点击上传区域选择图片文件，或直接拖拽图片到上传区域
   • 支持从网页直接拖拽图片（支持大部分网站）
   • 支持 JPG、PNG、GIF、WebP、BMP、SVG 格式，最大10MB
   • 上传后可以输入具体问题，如"这张图片的内容是什么？"
   • 如果不输入问题，系统会默认分析图片内容

3. 视频分析功能:

   • 切换到"🎬 视频分析"标签
   • 在输入框中粘贴B站视频链接，支持 bilibili.com 和 b23.tv 等格式
   • 选择分析类型：内容摘要、章节划分、重点时刻或完整分析
   • 可选输入关注关键词，AI会重点分析相关内容
   • 点击"开始分析"按钮启动分析

4. 智能分析:

   • 图片：AI会自动调用图片理解工具进行深度分析
   • 视频：自动获取视频标题、描述和字幕信息，生成结构化摘要
   • 支持多轮对话，可以继续询问相关问题

5. 便捷操作:

   • 主按钮支持直接拖拽图片进行快速上传
   • 当有图片选择时，按钮会显示📷指示器
   • 可以随时切换标签页进行不同类型的媒体分析

使用Markdown笔记功能

1. 打开笔记: 点击侧边栏顶部的笔记图标，进入笔记模式。
2. 创建笔记: 在笔记界面可以选择"新建笔记"创建空白笔记。
3. 导入笔记: 点击"导入笔记"按钮，选择本地的.md文件导入。
4. 编辑笔记:
   • 支持纯编辑模式和分屏预览模式
   • 分屏模式下可同时查看渲染效果和编辑内容
5. 导出笔记: 在查看笔记时，点击"导出"按钮将笔记保存为Markdown文件。
6. 分屏浏览: 可以同时查看AI对话和笔记内容，还可收起聊天界面专注于笔记。
7. 浏览全部笔记: 点击"所有笔记"按钮查看和选择已保存的笔记。

项目结构

├── assets/              # 图标等静态资源
├── dist/                # 构建输出目录
├── docs/                # 项目文档
├── src/
│   ├── content-script.ts  # 内容脚本 (注入浮标, 页面交互)
│   ├── service-worker.ts  # 后台脚本 (事件处理, API调用, 核心逻辑)
│   ├── shared/          # 共享类型和工具 (models.ts, history.ts, settings.ts)
│   ├── sidepanel/       # 侧边栏UI (React, Zustand, components/)
│   └── options/         # 选项页面 (用于配置API密钥等)
├── vite.config.ts       # Vite构建配置
├── manifest.json        # 扩展清单文件
├── package.json         # 项目依赖和脚本
└── ...

MCP集成

请注意，本项目由于是插件，所以只能实现MCP中的SSE和Streamable HTTP协议，故而推荐使用mcp-proxy作为使用stdio协议的MCP srever代理，具体使用方法请参考其项目。

🆕 最近更新

v1.2.1 - 多媒体分析功能融合

• 🎭 统一界面: 将图片上传和视频分析功能融合到一个"多媒体分析"按钮中
• 📑 标签切换: 通过标签页在图片分析和视频分析之间快速切换
• 🎨 优化体验: 统一的设计语言，更直观的操作流程
• 🚀 快捷操作: 主按钮支持直接拖拽图片，提供状态指示器
• 💾 节省空间: 减少界面元素，提供更简洁的用户体验

v1.2.0 - B站動画分析機能

• 🎬 B站動画分析: B站動画コンテンツのインテリジェント分析機能を新たに追加し、複数の分析モードをサポート
• 📊 構造化出力: コンテンツの要約、チャプター分割、重要な時点など、複数の分析タイプを提供
• ⏰ タイムスタンプナビゲーション: クリック可能なタイムスタンプジャンプリンクを生成し、動画コンテンツの特定を簡単に
• 🔍 キーワードフォーカス: 指定したキーワードへの関心をサポート、AI が関連コンテンツを重点的に分析
• 🎯 インテリジェント抽出: 動画のタイトル、説明、字幕情報を自動取得し総合分析
• 🔧 Qwen3のみ対応: 現在、動画分析機能はQwen3モデルを選択した場合のみ利用可能

v1.1.0 - マルチモーダル画像理解機能

• ✨ 画像アップロード対応: カプセルボタンスタイルの画像アップロードコンポーネントを新たに追加、クリックとドラッグ&ドロップアップロードをサポート
• 🌐 ウェブページ画像ドラッグ&ドロップ: ウェブページから直接プラグインに画像をドラッグ&ドロップ可能、ローカル保存不要
• 🖼️ インテリジェント画像分析: Alibaba Cloud DashScope VLM API を統合し、画像コンテンツの深い理解と分析を実現
• 🔄 マルチターン対話: 画像分析後の継続的な対話をサポート、AI は以前分析した画像を参照・比較可能
• 🎨 ユーザー体験最適化: 画像プレビュー、状態管理、エラーハンドリングなど全面最適化
• 📱 レスポンシブデザイン: ダークモード/ライトモードに対応、インターフェースの一貫性を維持
• 🔧 Qwen3のみ対応: 現在、画像理解機能はQwen3モデルを選択した場合のみ利用可能

📚 詳細ドキュメント

プロジェクトアーキテクチャ、各コンポーネント（Content Script、Service Worker、Sidepanel）、および共有モジュールに関する詳細説明については、./docs/index.md ディレクトリ下のドキュメントを参照してください。

🚀 将来計画

AskAnything の継続的な改善と、より強力な機能の追加に注力しています。以下は将来の開発計画の一部です：

• 検索ツールの強化:
  • より良い効果、より高度なインテリジェンスを備えたローカルまたはオンライン検索ツールの統合を実装し、より正確なコンテキスト情報と回答ソースを提供します。（重要）
  • 深度研究機能の実装で、あるコンテンツを学習する前に本プラグインで概論を実行できるように。
• マルチモーダル機能の拡張:
  • より多くのモデルの画像理解機能をサポート（現在はQwen3のみ）
  • ✅ 動画コンテンツの理解と分析を追加（完了 - B站動画分析）
  • 音声ファイルのトランスクリプションと分析をサポート
  • YouTube動画分析サポートを追加
• 高度なノート記録:
  • より詳細で構造化されたノート記録機能を開発し、AI との議論コンテンツやウェブページから抽出した重要情報の保存、整理、復習を簡単に。
  • ローカルナレッジベースのサポート。
• インテリジェントワークフロー:
  • より多くのカスタムツールと API 統合を追加
  • 複雑な複数ステップタスクの自動化をサポート
  • 個性的な AI アシスタント設定を実現
  • ブラウザ操作機能を実装（未確定）

コミュニティの提案と貢献を歓迎します。将来の機能についてご意見がありましたら、お気軽にお知らせください！

🤝 貢献への参加

すべての形態の貢献を歓迎します！ご意見、提案、またはバグ発見がありましたら、いつでも Issue や Pull Request をお出しください。

ライセンス

MIT