首页
/ Chrome扩展现代启动模板 - 使用Vite和Manifest V3

Chrome扩展现代启动模板 - 使用Vite和Manifest V3

2024-08-27 21:49:28作者:蔡怀权

项目介绍

这是一个基于Vite和Chrome Extension Manifest V3的现代化启动模版,由xiaoluoboding开发并以MIT许可证发布。此模板设计用于加速Chrome扩展程序的开发过程,支持背景脚本、内容脚本以及前端组件(如弹窗和选项页面)。通过采用最新的扩展机制,开发者可以更高效地构建安全且遵循最新规范的浏览器插件。

项目快速启动

要迅速开始一个新项目,您需先确保安装了pnpm。之后,执行以下步骤:

  1. 克隆项目模板:

    npm install -g pnpm
    npx degit xiaoluoboding/chrome-ext-mv3-starter my-extension
    
  2. 进入项目目录并安装依赖:

    cd my-extension
    pnpm i
    
  3. 开发模式运行: 开始开发前,运行:

    pnpm dev
    

    这将启动一个实时重新加载的环境。您可以直接在浏览器中加载未经打包的扩展进行测试。

  4. 构建扩展: 准备发布时,执行:

    pnpm build
    

    构建完成后,打包的文件位于extension目录下,适合上传至Chrome商店或本地安装。

应用案例与最佳实践

这个模板适用于多种场景,从简单的书签管理到复杂的网络分析工具。最佳实践中,利用Manifest V3的新特性,比如Service Workers处理后台逻辑,提高扩展的响应性和安全性。开发者应当关注权限的最佳实践,仅请求真正需要的权限,并在用户界面明确告知用户为何需要这些权限。

典型生态项目

  • chrome-web-bookmark: 利用此模板的一个示例,展示如何创建一个能够将链接转换为视觉书签的Chrome扩展,体现了如何封装和优化用户界面以及数据存储方式。

在开发过程中,参考此类生态项目,可以帮助理解模板的实际应用场景及如何进一步定制化您的扩展,确保您的项目既符合最新标准又具备良好的用户体验。


该文档提供了一个基础框架,指导您从零开始快速搭建一个遵循Modern Chrome Extension标准的应用。通过实际操作以上步骤,结合最佳实践和生态中的示例项目,您将能够快速上手并开发出功能丰富且高效的浏览器扩展。

登录后查看全文
热门项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
23
6
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
225
2.27 K
flutter_flutterflutter_flutter
暂无简介
Dart
526
116
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
211
287
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
9
1
frameworksframeworks
openvela 操作系统专为 AIoT 领域量身定制。服务框架:主要包含蓝牙、电话、图形、多媒体、应用框架、安全、系统服务框架。
CMake
795
12
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
986
583
pytorchpytorch
Ascend Extension for PyTorch
Python
67
97
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库,实现网络在NPU上加速计算。
C++
566
94
GLM-4.6GLM-4.6
GLM-4.6在GLM-4.5基础上全面升级:200K超长上下文窗口支持复杂任务,代码性能大幅提升,前端页面生成更优。推理能力增强且支持工具调用,智能体表现更出色,写作风格更贴合人类偏好。八项公开基准测试显示其全面超越GLM-4.5,比肩DeepSeek-V3.1-Terminus等国内外领先模型。【此简介由AI生成】
Jinja
43
0