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

本文链接：https://blog.youkuaiyun.com/Tang_is_learning/article/details/149164906

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

大家好，我是你们的唐叔。作为一名技术博主，我平时除了在优快云上创作内容外，也经常逛掘金寻找灵感。最近发现掘金推出了一个非常实用的功能——闪念笔记，它可以帮助我们快速记录网页上的灵感和想法。但作为一个喜欢折腾的技术人，我决定不直接使用官方插件，而是借助AI的力量自己实现一个类似的功能。

文章目录

闪念笔记功能简介

掘金的闪念笔记功能允许用户在浏览网页时快速记录灵感，这对于内容创作者来说非常实用。以下是官方功能的截图：

在这里插入图片描述

然而，安装整个掘金插件来实现这个功能感觉有点"杀鸡用牛刀"了。作为一个开发者，我决定自己实现这个功能！

技术选型：油猴脚本

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

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

开发过程：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();
})();