从 Vue 报错到原生 JS 逆袭：小龙虾记事本 🐈 Chrome 插件开发全记录
在 AI 助手的辅助下，开发一个 Chrome 插件需要多久？答案是：从“白屏报错”到“多端云同步”，我们只用了不到一个小时。
今天，我将带大家回顾 “小龙虾记事本 🐈” 插件的诞生全过程。这不仅是一个工具的发布，更是一场关于 Chrome 插件安全策略（CSP）的实战教学。
🚀 插件简介
小龙虾记事本 🐈 是一款专为 Markdown 爱好者打造的极简 Chrome 插件。它不占用系统资源，点击即用，支持实时预览、代码高亮，并且在最新的 v1.3.0 版本中实现了 Google 账号云同步。
核心功能
- 沉浸式写作：编辑与预览一键切换，最大化利用插件窗口空间。
- 全能工具栏：支持 H1-H3、加粗、斜体、代码块、表格、图片等 10+ 种快捷操作。
- 云端同步：基于
chrome.storage.sync，只要登录 Chrome 账号，笔记随身而行。 - 隐私安全：100% 本地/云端加密存储，不经过任何第三方服务器。
🛠️ 开发历程：从坑里爬出来的经验
1. 遭遇 CSP 拦截
最初，我们尝试使用 Vue 3 和 Tailwind CSS 来快速构建 UI。然而，Chrome 插件（Manifest V3）拥有极其严格的 内容安全策略 (CSP)。
- 报错：
Uncaught EvalError: Evaluating a string as JavaScript violates the following Content Security Policy... - 原因：Vue 的运行时模板编译和 Tailwind 的动态样式生成都依赖于
eval()或new Function()，这在插件环境中是被绝对禁止的。
2. 原生 JS 的逆袭
为了确保 100% 的兼容性和秒开速度，我们果断抛弃了 Vue 框架，回归 原生 JavaScript (Vanilla JS)。
- 优势：不再有模板编译过程，完全符合安全规范，且插件体积减小了 80%。
- 挑战：需要手动处理 DOM 操作和状态同步，但换来的是极致的性能。
3. 实现云同步
在 v1.3.0 版本中，我们将存储引擎从 local 升级到了 sync。
- 技术细节：利用
chrome.storage.sync接口，将数据托管在 Google 的云端同步服务中。 - 限制处理：针对 Google 的 100KB 总量限制，我们加入了错误捕获和配额提醒，确保用户数据不丢失。
📥 下载与安装
您可以直接下载我们打包好的 v1.3.0 云同步增强版：
👉 点击下载：小龙虾记事本 🐈 v1.3.0_SYNC.zip
安装步骤：
- 下载并解压 ZIP 文件。
- 打开 Chrome 浏览器，访问
chrome://extensions/。 - 开启右上角的 “开发者模式”。
- 点击 “加载已解压的扩展程序”，选择解压后的文件夹即可。
💡 结语
“小龙虾记事本”的开发过程证明了：在 AI 时代，工具的选择固然重要，但对底层原理（如浏览器安全策略）的理解才是解决问题的关键。希望这款小工具能成为您记录灵感的好帮手！