当前位置: 首页 > news >正文

(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 实现响应式布局
  • 适配不同屏幕尺寸

核心代码实现

项目结构

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

在这里插入图片描述

数据存储

// 初始化数据
onMounted(() => {chrome.storage.sync.get(['todos', 'lastUpdated'], (result) => {if (result.todos) todos.value = result.todosif (result.lastUpdated) lastUpdated.value = result.lastUpdated})
})// 监听数据变化
watch(todos, (newTodos) => {chrome.storage.sync.set({todos: newTodos,lastUpdated: Date.now()})
}, { deep: true })

待办事项管理

// 添加待办
const addTodo = () => {if (newTodo.value.trim() === '') returntodos.value.push({id: Date.now(),text: newTodo.value,completed: false})newTodo.value = ''
}

界面组件

<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. 安装依赖
npm install
  • 2.开发模式:
npm run dev
    1. 构建生产版本:
npm run build
    1. 在Chrome中加载dist目录作为扩展程序

特点

响应式设计,适配不同屏幕尺寸
数据自动保存,关闭浏览器后仍可恢复
简洁直观的用户界面
轻量级,快速加载

总结

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

http://www.xdnf.cn/news/1158247.html

相关文章:

  • Vue3.6 无虚拟DOM模式
  • An End-to-End Attention-Based Approach for Learning on Graphs NC 2025
  • 线程(一):基本概念
  • 让黑窗口变彩色:C++控制台颜色修改指南
  • week4
  • 内网后渗透攻击过程(实验环境)--3、横向攻击
  • MES系列 - MES是提升制造执行效率与透明度的关键系统
  • 【自动驾驶黑科技】基于Frenet坐标系的车道变换轨迹规划系统实现(附完整代码)
  • 多目标轨迹优化车道变换规划:自动驾驶轨迹规划新范式:基于Frenet坐标系的车道变换算法全解析
  • 枪战验证系统:通过战斗证明你是人类
  • 单片机启动流程和启动文件详解
  • [Linux]进程 / PID
  • [硬件电路-57]:根据电子元器件的受控程度,可以把电子元器件分为:不受控、半受控、完全受控三种大类
  • 非线性优化框架CasADi工具箱求解最优控制问题OCP
  • 什么是卡贴???
  • 零基础学习性能测试第一章:核心性能指标-并发量
  • 简洁高效的C++终端日志工具类
  • 2.组合式API知识点(1)
  • Dev-C++——winAPI贪吃蛇小游戏
  • Softhub软件下载站实战开发(十九):软件信息展示
  • 让不符合要求的任何电脑升级Windows11
  • 2025.7.20总结-实战演讲
  • 2025年03月20日中软(外包中控)
  • 30天打牢数模基础-卷积神经网络讲解
  • 《P3398 仓鼠找 sugar》
  • 基于深度学习的目标检测:从基础到实践
  • JavaScript 语言基础详解
  • 050_Set接口(HashSet / TreeSet / LinkedHashSet)
  • leetcode75【经典动态规划】之:最长公共子序列
  • imx6ull-系统移植篇11——U-Boot 移植(下)