从0到1用Cursor开发FlashMark书签插件

我用Cursor开发FlashMark书签插件的心路历程

❝

每当我看到好的网站，我就想收藏起来，收着收着就找不到在哪了。当我发现自己的Chrome书签栏变得越来越混乱，却找不到一款满意的书签管理工具时，我决定：何不自己动手，丰衣足食？这就是FlashMark的诞生故事。

仓库地址 FlashMark

预览

为什么我要开发FlashMark？

作为一个重度网络用户，我每天都会收藏大量有价值的网页。随着时间推移，我的书签数量急剧增加，找起来却越来越困难。我发现Chrome原生的书签管理功能虽然基础实用，但在以下几个方面还有很大的提升空间：

搜索体验不够流畅：原生搜索功能较为基础，无法快速定位到我需要的书签
视觉识别度不高：缺乏直观的视觉元素，使得快速识别特定书签变得困难
键盘操作支持有限：作为键盘党，我希望能通过快捷键高效操作
分享功能欠缺：想要分享书签，操作步骤繁琐

于是，我决定开发FlashMark插件，打造一个简洁高效的书签管理工具。

Cursor如何改变我的开发体验

在开始开发前，我选择了Cursor作为我的主力IDE。这个决定极大地改变了我的开发效率和体验。对于那些不熟悉的朋友，Cursor是一款基于VS Code并集成了AI能力的编辑器，特别适合快速编码和解决复杂问题。

以下是Cursor帮助我加速开发的几个关键方面：

1. 快速搭建项目结构

当我决定使用Vue 3构建FlashMark时，Cursor帮我快速生成了项目框架。我只需描述我想要的功能，Cursor就能生成基础的文件结构和代码模板。

例如，当我输入"创建一个Chrome扩展的基本结构，使用Vue 3和Vite"，Cursor立即帮我生成了包含manifest.json、popup.html和基础Vue组件的项目骨架。

2. 解决技术难题

在开发过程中，我遇到了不少技术难题，Cursor的AI辅助功能成为了我的得力助手。

例如，当我在实现书签搜索功能时，遇到了如何高效过滤和显示大量书签的问题。我向Cursor描述了我的需求，它给出了使用Vue计算属性和防抖搜索的解决方案：

ini 复制代码

// Cursor建议的防抖搜索实现
function debounceSearch() {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    // 搜索逻辑已经通过计算属性实现
  }, 300);
}

// 基于计算属性的高效过滤
const filteredBookmarks = computed(() => {
  if (!searchText.value) return bookmarks.value;
  
  const searchLower = searchText.value.toLowerCase();
  return bookmarks.value.filter(bookmark => {
    if (searchMode.value === 'title') {
      return bookmark.title.toLowerCase().includes(searchLower);
    } else {
      return bookmark.url?.toLowerCase().includes(searchLower);
    }
  });
});

这段代码不仅解决了我的问题，还教会了我如何更优雅地处理搜索逻辑。

FlashMark开发过程中的挑战与解决方案

挑战一：Chrome扩展的特殊环境限制

开发Chrome扩展与普通Web应用有着根本的不同。我很快发现，扩展运行在一个受限的环境中，特别是在权限、跨域请求和API使用上有诸多限制。

解决方案：

我通过Cursor查询Chrome扩展文档，学习了manifest.json的正确配置方式。比如，为了实现剪贴板功能，我需要在权限中添加clipboardWrite：

json 复制代码

"permissions": [
  "bookmarks",
  "tabs",
  "storage",
  "notifications",
  "contextMenus",
  "clipboardWrite"
]

起初我错误地使用了clipboard-write（带连字符），导致权限错误。Cursor帮我识别出这个问题，并提供了正确的驼峰式命名clipboardWrite。

挑战二：图标加载问题

获取网站favicon是FlashMark的重要功能，但我很快发现并非所有网站都有可访问的favicon，这导致界面中出现大量的加载错误。

解决方案：

Cursor帮我设计了一个优雅的降级方案 - 当图标加载失败时，显示基于网站名称首字母的彩色圆形图标：

ini 复制代码

function handleIconError(event, bookmark) {
  event.target.style.display = 'none';
  // 创建默认图标替代
  const defaultIcon = document.createElement('div');
  defaultIcon.className = 'default-icon';
  defaultIcon.textContent = bookmark.title.charAt(0).toUpperCase();
  event.target.parentNode.insertBefore(defaultIcon, event.target.nextSibling);
}

