3小时从0到1：Chrome导航插件开发实战 - RssNav 【基于Cursor赋能】

1. 项目概述

兄弟们，AI这玩意儿真香！以前写个浏览器插件得折腾好几天，现在有了Cursor这个AI助手，3小时就搞定了。RssNav这个项目就是最好的证明 - 从零开始到完整功能，全程开挂！
先放地址：RssNav Github

1.1 项目背景

事情是这样的：在GitHub上发现一个导航扩展，功能挺不错的，就是：

• 项目已经两年没更新了
• 缺少一些新功能（比如暗黑模式、便签、待办等）
• 部分API接口需要更新

2. 技术实现

RssNav基于Vue 3 + TypeScript开发，采用Chrome Extension Manifest V3规范，实现了新标签页导航、多搜索引擎切换、书签管理等功能。

2.1 技术栈

• 前端框架：Vue 3
• 开发语言：TypeScript
• 构建工具：Vite
• 状态管理：Pinia
• 打包工具：Vite + Chrome Extension Manifest V3

2.2 项目架构

2.2.1 目录结构

src/
├── api/          # API 接口定义
├── assets/       # 静态资源
├── components/   # Vue 组件
├── stores/       # Pinia 状态管理
├── types/        # TypeScript 类型定义
├── utils/        # 工具函数
├── App.vue       # 根组件
└── main.ts       # 入口文件

2.2.2 核心功能模块

1. 导航页面：作为新标签页展示
2. 搜索功能：支持多搜索引擎切换
3. 书签管理：本地存储的书签管理
4. 主题切换：支持明暗主题切换

2.3 Chrome 扩展实现

2.3.1 Manifest V3 配置

{
  "manifest_version": 3,
  "permissions": [
    "storage",
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "scripting"
  ],
  "host_permissions": [
    "https://suggestion.baidu.com/*",
    "https://api.bing.com/*",
    "https://suggestqueries.google.com/*"
  ],
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}

2.3.2 构建配置

1. 针对 Chrome 扩展的特殊构建模式
2. 资源压缩和优化
3. 代码分割策略
4. 静态资源处理

2.4 跨域解决方案

2.4.1 跨域问题分析

1. 扩展页面与外部 API 的通信
2. 内容脚本与页面脚本的通信
3. 不同域名的资源访问

2.4.2 解决方案

1. 权限声明：

   {
     "permissions": [
       "webRequest",
       "webRequestBlocking"
     ],
     "host_permissions": [
       "https://suggestion.baidu.com/*",
       "https://api.bing.com/*"
     ]
   }
   

2. 跨域请求处理：

   • 使用 background service worker 作为中间层
   • 通过 chrome.webRequest API 拦截和修改请求
   • 处理 CORS 和预检请求

3. 消息传递机制：

   • chrome.runtime.sendMessage 进行扩展内部通信
   • chrome.tabs.sendMessage 进行内容脚本通信

4. 安全策略：

   {
     "content_security_policy": {
       "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; object-src 'self'"
     },
     "web_accessible_resources": [{
       "resources": ["assets/*", "lib/*", "background.js"],
       "matches": ["<all_urls>"]
     }]
   }
   

更多详情请运行项目查看，欢迎star