🐟 知乎摸鱼 🐟 (Zhihu Fisher)

使用 VSCode，浏览知乎推荐及热榜内容，快乐摸鱼。提供沉浸模式、图片/视频展示方式、灰色模式、智能伪装模式，避免摸鱼被发现！支持评论区、搜索、收藏夹等功能。

🔮 背景 🔮

• 其实就是想上班摸会鱼，直接网页刷知乎容易被抓包，而且网页有很多图片，老板/同事一看就知道你在摸鱼。
• 假装敲代码，实则在 VSCode 中刷知乎，结果发现市场中的那些插件，基本上都是几年前的产物了，不更新了或者根本用不了 😥，索性直接写了一个。
• 欢迎推荐给你的同事，让他们也能在 VSCode 中愉快摸鱼！🤣 独摸摸不如众摸摸~
• 如果有更多的意见和建议，欢迎提交Issues，我会尽快修复和更新。欢迎许愿 🤓☝
• 如果对您有所帮助，麻烦给个好评，感谢~（点一下插件名字旁边的五星即可 🎉，感谢！）

🚀 主要功能 🚀

1. 支持 加载知乎热榜
2. 支持 加载知乎推荐
3. 支持 加载搜索结果
4. 支持 文章、回答内容的加载，支持对内容进行赞同/不赞同的操作
5. 支持 完整的收藏夹功能，查看和管理自己创建和关注的收藏夹
6. 支持 切换媒体（图片、视频等）模式（隐藏|迷你|正常）的功能，避免摸鱼被发现
7. 支持 快捷键操作，键盘 ←→ 左右箭头可以切换上/下一个回答，按/可以切换图片的显示和隐藏，按 Crtl+↑↓ 上下箭头可以切换上/下篇内容
8. 支持 阅读区样式调整，文章可以调整字体大小、颜色、排版等样式
9. 支持 评论区，可以查看文章/回答的评论内容，同时支持查看评论的子评论
10. 支持 沉浸模式（推荐使用），隐藏其他不重要的信息，只显示问题标题和回答内容
11. 支持 收藏文章、问答到指定收藏夹，支持缓存收藏夹信息，避免每次都要重新加载
12. 支持 灰色模式，将页面所有内容转为灰色显示，进一步地摸鱼，降低被老板发现的风险 😂
13. 支持 智能伪装模式，切到其他页面后自动将文章页面的标题和图标伪装为代码文件，避免摸鱼被发现，切回后自动恢复

更多功能，敬请探索~

🎯 支持的 VSCode 版本 🎯

• 1.82.0 及以上版本

🎉 使用方式 🎉

1. 安装插件

安装后在 VSCode 侧边栏中找到 📖 图标

2. 配置浏览器

按照指示配置插件使用的 Chrome 浏览器，配置完成后重启 VSCode 以应用规则。

因为用到这个 Puppeteer 这个库，其原理就是在后台模拟打开知乎，模拟人在浏览，没配置浏览器的话，就没法在后台加载页面了 😥。

2.1 配置方式

插件提供两种配置方式：使用本地浏览器（推荐） 和 安装浏览器 。

2.2 使用本地浏览器

你可以选择安装，也可以使用本地已经安装的谷歌浏览器，侧边栏有入口可以设置，或者Ctrl/Commend+,打开设置，搜索框输入zhihu，找到Custom Chrome Path，输入本地浏览器的路径即可。

本地浏览器地址类似：（谷歌浏览器的安装路径，其实默认就是下面的路径，但是实际安装不一定是默认的路径，就需要你指定一下）

• Windows 用户：C:\Program Files\Google\Chrome\Application\chrome.exe，需要以chrome.exe结尾
• Mac 用户：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
• Linux 用户：/usr/bin/google-chrome 或 /snap/bin/chromium？ 第一个路径是可以的，第二个的话不清楚

2.2.1 Windows 获取本地 Chrome 浏览器路径的方法

1. 在桌面上找到 Chrome 浏览器的快捷方式，右键点击，选择"属性"
2. 在"快捷方式"选项卡中，找到"目标"字段，复制该路径
3. 将路径中的"C:\Program Files\Google\Chrome\Application\chrome.exe"去掉引号，保留路径部分即可

• 如果还是不清楚，可以参照下图：

2.2.2 Mac 获取本地 Chrome 浏览器路径的方法

1. 打开终端（Terminal），输入以下命令：ls /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
2. 如果显示了路径，则说明 Chrome 浏览器已安装在该位置
3. 如果没有安装，可以在终端中输入以下命令进行安装：brew install --cask google-chrome
4. 安装完成后，重新运行第一步的命令即可（如果找不到请百度，因为手头没有 Mac 电脑，无法测试）

2.2.3 Linux 获取本地 Chrome 浏览器路径的方法

1. 打开终端，输入以下命令：which google-chrome 或 which chromium-browser
2. 如果显示了路径，则说明 Chrome 浏览器已安装在该位置
3. 如果没有安装，可以在终端中输入以下命令进行安装：sudo apt install google-chrome-stable 或 sudo apt install chromium-browser
4. 安装完成后，重新运行第一步的命令即可
5. 如果还是不清楚，可以百度一下，因为手头没有 Linux 电脑，无法测试 🤔

