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

作者:唐叔在学习

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

结语

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

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


相关资源

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

我是唐叔,我们下期见~

相关推荐
yzzzzzzzzzzzzzzzzz5 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
再学一点就睡6 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友7 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
shix .9 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
烛阴9 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
秉承初心10 小时前
Node.js 开发 JavaScript SDK 包的完整指南(AI)
开发语言·javascript·node.js
芜青14 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网14 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
2401_8370885015 小时前
setup 语法糖核心要点
开发语言·前端·javascript
你也向往长安城吗16 小时前
基于 navmesh 的路径搜索技术剖析 (游戏、三维方向必看!!!)
javascript·游戏·游戏开发