(5)从零开发 Chrome 插件:Vue3 Chrome 插件待办事项应用

(1)从零开发 Chrome 插件:构建你的第一个插件
(3)从零开发 Chrome 插件:实现 API 登录与本地存储功能
(3)从零开发 Chrome 插件:网页图片的批量下载
(4)从零开发 Chrome 插件:Chrome插件调试全攻略
(5)从零开发 Chrome 插件:Vue3 Chrome 插件待办事项应用

Vue3 Chrome 插件待办事项应用

功能概述

一个基于Vue3的Chrome插件待办事项应用,具有以下功能:

  • 添加/删除待办事项
  • 标记完成状态
  • 数据自动保存到Chrome存储
  • 响应式界面设计

功能实现

添加待办事项

标记事项为已完成 / 未完成

删除单个事项

清空所有事项

技术栈

  • Vue 3 - 前端框架
  • Chrome Extension API - 浏览器扩展功能
  • Tailwind CSS - 样式设计
  • Vite - 构建工具

技术要点

数据持久化:

  • 使用 chrome.storage.sync 存储数据

响应式设计:

  • 使用 Tailwind CSS 实现响应式布局
  • 适配不同屏幕尺寸

核心代码实现

项目结构

javascript 复制代码
vue3-todo-chrome-extension/
├── src/
│   ├── App.vue          # 主组件
│   ├── main.js          # 入口文件
├── public/
│   ├── manifest.json    # 插件清单
├── package.json         # 项目配置

数据存储

javascript 复制代码
// 初始化数据
onMounted(() => {
  chrome.storage.sync.get(['todos', 'lastUpdated'], (result) => {
    if (result.todos) todos.value = result.todos
    if (result.lastUpdated) lastUpdated.value = result.lastUpdated
  })
})

// 监听数据变化
watch(todos, (newTodos) => {
  chrome.storage.sync.set({
    todos: newTodos,
    lastUpdated: Date.now()
  })
}, { deep: true })

待办事项管理

javascript 复制代码
// 添加待办
const addTodo = () => {
  if (newTodo.value.trim() === '') return
  
  todos.value.push({
    id: Date.now(),
    text: newTodo.value,
    completed: false
  })
  
  newTodo.value = ''
}

界面组件

javascript 复制代码
<div class="space-y-2 mb-6 max-h-60 overflow-y-auto pr-1">
  <div 
    v-for="(todo, index) in todos" 
    :key="todo.id"
    class="flex items-center p-3 border rounded-lg hover:bg-gray-50 transition duration-200"
  >
    <input 
      type="checkbox" 
      :checked="todo.completed"
      @change="toggleTodo(index)"
    >
    <span :class="todo.completed ? 'line-through text-gray-400' : 'text-gray-800'">
      {{ todo.text }}
    </span>
    <button @click="deleteTodo(index)">
      <i class="fa fa-trash-o"></i>
    </button>
  </div>
</div>

安装与使用

    1. 安装依赖
bash 复制代码
npm install
  • 2.开发模式:
bash 复制代码
npm run dev
    1. 构建生产版本:
bash 复制代码
npm run build
    1. 在Chrome中加载dist目录作为扩展程序

特点

响应式设计,适配不同屏幕尺寸

数据自动保存,关闭浏览器后仍可恢复

简洁直观的用户界面

轻量级,快速加载

总结

这个Chrome插件展示了如何结合Vue 3的响应式特性和Chrome扩展API,实现一个功能完整、数据持久的待办事项应用。通过组合式API,代码结构清晰易维护,而Tailwind CSS则提供了美观的界面样式。

相关推荐
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge5 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou6 小时前
js前端this指向规则
开发语言·前端·javascript
不想上班只想要钱7 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
岁月宁静8 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
JS.Huang10 小时前
【JavaScript】原生函数
开发语言·javascript·ecmascript
533_11 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
ftpeak11 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
一个很帅的帅哥12 小时前
JavaScript事件循环
开发语言·前端·javascript
武天12 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js