vue框架无痛开发浏览器插件，好用！！本人使用脚手架开发了一款浏览器tab主页加收藏网址弹窗，以后可以自己开发需要的插件了！！

脚手架文档地址 ：这才是 Vue 驱动的 Chrome 插件工程化正确打开方式你是不是也曾被开发 Chrome 插件的各种配置、打包、调试 - 掘金

本人项目地址（gitee） ：fyw-newTab: 这个一款浏览器插件，功能主要是代替常规标签页作为新的主页，在其他网页中点击插件可以新增快捷方式到标签页中，实现更快的导航，新的标签页可以选择多款搜索引擎和更换壁纸

基于 Vue 3 + Vite 的 Chrome 新标签页插件开发实践

前言

在浏览器扩展开发领域，如何将现代前端开发体验与 Chrome 插件开发相结合，一直是一个值得探索的话题。今天要介绍的是一个基于 Onion CLI 脚手架构建的 Chrome 新标签页插件项目 fyw-newTab，它完美地将 Vue 3 的现代化开发体验带入了浏览器插件开发中。

项目概述

fyw-newTab 是一个功能丰富的 Chrome 浏览器新标签页替换插件，它提供了个性化的新标签页体验，包括自定义背景、快捷方式管理、待办事项、热搜榜等功能。更重要的是，这个项目基于 Onion CLI 脚手架构建，为开发者提供了开箱即用的工程化开发体验。

技术栈与脚手架特点

核心技术

Vue 3 (Composition API) - 现代化的响应式框架
Vite 7 - 极速的前端构建工具
TypeScript - 类型安全的开发体验
Pinia - 轻量级状态管理
Element Plus - 企业级 UI 组件库
Vue Router 4 - 单页面路由管理

Onion CLI 脚手架优势

Onion CLI 是一个专门为 Chrome 插件开发设计的 Vue 3 脚手架，它解决了传统插件开发中的诸多痛点：

1. 开箱即用的工程化配置

javascript 复制代码

// vite.config.ts
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.config.js'

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }) // 自动处理 Chrome 插件构建
  ]
})

脚手架自动集成了 @crxjs/vite-plugin，无需手动配置复杂的构建流程，就能将 Vue 项目打包成标准的 Chrome 插件格式。

2. 热更新开发体验

传统插件开发需要频繁手动刷新扩展，而使用 Vite 后，代码修改会自动热更新，大大提升了开发效率。

3. TypeScript 完整支持

typescript 复制代码

// manifest.config.js
import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  manifest_version: 3,
  name: 'fyw-newTab'
  // ... 完整的类型提示
})

提供完整的 TypeScript 类型定义，包括 Chrome API 的类型支持，让开发过程更加安全可靠。

4. 自动导入与组件注册

javascript 复制代码

// 自动导入 Element Plus 组件
;(AutoImport({
  resolvers: [ElementPlusResolver()]
}),
  Components({
    resolvers: [ElementPlusResolver()]
  }))

无需手动导入常用的 Vue API 和组件，提升开发效率。

5. 完善的代码规范

ESLint - 代码质量检查
Prettier - 代码格式化
Husky - Git Hooks 管理
Commitlint - 提交信息规范

核心功能详解

1. 个性化新标签页

插件完全替换了 Chrome 默认的新标签页，提供了一个美观、功能丰富的自定义界面。

时间与日期显示

实时显示当前时间和日期，包括星期信息，让用户一目了然地了解当前时间。

vue 复制代码

<div class="time-widget widget-card">
  <div class="time">{{ currentTime }}</div>
  <div class="date">{{ currentDate }}</div>
</div>

今日运势

每日随机显示不同的运势提示，为工作学习增添趣味性。

javascript 复制代码

const fortuneList = [
  '大吉：今天适合学习新技术，会有意外收获',
  '中吉：工作学习效率很高，保持专注'
  // ...
]

2. 智能搜索功能

多搜索引擎支持

支持 8 种主流搜索引擎：

必应 (默认)
百度
谷歌
DuckDuckGo
Yahoo
搜狗
360搜索
Yandex

智能 URL 识别

输入框能够智能识别用户输入的是网址还是搜索关键词：

typescript 复制代码

const handleSearch = () => {
  const query = searchQuery.value.trim()
  // 判断是否是URL
  if (isValidUrl(query)) {
    window.open(query, '_blank')
  } else {
    // 使用选择的搜索引擎搜索
    const engine = searchEngines.find((e) => e.id === selectedEngine.value)
    window.open(`${engine.url}${encodeURIComponent(query)}`, '_blank')
  }
}

3. 快捷方式管理

添加方式

插件提供了两种添加快捷方式的方式：

弹窗添加 - 点击插件图标，自动获取当前标签页信息
主界面添加 - 在新标签页直接添加自定义快捷方式

功能特性

自动获取网站图标（favicon）
支持自定义名称和图标
右键菜单编辑快捷方式
数据持久化存储（Chrome Storage API）

typescript 复制代码

// 使用 Pinia 管理状态
export const useNewTabStore = defineStore('newTab', {
  actions: {
    addShortcut(shortcut: Shortcut) {
      this.shortcuts.push(shortcut)
      this.saveShortcuts()
    },
    saveShortcuts() {
      chrome.storage.local.set({ shortcuts: this.shortcuts })
    }
  }
})

4. 待办事项管理

内置轻量级待办事项功能，帮助用户管理日常任务：

