Chrome 扩展开发入门教程

最新推荐文章于 2024-09-16 13:21:55 发布

乔吟皎Gilbert

最新推荐文章于 2024-09-16 13:21:55 发布

阅读量264

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00938/article/details/141741492

版权

Chrome 扩展开发入门教程

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

1. 项目的目录结构及介绍

my-extension/
├── src/
│   ├── background/
│   ├── content/
│   ├── popup/
│   └── options/
├── manifest.ts
├── extension/
│   ├── assets/
│   └── ...
├── scripts/
│   └── ...
└── package.json

src/: 包含扩展的主要脚本和前端部分。
- background/: 后台脚本。
- content/: 内容脚本。
- popup/: 弹出窗口的页面和脚本。
- options/: 选项页面。
manifest.ts: 扩展的清单文件。
extension/: 扩展的根目录，包含资源文件等。
scripts/: 开发辅助脚本。
package.json: 项目的依赖和脚本配置。

2. 项目的启动文件介绍

src/background/index.ts: 后台脚本的主入口文件。
src/popup/index.ts: 弹出窗口的主入口文件。
src/options/index.ts: 选项页面的主入口文件。

这些文件是扩展的主要逻辑入口，负责初始化和处理扩展的主要功能。

3. 项目的配置文件介绍

manifest.ts: 扩展的清单文件，定义了扩展的基本信息、权限、资源路径等。
package.json: 项目的依赖和脚本配置，包括开发和构建命令。

{
  "name": "my-extension",
  "version": "1.0.0",
  "scripts": {
    "dev": "pnpm dev",
    "build": "pnpm build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

通过这些配置文件，可以管理扩展的依赖、开发和构建流程。

以上是基于 xiaoluoboding/chrome-ext-starter 项目的目录结构、启动文件和配置文件的介绍。希望这篇教程能帮助你快速上手 Chrome 扩展开发。

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