# f2e-crx-creator

**Repository Path**: f2e-server/f2e-crx-creator

## Basic Information

- **Project Name**: f2e-crx-creator
- **Description**: 创建chrome扩展开发工具，提供一些常用工具，开发环境tsx编译、热更新等功能
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2022-10-08
- **Last Updated**: 2025-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Chrome-extension, crx, React

## README

# f2e-crx-creator
创建chrome扩展开发工具，提供一些常用工具，开发环境tsx编译、热更新等功能

## 快速开始
- 下载当前项目
- `npm install` & `npm run dev`
- 开启chrome扩展的开发者模式，将 构建结果目录 `./dist` 加载为解压缩的扩展 (Edge 为例:)
    ![引导图](./readme_resources/load_extension.png)
-  完成预览
    ![预览图](./readme_resources/preview_extension.png)

## 项目结构说明
```
.
├── README.md
├── assets      资源类文件目录，对应编译后的同名目录
│   ├── base.less   编译后作为页面的基础css                               
│   ├── html        页面所在目录
│   │   ├── main.html
│   │   └── popup.html
│   └── icons
├── config      配置相关、编译构建、插件开发
│   ├── builder.js      核心编译代码
│   ├── inject.js       esbuild 的注入代码，每个模块加载开始，都会执行一次
│   ├── manifest.js     manifest.json 的源码文件，为了支持typescript
│   └── plugins         编译过程用到的插件
│       └── namespacePluginForPostcss.js
├── dist        构建结果目录
├── package-lock.json
├── package.json
├── src         源码目录
│   ├── apis        进行请求发送配置和类型定义
│   │   └── index.ts
│   ├── scope       #约束# __SCOPE__总目录，下级目录为各个环境独立代码
│   │   ├── background
│   │   │   └── index.ts
│   │   ├── content
│   │   │   ├── components      组件目录
│   │   │   │   └── ShowInfo.tsx
│   │   │   ├── content.less    支持css_modules 引入
│   │   │   ├── index.tsx       入口文件
│   │   │   └── store.ts        数据驱动中心
│   │   ├── main
│   │   │   ├── components
│   │   │   │   ├── Welcome.less
│   │   │   │   └── Welcome.tsx
│   │   │   └── index.tsx
│   │   └── popup
│   │       ├── components
│   │       │   ├── Popup.less
│   │       │   └── Popup.tsx
│   │       ├── index.tsx
│   │       └── store.ts
│   ├── typings.d.ts        全局类型定义
│   └── util
│       ├── Fetch.ts        请求收发工具
│       ├── chrome.ts       #约束# chrome原生方法仅在此处使用，其他地方api都需要封装
│       ├── common.ts       全局公用的的功能代码片段
│       ├── inits.ts        按照功能分块的各个环境公用(或关联)前置代码片段（包括初始化事件绑定等）
│       └── message.ts      scope之间的消息通信工具
└── tsconfig.json
```


## 主要功能与实现
### `__SCOPE__` 定义
明确代码所处环境有利于逻辑梳理
```ts
/** 运行环境 */
declare enum RunScope {
    Background = 'background',
    /** 嵌入式所有页面的环境 */
    Content = 'content',
    /** 插件应用页面 */
    Main = 'main',
    Popup = 'popup',
}
```

### 全局CSS选择器前缀
将项目名[(manifest.name)](./config/manifest.js#L8) 作为前缀className， 添加到 [assets/base.less](./assets/base.less) 所有选择器上, 功能实现 [config/plugins/namespacePluginForPostcss.js](./config/plugins/namespacePluginForPostcss.js) 和 [config/builder.js](./config/builder.js#L25)

### CSS Modules
通过 [esbuild-plugin-postcss](https://www.npmjs.com/package/esbuild-plugin-postcss) 配置实现 [.esbuildrc.js](./.esbuildrc.js#L24)

### 热更新
所有页面`(popup, content, main)` 均支持热更新， 服务端实现 [config/builder.js](./config/builder.js), 客户端实现 [src/util/common.ts](./src/util/common.ts#L24)

### 统一的Fetch (content可跨域)
content环境的Fetch是通过转发请求到 background 处理后监听返回信息实现的对接 [src/util/Fetch.ts](./src/util/Fetch.ts#L55)

### ...