✅ 添加/删除待办事项
✅ 标记完成状态
✅ 数据持久化存储
✅ 简洁的 UI 设计

5. 热搜榜

提供前端开发相关的热搜内容，包括：

Vue 3 相关技术文章
React 生态内容
TypeScript 最佳实践
前端工程化知识
性能优化技巧
新技术趋势

点击热搜项可直接进行搜索，方便快速获取技术资讯。

6. 自定义背景

用户可以上传自定义背景图片，打造个性化的新标签页：

typescript 复制代码

setBackgroundImage(image: string) {
  this.backgroundImage = image
  chrome.storage.local.set({ backgroundImage: image })
}

支持图片预览和实时切换，所有设置都会自动保存。

7. 响应式设计

采用现代化的响应式布局，完美适配不同屏幕尺寸：

less 复制代码

@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr; // 移动端单列布局
  }
}

项目结构

csharp 复制代码

fyw-newTab/
├── src/
│   ├── api/              # API 请求封装
│   ├── BackgroundScript/ # Service Worker 后台脚本
│   ├── components/       # 通用组件
│   │   ├── AddShortcutDialog.vue
│   │   ├── EditShortcutDialog.vue
│   │   └── SettingsDialog.vue
│   ├── directives/       # 自定义指令
│   ├── hooks/            # 组合式函数
│   ├── router/           # 路由配置
│   ├── store/            # Pinia 状态管理
│   │   ├── newtab.ts     # 新标签页状态
│   │   └── user.ts       # 用户状态
│   ├── style/            # 全局样式
│   ├── types/            # TypeScript 类型定义
│   ├── util/             # 工具函数
│   ├── views/            # 页面组件
│   │   ├── Home/         # 新标签页主界面
│   │   └── Popup/        # 插件弹窗
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── public/               # 静态资源
├── scripts/              # 构建脚本
├── manifest.config.js    # 插件清单配置
└── vite.config.ts        # Vite 配置

开发体验

快速开始

bash 复制代码

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 打包为 crx 文件
pnpm run chrome

开发流程

启动开发服务器 - Vite 会在 dist 目录生成开发版本
加载插件 - 在 Chrome 中加载 dist 目录
热更新 - 修改代码后刷新插件即可看到变化
类型检查 - 运行 pnpm check 进行 TypeScript 类型检查

代码规范

项目配置了完善的代码规范工具：

ESLint - 自动修复常见代码问题
Prettier - 统一代码格式
Husky - Git 提交前自动格式化
Commitlint - 规范提交信息格式

json 复制代码

{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

构建与打包

开发构建

bash 复制代码

pnpm dev

生成开发版本的插件文件到 dist 目录，可直接在 Chrome 中加载测试。

生产构建

bash 复制代码

pnpm build

使用 Vite 进行生产构建，自动优化代码：

代码压缩
Tree Shaking
移除 console 和 debugger
生成 sourcemap（可选）

打包为 CRX 文件

bash 复制代码

pnpm run chrome

自动执行以下步骤：

运行生产构建
使用 crx 工具生成 .crx 安装包
生成签名证书 .pem 文件
输出详细的打包日志

生成的 packageName.crx 文件可以直接分发给用户安装。

技术亮点

1. 状态管理

使用 Pinia 进行状态管理，结合 Chrome Storage API 实现数据持久化：

typescript 复制代码

export const useNewTabStore = defineStore('newTab', {
  state: () => ({
    shortcuts: [],
    todos: [],
    backgroundImage: ''
  }),
  actions: {
    async loadData() {
      const result = await chrome.storage.local.get(['shortcuts', 'todos', 'backgroundImage'])
      // 恢复状态
    }
  }
})

2. 组件化设计

采用 Vue 3 Composition API，代码组织清晰，易于维护：

vue 复制代码

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useNewTabStore } from '@/store/newtab'

const newTabStore = useNewTabStore()
const shortcuts = computed(() => newTabStore.shortcuts)
</script>

3. 类型安全

完整的 TypeScript 支持，包括 Chrome API 的类型定义：

typescript 复制代码

// types/chrome.d.ts
interface Chrome {
  tabs: chrome.tabs.Tabs
  storage: chrome.storage.StorageArea
  // ...
}

4. 现代化 UI

使用 Element Plus 组件库，配合自定义样式，打造现代化的用户界面：

毛玻璃效果（backdrop-filter）
流畅的动画过渡
响应式布局
暗色模式支持（预留）

使用场景

这个插件适合以下场景：

个人使用 - 打造个性化的浏览器新标签页
团队协作 - 快速访问常用网站和工具
学习参考 - 了解 Chrome 插件开发最佳实践
二次开发 - 基于此项目开发自己的插件

总结

fyw-newTab 项目展示了如何使用现代化的前端技术栈开发 Chrome 浏览器插件。通过 Onion CLI 脚手架，开发者可以：

✅ 快速启动 - 无需从零配置，开箱即用

✅ 高效开发 - 热更新、类型提示、自动导入

✅ 规范代码 - 完善的代码规范和 Git Hooks

✅ 轻松打包 - 一键生成插件安装包

这个项目不仅是一个功能完整的新标签页插件，更是一个优秀的 Chrome 插件开发模板，为想要进入浏览器插件开发领域的开发者提供了很好的参考。

参考资源

项目地址 : [gitee.com/fang-yanwen...]
作者: fyw

本文介绍了基于 Onion CLI 脚手架开发的 Chrome 新标签页插件项目，希望对想要开发浏览器插件的开发者有所帮助。