Webextkits Docs

Appearance

开始使用 ​

搭建你的第一个 webextkets 项目 ​

开发环境要求

  • Node.js version 18 or 更高.
  • 一个同时支持 typescript 和 prettier 的编辑器
  • pnpm version 8.0 以上
sh
$ pnpm create webextkits@latest
$ pnpm create webextkits@latest

NOTE

webextets 搭建的是一个 ESM-only 的项目，如果你要从其他项目迁移过来，请不要使用 require() 进行模块引用，并且保证你项目的 package.json 中包含 "type": "module" 这个配置。

然后按照提示操作即可！

你只需要回答一个问题：

text
? Project name: 输入项目名称（使用英文）
? Project name: 输入项目名称（使用英文）

注意事项

输入的项目名称不要包含特殊字符，最好只由 英文单词 + 数字 + - 组成

文件结构说明 ​

text
 ┣ 📂public             # 资源文件夹，执行打包后将把下面的所有文件放到 dist/ 下面
 ┃ ┗ 📂assets
 ┃ ┃ ┗ 📜logo.png       # 扩展 logo 文件，使用你自己的图标替换它
 ┣ 📂scripts            # 存放一些常用的构建脚本
 ┣ 📂src
 ┃ ┣ 📂schema           # storage 中的 schema 描述文件夹
 ┃ ┣ 📂scopes
 ┃ ┃ ┣ 📂background     # background 的逻辑放这里
 ┃ ┃ ┣ 📂content        # contentScript 的逻辑放这里
 ┃ ┃ ┣ 📂injects        # injectScript 的逻辑放这里
 ┃ ┃ ┃ ┣ 📂index            # 对应 index.entry 的模块文件
 ┃ ┃ ┃ ┣ 📜externals.ts     # injectScript 所有的 externals 定义
 ┃ ┃ ┃ ┗ 📜index.entry.tsx  # injectScript 入口文件
 ┃ ┃ ┣ 📂options        # options 页面的逻辑放这里
 ┃ ┃ ┗ 📂popup          # popup 页面的逻辑放这里
 ┃ ┣ 📂transformers     # 该文件下面的所有 .js, .ts 文件都经过 unbuild(一个 npm 包) 编译后放到 dist/transformers 文件夹中
 ┃ ┣ 📜const.ts         # 常量文件，⚠️该文件会被 vite.config.ts 引用，因此需要保证它是一个纯 ts 文件（不包含其他文件引用）
 ┃ ┣ 📜global.d.ts      # 用于定义 window 对象或者其他全局变量的 type 类型描述文件
 ┃ ┣ 📜manifest.ts      # manifest.json 定义文件
 ┃ ┗ 📜messageType.ts   # 事件定义文件
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜README.md
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┗ 📜vite.config.ts
 ┣ 📂public             # 资源文件夹，执行打包后将把下面的所有文件放到 dist/ 下面
 ┃ ┗ 📂assets
 ┃ ┃ ┗ 📜logo.png       # 扩展 logo 文件，使用你自己的图标替换它
 ┣ 📂scripts            # 存放一些常用的构建脚本
 ┣ 📂src
 ┃ ┣ 📂schema           # storage 中的 schema 描述文件夹
 ┃ ┣ 📂scopes
 ┃ ┃ ┣ 📂background     # background 的逻辑放这里
 ┃ ┃ ┣ 📂content        # contentScript 的逻辑放这里
 ┃ ┃ ┣ 📂injects        # injectScript 的逻辑放这里
 ┃ ┃ ┃ ┣ 📂index            # 对应 index.entry 的模块文件
 ┃ ┃ ┃ ┣ 📜externals.ts     # injectScript 所有的 externals 定义
 ┃ ┃ ┃ ┗ 📜index.entry.tsx  # injectScript 入口文件
 ┃ ┃ ┣ 📂options        # options 页面的逻辑放这里
 ┃ ┃ ┗ 📂popup          # popup 页面的逻辑放这里
 ┃ ┣ 📂transformers     # 该文件下面的所有 .js, .ts 文件都经过 unbuild(一个 npm 包) 编译后放到 dist/transformers 文件夹中
 ┃ ┣ 📜const.ts         # 常量文件，⚠️该文件会被 vite.config.ts 引用，因此需要保证它是一个纯 ts 文件（不包含其他文件引用）
 ┃ ┣ 📜global.d.ts      # 用于定义 window 对象或者其他全局变量的 type 类型描述文件
 ┃ ┣ 📜manifest.ts      # manifest.json 定义文件
 ┃ ┗ 📜messageType.ts   # 事件定义文件
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜README.md
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┗ 📜vite.config.ts

vite.config.ts 文件 ​

在根目录下下面的 vite.config.ts 中你将会看到一个 ViteWebExtKits 插件的调用

typescript
import { defineConfig } from "vite";

export default defineConfig({
  //  ...
  plugins: [
    //    ...
    //    在这里你可以配置所有 webextkit 提供的 vite 插件
    ViteWebExtKits({
      extensionId: extId,
    }),
  ],
});
import { defineConfig } from "vite";

export default defineConfig({
  //  ...
  plugins: [
    //    ...
    //    在这里你可以配置所有 webextkit 提供的 vite 插件
    ViteWebExtKits({
      extensionId: extId,
    }),
  ],
});

启动和运行 ​

安装依赖

sh
$ pnpm install
$ pnpm install

运行

sh
$ pnpm run serve
$ pnpm run serve

加载扩展到浏览器中 ​

打开浏览器的管理页面，将 /dist 文件夹添加进去，此时会显示一个叫做 "扩展名称" 的扩展，

查看效果 ​

现在访问 github.com，此时你会在左上角看见一个 Modal 的按钮，点击它修改名称，它将会在 options 和 popup 中同步数据（需要刷新）

Powered by Vitepress