当前位置：首页 > news >正文

【Trae插件】从0到1，搭建一个能够伪装成网页内容的小说阅读Chrome插件

news 来源：原创 2025/8/12 20:26:11

在这里插入图片描述

【Trae插件】从0到1，搭建一个能够伪装成网页内容的小说阅读Chrome插件

最近，Trae 插件也迎来了更新，Trae 插件（原MarsCode 编程助手）Builder模式全面上线，同时支持 VS Code 、JetBrains IDEs，助你全自然语言从0到1开发完整项目。从“编程助手”进化为高度智能的“AI工程师”。那就必须来挑战一下。

Trae插件下载链接：https://www.trae.com.cn/plugin?utm_source=content&utm_medium=wx&utm_campaign=article

🌟嗨，我是LucianaiB！

🌍 总有人间一两风，填我十万八千梦。

🚀 路漫漫其修远兮，吾将上下而求索。

我想要设计一个插件，实现下面的功能：

🕵️‍♀️ 伪装性：自动识别当前网页的CSS和文字密集度，融合小说排版与背景，实现"网页本地内容"的视觉假象
📂 本地导入：支持上传.txt、.epub文件（或粘贴文本），自动分章节、分页处理
📎 自由嵌入：小说阅读浮窗可拖动、缩放、吸附边缘，仿佛是网页自带的一个"边栏"
📊 自动CSS伪装：抽取当前网页最常用的字体、颜色、背景、行高，生成小说排版样式，融入原站视觉风格
🧩 极限摸鱼：支持自定义"伪装模式"，可以伪装成Excel、代码编辑器、看板等
💾 数据保护：小说内容存在本地chrome.storage.local，不会上传云端，隐私安心

前置准备

1. 安装 / 更新Trae 插件：
● 新用户：在 VS Code 或 JetBrains IDEs 搜索「Trae」安装，重启后登录；
● 老用户：更新至最新版本（VSCode：1.2.4；JetBrains：1.3.0.5 ）。

2. 切换至 Builder 模式：
安装并更新完成后，打开 Trae 插件，点击顶部的 Tab，从 Chat 模式切换至 Builder 模式。在 Builder 模式下，Trae 插件将提供更强大的功能，帮助我们高效地开发项目。
在这里插入图片描述

Trae插件实战

直接对它提我们要开发的要求，请按照用户故事和注意点帮我开发谷歌插件：

作品：基于Amazon Q的“潜入者阅读器” ——InfiltraRead
特点：谋略型摸鱼，伪装式沉浸 —— 一个会伪装成网页内容的小说阅读Chrome插件
优势：把小说“植入”工作网页，CSS伪装加自由移动
维度 创新亮点
🕵‍♀ 伪装性 自动识别当前网页的 CSS 和文字密集度，融合小说排版与背景，实现“网页本地内容”的视觉假象
📂 本地导入 支持上传 .txt、.epub 文件（或粘贴文本），自动分章节、分页处理
📎 自由嵌入 小说阅读浮窗可拖动、缩放、吸附边缘，仿佛是网页自带的一个“边栏”
📊 自动CSS伪装 抽取当前网页最常用的字体、颜色、背景、行高，生成小说排版样式，融入原站视觉风格
🧩 极限摸鱼 支持自定义“伪装模式”：可以伪装成 Excel、代码编辑器、看板等
💾 数据保护 小说内容存在本地 chrome.storage.local，不会上传云端，隐私安心
注意：
1.使用manifest v3版本开发
2.注意中文编码问题
任务
请按照用户故事和注意点帮我开发谷歌插件

在向 Trae 插件提出需求后，它会迅速做出回应。我们只需要点击“全部采纳”，Trae 插件就会根据我们的需求生成相应的代码框架。

在这里插入图片描述

在开发过程中，我们可能会遇到一些问题。例如，在谷歌浏览器中打开插件时，可能会报错。这是正常的，我们只需要将报错信息反馈给 Trae 插件，它会帮助我们分析并解决问题。

我们在谷歌进行打开插件，报错了，在意料之中。但是，不要怕，直接把报错扔给Trae插件。
原来是少了个图标，我们可以自己添加。

在这里插入图片描述

我们可以通过 Trae 插件提供的功能，快速创建一个简单的 SVG 图标。创建完成后，将图标添加到项目中，再次刷新插件，问题就解决了。

在这里插入图片描述

创建完成后，将图标添加到项目中，再次刷新插件，问题就解决了，直接就上传成功了。

在这里插入图片描述

接下来，我们进入测试环节。打开任意一篇文章，点击插件图标，插件会提示我们上传小说文件，并自动匹配当前网页的样式。

在这里插入图片描述

显示上传小说，以及自动匹配等，太优秀了吧。
我们尝试上传一个 .txt 文件，看看效果如何。上传完成后，小说内容会以一个浮窗的形式显示在网页上，并且自动适配了网页的字体、颜色和背景，看起来就像是网页的一部分。

在这里插入图片描述

更有趣的是，我们还可以将小说浮窗隐藏到文章中，伪装成网页的一部分。这样，即使在工作时间，我们也可以偷偷地阅读小说，而不被发现。
这个效果有点满意。
下面是隐藏到一篇文章的效果，哈哈哈哈，是不是没有第一时间发现。

在这里插入图片描述

Trae 插件 builder 模式

在当今快节奏的数字时代，人们对于信息获取和处理的需求日益增长，同时对于隐私和效率的追求也从未停止。最近，Trae 插件的更新为我们带来了一种全新的开发体验。通过其强大的 Builder 模式，开发者可以利用全自然语言从零开始构建完整的项目，极大地提高了开发效率和便捷性。
本文介绍了一个基于 Trae 插件开发的 Chrome 小说阅读插件项目。该插件的核心功能是伪装性，能够自动识别当前网页的 CSS 样式和文字排版，并将小说内容融入其中，实现“网页本地内容”的视觉假象。此外，它还支持本地文件导入、自由嵌入、自动 CSS 伪装、自定义伪装模式以及数据本地存储等强大功能，为用户提供了极致的隐私保护和沉浸式阅读体验。
在开发过程中，Trae 插件的 Builder 模式发挥了关键作用。开发者只需提出需求，Trae 插件即可快速生成代码框架，并在遇到问题时提供解决方案。例如，在测试阶段，插件提示缺少图标，Trae 插件迅速生成了一个简单的 SVG 图标，解决了问题。最终，这款插件成功实现了预期功能，用户可以将小说内容伪装成网页的一部分，甚至隐藏在文章中，轻松实现“摸鱼”阅读。
Trae 插件的出现，不仅为开发者提供了一种高效、智能的开发工具，也为创意实现提供了无限可能。无论是开发实用工具还是趣味插件，Trae 插件都能成为开发者的好帮手。未来，随着技术的不断进步，Trae 插件有望在更多领域发挥更大的作用，为开发者和用户带来更多惊喜。

嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。

【Trae插件】从0到1，搭建一个能够伪装成网页内容的小说阅读Chrome插件

前置准备

Trae插件实战

Trae 插件 builder 模式

相关文章：