Plasmo 浏览器扩展框架使用教程

Plasmo 浏览器扩展框架使用教程

plasmo 🧩 The Browser Extension Framework 项目地址: https://gitcode.com/gh_mirrors/pl/plasmo

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

Plasmo 项目的目录结构如下：

plasmo/
├── api/
├── cli/
├── core/
├── examples/
├── packages/
├── scripts/
├── .gitignore
├── .gitmodules
├── .npmrc
├── .prettierrc.mjs
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── turbo.json
└── README.md

目录结构介绍

• api/: 包含与 API 相关的文件和代码。
• cli/: 包含命令行工具的代码。
• core/: 包含项目核心功能的代码。
• examples/: 包含各种示例代码，展示了如何使用 Plasmo 框架。
• packages/: 包含项目的各个包和模块。
• scripts/: 包含项目的脚本文件。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .gitmodules: 指定 Git 子模块的配置。
• .npmrc: 指定 npm 配置文件。
• .prettierrc.mjs: 指定 Prettier 代码格式化工具的配置。
• LICENSE: 项目的开源许可证文件。
• package.json: 项目的 npm 配置文件，包含项目的依赖和脚本。
• pnpm-lock.yaml: 锁定 pnpm 包管理器的依赖版本。
• pnpm-workspace.yaml: 指定 pnpm 工作空间的配置。
• turbo.json: 指定 Turborepo 的配置文件。
• README.md: 项目的介绍和使用说明。

2. 项目的启动文件介绍

Plasmo 项目的启动文件主要包括 package.json 中的脚本命令。以下是一些常用的启动命令：

• pnpm dev: 启动开发服务器，支持实时重载和 React HMR（热模块替换）。
• pnpm build: 构建项目，生成生产环境的代码。
• pnpm start: 启动生产环境的应用程序。

示例

pnpm dev

该命令会启动开发服务器，监听文件变化并自动重新加载页面。

3. 项目的配置文件介绍

Plasmo 项目的配置文件主要包括以下几个：

3.1 package.json

package.json 文件包含了项目的元数据和依赖信息。以下是一些关键字段：

{
  "name": "plasmo",
  "version": "0.1.0",
  "scripts": {
    "dev": "plasmo dev",
    "build": "plasmo build",
    "start": "plasmo start"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "typescript": "^4.5.2"
  }
}

3.2 pnpm-workspace.yaml

pnpm-workspace.yaml 文件用于配置 pnpm 工作空间，管理多个包的依赖关系。

packages:
  - 'packages/*'
  - 'examples/*'

3.3 turbo.json

turbo.json 文件用于配置 Turborepo，管理项目的构建和任务执行。

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

3.4 .prettierrc.mjs

.prettierrc.mjs 文件用于配置 Prettier 代码格式化工具。

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
};

通过以上配置文件，可以灵活地管理和配置 Plasmo 项目，确保项目的开发和构建流程顺利进行。

plasmo 🧩 The Browser Extension Framework 项目地址: https://gitcode.com/gh_mirrors/pl/plasmo