不用装插件!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工具,可以让我们的开发工作事半功倍。如果你也有类似的需求,不妨尝试自己实现一个!

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


相关资源

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

我是唐叔,我们下期见~

相关推荐
星月心城6 小时前
Promise之什么是promise?(01)
javascript
二川bro6 小时前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia6 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
小西↬7 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia7 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
烛阴8 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee8 小时前
JavaScript 语句和函数
开发语言·前端·javascript
cos10 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
剪刀石头布啊11 小时前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊11 小时前
js常见的单例
前端·javascript