2.3 安装浏览器

如果你选择了安装，那么这个浏览器安装完成后会在：

• Windows 用户：C:\Users\[用户名]\.cache\puppeteer\chrome\win64-135.0.7049.84\chrome-win64\chrome.exe
• Mac 用户：/Users/[用户名]/Library/Caches/puppeteer/chrome/mac-x64-135.0.7049.84/chrome-mac-x64/Google Chrome.app/Contents/MacOS/Google Chrome
• Linux 用户：/home/[用户名]/.cache/puppeteer/chrome/linux-x64-135.0.7049.84/chrome-linux-x64/chrome

3. 配置 Cookie

输入知乎的 Cookie，然后就会自动加载推荐及热榜内容

3.1 Cookie 获取方式

• 在知乎网页端登录后，按 F12 打开开发者工具，切换到"网络"选项卡，选择一个请求，找到请求头中的Cookie字段，复制其值，粘贴到 VSCode 中输入框即可
• 如果还是不清楚，可以参照下图：

3.2 Cookie 隐私保护声明

我们非常重视您的隐私和数据安全，特此声明：

• 本地存储：您的 Cookie 仅存储在本地 VSCode 配置文件中，不会上传到任何服务器
• 用途限制：Cookie 仅用于访问知乎内容，获取推荐、热榜和搜索结果，不会用于其他任何用途
• 数据保护：我们不会收集、分析、分享或恶意使用您的 Cookie 信息
• 完全控制：您可以随时通过插件设置清除或更新 Cookie
• 开源透明：本插件完全开源，您可以查看所有源代码，确认 Cookie 的使用方式

一句话概括：Cookie 只存在你的电脑里面，插件不会上传你的 Cookie，要来也没用 😂，要是不放心也可以私聊我查看源码

4. 开始使用

加载完成后点击内容即可查看，就可以愉快 🐟 摸鱼 🐟 啦~

💥 更新日志 💥

查看完整更新日志，了解所有版本的详细更改。

📝 TODO 📝

• ~~重构代码，简化流程~~ (v0.0.6 已重构)
• ~~增加更多功能，比如搜索、收藏等~~ (v0.0.8 已实现搜索功能，v0.2.2 已实现收藏功能)
• ~~详情页面添加回答跳转功能~~ (v0.0.7 已实现分页跳转)
• ~~支持快捷键切换图片隐藏和显示~~ (v0.1.0 已实现)
• ~~支持用户指定自己的 Chrome.exe 浏览器地址，就不用下载新的了~~ (v0.1.1 已实现)
• ~~支持小图模式，比如想要摸鱼，但是也想偷偷看图片~~ (v0.1.3 已实现)
• ~~支持设置文章的各种样式，比如字体大小、颜色等~~ (v0.1.3 已实现)
• ~~支持加载回答的评论等。~~ (v0.1.4 已实现)

🤗 更多功能，欢迎许愿 🎉~

🐞 已知问题 🐞

1. 推荐列表可能加载不出来，可能跟 Cookie 中 BEC 参数有关，那么需要你前往知乎首页，点击推荐切换到推荐列表，然后刷新页面，获取新的 Cookie，粘贴到 VSCode 中即可。（我猜这个参数可能记录了用户的操作，比如之前切换到热榜列表，那么下次打开知乎也切到热榜，所以需要切到推荐后再拿 Cookie）
2. 为啥要等推荐列表加载出来才能查看内容呢？因为知乎首页很鸡贼，如果在加载过程中，你查看了内容，那么 Puppeteer 就会打开一个新标签页获取内容，那么首页的标签页失去焦点，滚动加载更多就失效了，所以需要等推荐列表加载完成后再查看内容。【我是想着不管你机制怎么变，我都是模拟人在访问，那么就算慢点也无妨，毕竟也能够加载出来 😂】
3. 因为新版接口有防爬机制，所以用的是无限制的旧版接口，那么有时候可能会看到重复的评论，这个我也没招，毕竟是接口返回回来的。哎凑合着看吧哈哈...
4. 在加载回答的时候，会出现页面状态重置的问题。就比如打开了子评论的弹窗正看着，然后又加载了一批回答，那么页面就会回到初始状态（对应的就是子评论弹窗被关闭，页面回到顶部）。这个问题是因为直接将整个 html 文档替换来更新状态导致的。代码是用 ts 写的没用主流框架，暂时也没动力改了，凑合着用吧。（其实应该通过 postMessage 的方式去通知文档哪里需要更新，而不是整个文档重新生成然后替换）
5. 欢迎在 Issues 中反馈问题，我会尽快修复。

🤓☝ 实现原理 🤓☝

基于 VSCode 插件脚手架，使用 Puppeteer 来模拟浏览知乎，抓取内容并渲染成 HTML，最后在 VSCode 中显示。

技术栈：TypeScript、Puppeteer、HTML、CSS

📬 反馈问题 📬

• 在GitHub Issues中提交问题，我看到会尽快回复和修复。

💖 欢迎赞赏 💖

💰 一分也是爱，您的支持是我更新的最大动力！如果帮到你麻烦给个好评，感谢~（点一下插件名字旁边的五星即可 🎉，感谢！）