不用装插件！3轮对话，我用油猴脚本+AI复刻了掘金闪念笔记，真香！

作者：唐叔在学习

关键词：#油猴脚本 #闪念笔记 #Tampermonkey #AI编程 #浏览器插件开发

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

技术实现思路

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

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

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

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

第一轮：基础功能实现

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

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

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

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

第二轮：跨页面功能优化

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

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

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

第三轮：完整代码实现

作为严谨的(懒惰的)开发者，秉持着"AI最严谨"(苦了AI也不能苦了自己)的原则，我要求AI提供完整版本的代码：

"请给出完整版本的代码"

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

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

核心代码解析

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

javascript 复制代码

// ==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在开发过程中的强大助力：

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

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

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

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

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

结语

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

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

相关资源：

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

我是唐叔，我们下期见~