MD-This-Page 浏览器扩展部署教程

“MD-This-Page” 是一款浏览器扩展，可将任何网页一键转换为干净、结构化的 Markdown 格式，特别适合用于 LLM（大语言模型）工作流，能有效去除网页噪音，提升内容可读性和 Token 效率。

本教程将指导您通过两种方式部署和使用该扩展：直接安装已编译版本（推荐） 和从源码构建。

1. 项目概览与核心价值

  • 核心功能：一键提取网页主体内容（基于 Mozilla Readability 库），并转换为 Markdown。
  • 操作方式：通过右键菜单、键盘快捷键 (Alt+M) 或工具栏图标触发。
  • 输出定制：可自由切换是否包含图片、链接、页面元数据（标题/作者/日期）、来源 URL 和页面结构图。
  • 导出选项：支持复制到剪贴板、下载为 .md 文件，或直接复制为 AI 提示词格式。
  • 快速操作：可通过配置实现工具栏图标左键一键执行预设动作（如下载或复制）。

2. 快速部署：安装已编译版本

这是最简单、推荐大多数用户使用的方式。您可以通过浏览器的扩展商店安装，或手动安装已打包的 CRX 文件。

2.1 从 Chrome 网上应用店安装（推荐）

  1. 打开 Chrome 浏览器，进入 Chrome 网上应用店。
  2. 搜索 “MD-This-Page”。
  3. 找到由 Ademking 开发的对应扩展，点击 “添加到 Chrome” 即可完成安装。

注意：项目 README 中未直接提供商店链接，您可以在商店中按名称搜索。如果搜索结果不明确，可尝试使用项目 GitHub 页面上的 “Try it out!” 链接（如有）。

2.2 通过开发者模式手动安装（用于测试或未上架版本）

这种方式适合安装从 Releases 页面下载的打包文件，或您自行构建的版本。

  1. 从项目的 GitHub Releases 页面下载最新版本的 .crx 文件（浏览器扩展包）或解压后的文件夹。
  2. 打开 Chrome 浏览器，在地址栏输入 chrome://extensions/ 并回车。
  3. 开启右上角的 “开发者模式”。
  4. 点击 “加载已解压的扩展程序” 按钮。
  5. 选择您下载并解压得到的扩展程序文件夹（或包含 manifest.json 的文件夹），即可完成安装。

3. 开发与源码部署

如果您是开发者，希望修改、调试或从最新源码构建扩展，可按以下步骤操作。

3.1 环境准备

  • Node.js：确保已安装（建议 LTS 版本）。
  • pnpm：项目使用的包管理器。如未安装，可运行 npm install -g pnpm 进行安装。

3.2 克隆与安装依赖

  1. 克隆仓库：

    1
    2
    git clone https://github.com/Ademking/MD-This-Page.git
    cd MD-This-Page

  2. 安装项目依赖：

    1
    pnpm install

3.3 开发模式运行

在开发模式下，您可以在修改代码后实时预览效果。

  1. 启动开发服务器：

    1
    pnpm dev

    此命令会生成一个 build/chrome-mv3-dev 目录，并持续监听文件变化。

  2. 按照 2.2 节 的步骤，在 Chrome 扩展管理页面加载 build/chrome-mv3-dev 文件夹。

  3. 现在，您可以修改源码，保存后刷新扩展页面即可看到更新。

3.4 构建生产版本

当您完成开发，准备打包部署时：

  1. 执行构建命令：

    1
    pnpm build

  2. 构建产物将输出到 build/chrome-mv3-prod 目录。您可以将此文件夹打包分发，或通过“加载已解压的扩展程序”进行安装测试。

4. 使用指南与配置

安装完成后，您可以通过以下方式使用它：

4.1 基本操作

  • 右键菜单：在任意网页上右键，点击 “MD this page”，扩展将打开一个新标签页，其中显示提取并转换好的 Markdown 内容。
  • 键盘快捷键：按下 Alt + M 可直接触发转换。
  • 工具栏图标：点击浏览器工具栏中的扩展图标，可执行预设的快速操作。

4.2 配置选项

点击扩展图标，选择 “选项 (Options)” 进入设置页面。您可以在此：

  • 定制输出内容：独立开关是否包含图片、链接、页面信息（标题/作者/日期）、来源 URL 和页面结构地图。
  • 设置快速操作：在 “One-Click Action Button” 部分，您可以设定单击工具栏图标时立即执行的动作，如 “下载 .md”、“复制 Markdown” 或 “复制为提示词”，而无需打开预览页。

4.3 快速操作（无预览）

在网页上右键，可以直接使用 “Copy Markdown”、“Copy as Prompt” 和 “Download .MD” 等命令，这些操作会在后台立即执行，非常适合高效工作流。

5. 常见问题与排查

问题 可能原因与解决方案
右键菜单没有出现 扩展可能未启用或需要刷新。请检查 chrome://extensions/ 页面确保扩展已开启，并刷新目标网页重试。
pnpm dev 命令报错 Node.js 或 pnpm 版本不兼容。请检查 package.json 中 engines 字段要求的版本，或尝试更新 pnpm (pnpm add -g pnpm@latest)。
转换结果不完整或混乱 某些动态加载内容较多的网页（如单页应用）可能无法被 @mozilla/readability 完美解析。可以尝试在页面完全加载后再运行扩展。
图片无法显示 请在选项页面中确认 “Keep Images” 选项已开启。如果图片为相对路径或需要登录，可能无法正常导出。
加载已解压扩展时提示错误 请确保您选择的文件夹层级正确，该文件夹下必须直接包含 manifest.json 文件。对于开发构建，请指向 build/chrome-mv3-dev 目录。

通过以上步骤，您已成功部署并使用 “MD-This-Page” 扩展。它能极大地提升您从网页提取信息、构建 LLM 知识库或进行内容整理的效率。