这个解决方案不仅解决了技术问题，还增强了界面的一致性和美观度。

挑战三：通知系统兼容性

在实现欢迎通知功能时，我遇到了Chrome通知API的兼容性问题，特别是"Unable to download all specified images"的错误困扰了我好几天。

解决方案：

在Cursor的帮助下，我设计了一个双重通知机制，既使用Chrome的通知API，又实现了应用内Toast通知作为备选：

php 复制代码

function showWelcomeMessage() {
  try {
    chrome.notifications.create('welcome', {
      type: 'basic',
      iconUrl: chrome.runtime.getURL('icons/icon128.png'),
      title: '书签检索已安装',
      message: '使用Ctrl+Shift+B快速打开插件，轻松搜索您的书签！',
      priority: 2
    }, (notificationId) => {
      if (chrome.runtime.lastError) {
        console.error('通知创建失败:', chrome.runtime.lastError);
        saveWelcomeFlag(); // 备用方案
      }
    });
  } catch (err) {
    console.error('显示欢迎消息失败:', err);
    saveWelcomeFlag(); // 备用方案
  }
}

这种双重机制确保了用户无论在什么环境下都能收到欢迎信息。

挑战四：分享功能实现

实现书签分享功能时，我遇到了Web Share API在扩展环境中的限制，以及剪贴板权限问题。

解决方案：

我设计了一个多层级的分享/复制机制，结合了多种方法来确保功能的可靠性：

scss 复制代码

function shareBookmark(bookmark, event) {
  event.preventDefault();
  event.stopPropagation();
  
  if (navigator.share) {
    navigator.share({
      title: bookmark.title,
      url: bookmark.url
    }).catch((error) => {
      console.log('Web Share API分享失败:', error);
      copyToClipboard(bookmark);
    });
  } else {
    copyToClipboard(bookmark);
  }
}

当用户点击分享按钮时，系统会尝试使用Web Share API，如果不可用则回退到剪贴板复制功能，并展示清晰的用户反馈。

Cursor的AI辅助如何提升我的开发效率

使用Cursor开发FlashMark的过程中，我发现它的AI功能特别适合以下场景：

迭代优化代码：我可以直接告诉Cursor"优化这个函数的性能"或"让这段代码更易读"，它会智能地提出改进建议
解决特定错误：当遇到错误时，我可以将错误信息粘贴给Cursor，它会分析可能的原因并提供解决方案
生成样板代码：对于重复性的工作，如创建新组件或配置文件，Cursor可以根据我的描述快速生成代码
学习新概念：当我需要学习新的技术概念时，Cursor不仅提供代码，还会解释背后的原理

例如，当我想要实现书签项的动画效果时，我只需告诉Cursor我想要的效果，它就能生成相应的CSS代码并解释每个属性的作用。

FlashMark的成果与用户反馈

经过几周的开发和迭代，FlashMark终于成型。它实现了我最初设想的所有功能，甚至超出了预期：

快速搜索：用户可以即时搜索和过滤所有书签
美观的界面：采用渐变色调和动画效果，提供愉悦的视觉体验
键盘快捷键：支持多种快捷键操作，特别受键盘党喜爱
分享功能：一键复制或分享书签链接
错误处理：优雅处理各种异常情况，包括加载错误和空状态

我将插件分享给了一些朋友试用，收到了积极的反馈。特别是键盘快捷键功能得到了高度评价，许多用户表示这大大提高了他们的工作效率。

也有用户提出了一些改进建议，如右键菜单集成和书签徽章计数功能。在Cursor的帮助下，我很快实现了这些功能，使FlashMark变得更加完善。

结语与展望

开发FlashMark的过程既充满挑战，也充满乐趣。Cursor的AI辅助功能极大地提升了我的开发效率，让我能够专注于创意和用户体验，而不是陷入技术细节的困境。

未来，我计划继续完善FlashMark，可能的改进方向包括：

添加书签文件夹支持，允许层级化浏览
实现书签同步功能，保持多设备一致性
添加数据分析功能，提供使用统计和建议
支持更多自定义选项，如主题和布局

如果你也有类似的开发需求，我强烈推荐尝试Cursor。它不仅是一个编辑器，更是一个能够理解你意图、协助你实现创意的开发伙伴。

对于那些想尝试FlashMark的朋友，欢迎访问我的GitHub仓库进行下载和提供反馈。让我们一起，让书签管理变得更加高效愉悦！