Chrome扩展现代开发模板：基于Vite的Manifest V3入门指南

Chrome扩展现代开发模板：基于Vite的Manifest V3入门指南

chrome-ext-mv3-starter ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-ext-mv3-starter

本指南旨在帮助开发者快速上手并理解chrome-ext-mv3-starter这一开源项目，它是专门为创建使用Chrome Extension Manifest V3版本的现代扩展而设计的。以下是关键部分的详细介绍：

1. 目录结构及介绍

该项目遵循清晰的组织结构，便于理解和维护。

主要目录与内容

• src: 扩展的核心源代码所在。
  • background: 后台脚本，负责扩展在浏览器后台持续运行的任务。
  • contentScripts: 内容脚本，直接与网页互动的脚本。
  • frontend: 前端界面代码，包括弹出窗（popup）和选项页面（options）。
• manifest.ts: Chrome扩展的元数据配置文件，定义了扩展的功能和权限。
• scripts: 开发辅助脚本，如构建或启动命令。
• extension: 扩展包根目录，最终构建产物存放于此，准备上传至Chrome商店。
• 其它配置文件：如.gitignore, pnpm-lock.yaml, tsconfig.json, vite.config.ts等，用于项目配置与构建设置。

2. 项目启动文件介绍

项目的主要启动控制位于脚本命令中，特别是在scripts目录下的间接脚本或通过pnpm（或npm）指定的脚本命令。典型地，你将使用以下命令来启动开发服务器：

pnpm dev

该命令利用Vite搭建一个本地开发环境，实现热模块替换(HMR)，允许开发者即时看到更改效果而无需刷新页面。

3. 配置文件介绍

manifest.ts

这是Chrome扩展的关键配置文件，已经迁移到TypeScript以增强类型安全性。它定义了扩展的基本信息，如名称、描述、图标、所需权限、以及背景脚本等。Manifest V3引入的变化在此文件中体现，比如新的权限声明方式和服务工作者的配置。

// 示例简化版
{
  "name": "Your Extension Name",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  // ...其他配置项
}

vite.config.ts

Vite配置文件负责项目的构建和开发服务器设置。它包含了自动导入组件、处理TypeScript、Windi CSS支持等特性。这是配置构建流程的关键，确保项目按需编译，并且支持Vue 3和现代前端开发的最佳实践。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 可能还包括自定义插件配置...
export default defineConfig({
  plugins: [vue()],
  // 其他配置选项...
});

通过以上介绍，开发者可以快速了解如何导航并开始使用chrome-ext-mv3-starter项目，从初始化开发环境到深入每个功能模块的定制，进而快速开发Chrome扩展应用。记得根据实际需求调整配置和源代码，以满足你的扩展开发需要。

chrome-ext-mv3-starter ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-ext-mv3-starter