# Obsidian 2026 剪藏插件 Web Clipper 最新安装教程
从 Chrome 商店或压缩包安装 Obsidian Web Clipper，设置保管库和剪藏模板，保存第一篇文章。
Canonical: https://21obsidian.com/blog/obsidian-web-clipper-setup
Image: https://pic.eryinote.com/PicGo/20260915195500-1-obsidian-web-clipper-setup-cover.webp
Obsidian Web Clipper 是 Obsidian 官方提供的免费浏览器剪藏插件，可以把网页正文、标题和来源链接保存为笔记。

## 一、安装插件 \{#install}

根据自己平时使用的浏览器，选择对应的安装方式 [Obsidian Web Clipper 官网](https://obsidian.md/clipper)。

![打开 Obsidian Web Clipper 官方商店](https://pic.eryinote.com/PicGo/20260915194144-3-clipper-chrome-store.webp)

### Chrome \{#chrome}

1. 用 Chrome 打开 [Obsidian Web Clipper 扩展页面](https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf)
2. 点击「添加至 Chrome」，在弹出的确认窗口中点击「添加扩展程序」
3. 安装完成后，点击浏览器工具栏的「扩展程序」图标，找到 Obsidian Web Clipper，点击旁边的图钉，将它固定到工具栏

也可以在地址栏打开 `chrome://extensions/`，找到 Obsidian Web Clipper，点击「详情」，打开「固定到工具栏」。

![把 Web Clipper 固定到 Chrome 工具栏](https://pic.eryinote.com/PicGo/20260915194144-10-clipper-pin-toolbar.webp)

以后点击工具栏上的 Web Clipper 图标，就可以打开剪藏面板。

### Chrome 商店打不开：用压缩包安装 \{#offline-install}

如果无法打开 Chrome 应用商店，可以下载我提供的 Web Clipper 压缩包，解压后手动安装。

- 压缩包链接：[夸克网盘下载](https://pan.quark.cn/s/a19e1309b07e)

1. 下载并解压压缩包，将解压得到的扩展文件夹放到一个固定位置
2. 在 Chrome 地址栏输入 `chrome://extensions/`，按回车打开扩展程序页面
3. 打开「开发者模式」

<div className="mx-auto w-full max-w-md">

![在 Chrome 扩展程序页开启开发者模式](https://pic.eryinote.com/PicGo/20260915194144-4-clipper-dev-mode.webp)

</div>

4. 点击「加载未打包的扩展程序」，选择解压后的扩展文件夹

![加载解压后的 Web Clipper 文件夹](https://pic.eryinote.com/PicGo/20260915194144-7-clipper-load-unpacked.webp)

选择的文件夹里应当能直接看到 `manifest.json`，不要选择压缩包本身

5. 加载完成后，确认扩展列表中出现 Obsidian Web Clipper，并且开关处于开启状态，再按前面的方法固定到工具栏

![确认 Web Clipper 扩展已启用](https://pic.eryinote.com/PicGo/20260915194144-6-clipper-extension-enabled.webp)

## 二、选择保管库 \{#choose-vault}

安装完成后，打开一篇普通网页文章，点击 Web Clipper 图标，再点击剪藏面板中的齿轮，进入扩展设置。

![打开 Web Clipper 剪藏设置](https://pic.eryinote.com/PicGo/20260915194144-9-clipper-open-settings.webp)

在「常规」设置里找到「保管库」，添加你准备保存文章的库名。这里填写的是 Obsidian 中的保管库名称，无须填写电脑上的完整文件夹路径。

如果使用 [FLO.W Obsidian 模板](https://21obsidian.com/)，解压后获得的库名是 `FLO.W Obsidian`；如果你已经改过名字，就填写修改后的名称。这个库需要先在当前设备的 Obsidian 中打开过。

填写库名后按回车添加。

![在 Web Clipper 中填写保管库名称](https://pic.eryinote.com/PicGo/20260915194144-2-clipper-add-vault.webp)

## 三、设置剪藏模板 \{#clipper-template}

剪藏模板用来预先设置文章的保存方式。我们从新建一份模板开始。

1、点击新建模板

![点击新建剪藏模板](https://pic.eryinote.com/PicGo/20260915194144-8-clipper-new-template.webp)

2、填写模板名称

![填写剪藏模板名称](https://pic.eryinote.com/PicGo/20260915194144-15-clipper-template-name.webp)

3、设置保存位置

往下找到「位置」，按图中的编号依次填写。

![设置剪藏模板的保存位置](https://pic.eryinote.com/PicGo/20260915194144-14-clipper-template-location.webp)

1. **行为**：选择「创建新笔记」，每篇文章单独保存为一篇笔记
2. **笔记名称**：保留 `{{title}}`，自动使用网页标题
3. **笔记位置**：**[FLO.W Obsidian 模板](https://21obsidian.com/)用户填写 `信息`**；其他用户填写自己想要保存剪藏的文件夹名称
4. **保管库**：选择上一步添加的保管库

4、添加属性

继续往下找到「内容」里的「属性」。先添加来源，方便以后回到原网页。

![为剪藏模板添加属性](https://pic.eryinote.com/PicGo/20260915194144-1-clipper-add-property.webp)

1. 点击「添加属性」，出现一行新的输入框
2. 在「属性名称」中填写 `来源`
3. 在「属性值」中填写 `{{url}}`

需要添加更多信息时，可以在文末的 [变量表查询](#variables) 中查找对应变量。

5、补充作者

再次点击「添加属性」，用相同方法添加作者。填写后的结果如下：

![填写来源和作者属性](https://pic.eryinote.com/PicGo/20260915194144-12-clipper-source-author.webp)

1. **来源**：`{{url}}` 会自动读取当前网页地址
2. **作者**：属性名称填写 `作者`，值填写 `{{author}}`，自动读取网页提供的作者信息

6、保留正文变量

在属性下方找到「笔记内容」。

![设置剪藏模板的笔记内容](https://pic.eryinote.com/PicGo/20260915194144-13-clipper-template-content.webp)

① 保留 `{{content}}`，插件会把提取到的网页正文放在这里。

这些双花括号里的内容都是变量，照着填写即可，双花括号也要保留。模板修改会自动保存。完成后，回到剪藏面板，选择刚刚新建的「网页剪藏」模板。

**如果你使用 [FLO.W Obsidian 模板](https://21obsidian.com/)**，接下来请按照 [剪藏使用教程](/docs/info-clipping) 配置保存位置、`FLO.W` 和 `Status` 等属性，再进行下面的保存测试。这样，剪藏才能按 [FLO.W Obsidian 模板](https://21obsidian.com/)的信息规则归类。

## 四、保存第一篇文章 \{#first-clip}

回到准备收藏的文章页面，点击 Web Clipper 图标，选择刚才设置的模板，检查标题、正文预览、保管库和保存文件夹。

确认内容正确后，点击「添加到 Obsidian」。如果浏览器询问是否打开 Obsidian，允许打开，然后到指定保管库的文件夹中查找这篇笔记。

![保存第一篇剪藏文章](https://pic.eryinote.com/PicGo/20260915194144-11-clipper-save-article.webp)

第一次先检查三件事：文章是否出现在预期文件夹、正文是否完整、来源链接是否正确。确认后，以后就可以沿用这份模板收藏文章了。

如果只想保留文章的一段内容，可以先在网页中选中那段文字，再打开剪藏扩展；默认情况下，插件会优先使用选中的内容。想保存整篇文章时，先取消选区。

## 五、常见问题 \{#faq}

遇到保存失败、空白笔记或移动端问题，可以继续查看 [常见问题与解决方法](/blog/obsidian-web-clipper-faq)。

### 点击保存后，没有找到笔记 \{#note-not-found}

先确认当前设备已经安装 Obsidian，并打开过目标保管库。再检查 Web Clipper 中的库名与 Obsidian 是否一致，以及浏览器是否拦住了打开 Obsidian 的请求。

### 正文没有提取完整 \{#incomplete-content}

先确认网页内容已经加载出来，并且没有意外选中一小段文字。不同网站的页面结构会影响提取结果，保存前看一眼正文预览；遇到缺失内容，可以选中需要的文字后再剪藏。

### 断网后，笔记里的图片不显示 \{#offline-images}

Web Clipper 默认保留图片的网络地址，不会自动把图片文件下载到保管库。

如果需要离线阅读，先在 Obsidian 中打开保存的笔记，按 `⌘P`（Mac）或 `Ctrl+P`（Windows）打开命令面板，输入「下载」，选择「下载当前文件内的所有附件」，将图片保存到本地。

![下载当前文件内的所有附件](https://pic.eryinote.com/PicGo/20260915194144-5-clipper-download-attachments.webp)

## 变量表查询 \{#variables}

下面是 Web Clipper 的预设变量，可以填写在笔记名称、笔记位置、属性或笔记内容中。复制时保留双花括号。

| 变量 | 中文说明 |
| --- | --- |
| `{{title}}` | 网页标题 |
| `{{author}}` | 网页作者 |
| `{{url}}` | 当前网页地址 |
| `{{content}}` | 正文、高亮内容或选中文字，输出为 Markdown |
| `{{contentHtml}}` | 正文、高亮内容或选中文字，输出为 HTML |
| `{{description}}` | 网页描述或摘要 |
| `{{published}}` | 发布日期，可用 `date` 过滤器调整格式 |
| `{{date}}` | 当前日期，可用 `date` 过滤器调整格式 |
| `{{time}}` | 当前日期和时间 |
| `{{site}}` | 网站名称或发布者 |
| `{{domain}}` | 网站域名 |
| `{{image}}` | 网页用于社交分享的图片地址 |
| `{{favicon}}` | 网站图标地址 |
| `{{language}}` | 网页语言 |
| `{{words}}` | 字词数量 |
| `{{selection}}` | 选中的文字，输出为 Markdown |
| `{{selectionHtml}}` | 选中的内容，输出为 HTML |
| `{{highlights}}` | 高亮内容，包含文字和时间戳 |
| `{{fullHtml}}` | 整个页面未经处理的 HTML |
| `{{model}}` | 解释器使用的模型名称 |
| `{{modelId}}` | 解释器使用的模型 ID |
| `{{modelProvider}}` | 解释器使用的模型提供商 |

`{{content}}` 会尝试提取网页主体；如果选中了文字，也可能只保存选中部分。剪藏整篇文章前，先取消网页上的文字选区。

## 相关阅读 \{#further-reading}

- [剪藏插件的常见问题与解决方法](/blog/obsidian-web-clipper-faq)