网站导航
> 技术文档 > 不用装插件！3轮对话，我用油猴脚本+AI复刻了掘金闪念笔记，真香！_掘金ios版本闪念笔记入口在哪里

不用装插件！3轮对话，我用油猴脚本+AI复刻了掘金闪念笔记，真香！_掘金ios版本闪念笔记入口在哪里

网友: 技术文档 2025-07-30 19:33:23

作者：唐叔在学习
专栏：唐叔学AI
关键词：#油猴脚本 #闪念笔记 #Tampermonkey #AI编程 #浏览器插件开发

大家好，我是你们的唐叔。作为一名技术博主，我平时除了在CSDN上创作内容外，也经常逛掘金寻找灵感。最近发现掘金的一个非常实用的功能——闪念笔记，它可以帮助我们快速记录网页上的灵感和想法。然而，安装整个掘金插件来实现这个功能感觉有点\"杀鸡用牛刀\"了。作为一个开发者，我决定借助AI的加持自己实现这个功能！

文章目录

    • 技术实现思路
    • 开发过程：AI助力三轮迭代
      • 第一轮：基础功能实现
      • 第二轮：跨页面功能优化
      • 第三轮：完整代码实现
    • 核心代码解析
    • 总结与思考
    • 结语

技术实现思路

掘金的闪念笔记功能允许用户在浏览网页时快速记录灵感，而实现这个功能，我瞬间想到了使用 油猴 + JavaScript脚本。

油猴(Tampermonkey)是一款强大的浏览器插件，它允许用户编写自定义JavaScript脚本来自定义网页行为。使用油猴脚本实现闪念笔记功能有以下优势：

  1. 轻量级，不需要安装完整插件
  2. 跨浏览器兼容
  3. 完全自定义功能
  4. 数据本地存储，隐私性好

开发过程：AI助力三轮迭代

第一轮：基础功能实现

我首先向DeepSeek AI提出了基本需求：

“当前你需要使用油猴插件开发一个脚本，脚本的功能是当浏览网页时，可以标记网页内容，将其记录成笔记，存储到脚本中，每次打开脚本可以查看笔记。类似于掘金的闪念笔记效果。”

AI很快给出了基础实现代码，主要功能包括：

  • 选中文本后显示\"添加闪念\"按钮
  • 点击按钮将选中内容保存为笔记
  • 查看已保存的笔记列表

在这里插入图片描述

第二轮：跨页面功能优化

基础版本有一个明显缺陷：笔记无法跨页面共享。于是我提出了第二轮优化需求：

“当前插件功能，不支持跨页面显示笔记内容，请实现在A页面记录的笔记，点击显示闪念笔记时，可以在b页面显示A页面记录的笔记。”

AI给出了解决方案，但这次代码不完整，需要进一步优化。

在这里插入图片描述

第三轮：完整代码实现

作为严谨的开发者，我要求AI提供完整版本的代码：

“请给出完整版本的代码”

这次AI给出了完整的实现，包括：

  • 使用GM_setValue/GM_getValue实现跨页面数据存储
  • 按域名分类笔记
  • 搜索过滤功能
  • 笔记导出功能

在这里插入图片描述

核心代码解析

以下是完整版的核心代码结构，完整版本的代码见附录的相关资源。

// ==UserScript==// @name 网页闪念笔记(完整版)// @namespace https://github.com/yourname// @version 2.0// @description 支持跨页面查看和管理的闪念笔记工具// @author You// @match *://*/*// @grant GM_setValue// @grant GM_getValue// @grant GM_addStyle// @grant GM_registerMenuCommand// ==/UserScript==(function() { \'use strict\'; // 笔记数据结构 const STORAGE_KEY = \'FLASH_NOTES_v2\'; let allNotes = GM_getValue(STORAGE_KEY, {}); // UI组件初始化 const container = document.createElement(\'div\'); container.className = \'flash-note-container\'; // ...其他UI组件 // 核心功能函数 function saveNote(note) { // 保存笔记逻辑 } function refreshNotes() { // 刷新笔记显示 } function deleteNote(note) { // 删除笔记逻辑 } function exportNotes() { // 导出笔记为Markdown } // 事件监听 document.addEventListener(\'mouseup\', handleTextSelection); // ...其他事件监听 // 初始化 initTabs(); refreshNotes();})();

总结与思考

通过这个项目，我深刻体会到AI在开发过程中的强大助力：

  1. 效率提升：原本可能需要数小时的工作，在AI帮助下缩短到几分钟
  2. 学习成本降低：不需要精通油猴脚本API，AI可以提供正确实现
  3. 灵感验证：快速验证想法的可行性

当然，AI生成的代码并非完美，需要注意：

  • 需要人工审查和测试
  • 可能需要多轮迭代才能得到理想结果
  • 复杂逻辑仍需开发者自己把控

技术反思：未来可以考虑添加的功能

  1. 云同步支持
  2. 多设备共享
  3. 笔记标签分类
  4. 与Markdown编辑器集成

结语

这个闪念笔记工具已经成为了我日常创作的得力助手。希望这个案例能给大家一些启发：善用AI工具，可以让我们的开发工作事半功倍。如果你也有类似的需求，不妨尝试自己实现一个！

欢迎在评论区分享你的使用体验和改进建议！

相关资源：

  • flash-notes-script: 闪念笔记-油猴插件版本 - GitHub
  • flash-notes-script: 闪念笔记-油猴插件版本 - GitCode
  • Tampermonkey官网
  • 掘金闪念笔记

如果觉得这篇文章有帮助，请点赞收藏支持一下！

网络标签：

相关问题