前端框架

预配置模块

WXT为最受欢迎的前端框架预装了模块：

• @wxt-dev/module-react
• @wxt-dev/module-vue
• @wxt-dev/module-svelte
• @wxt-dev/module-solid

安装适合你框架的模块，然后将其添加到配置中：

React

import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-react'],
});

Vue

import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-vue'],
});

Svelte

import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-svelte'],
});

Solid

import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-solid'],
});

添加Vite插件

如果你的框架没有官方WXT模块，不用担心！WXT支持任何带有Vite插件的框架。

只需在配置中添加Vite插件即可！可以在HTML页面或内容脚本中使用该框架，它将正常工作 👍

import { defineConfig } from 'wxt';
import react from '@vitejs/plugin-react';

export default defineConfig({
  vite: () => ({
    plugins: [react()],
  }),
});

WXT模块只是简化了配置并添加了自动导入。它们与上面的代码没有本质区别。

多个应用

由于通常情况下，网页扩展包含多个用户界面（如弹窗、选项、更详细说明、边栏、内容脚本等）分布在多个入口点（端口、选项、更详细说明、边栏、内容脚本等），因此你需要为每个入口点创建一个单独的应用实例。

通常这意味着每个入口点应位于一个目录中，其中包含该目录内的文件。以下是推荐的文件夹结构：

📁 {srcDir}/
   📂 assets/          <---------- 放共享资产的地方
      📄 tailwind.css
   📂 components/
      📄 Button.tsx
   📂 entrypoints/
      📂 options/       <--------- 使用一个包含 index.html 文件的文件夹作为入口点
         📁 pages/      <--------- 好的地方来放你的路由页面，如果你有它们的话
         📄 index.html
         📄 App.tsx
         📄 main.tsx    <--------- 在这里创建并挂载你的应用
         📄 style.css   <--------- 入口点特定的样式
         📄 router.ts

配置路由

所有框架都自带路由，用于使用 URL 的路径构建一个多页面应用。然而网页扩展并不工作这种方式。由于 HTML 文件是静态的，chrome-extension://{id}/popup.html 没有办法更改整个路由。

相反，你需要将路由配置为在“哈希”模式下运行，其中路由信息作为 URL 标识符的一部分（而非路径）（例如：popup.html#/ 和 popup.html#/account/settings）。

参考你的路由文档以获取关于哈希模式以及如何启用它的信息。以下是几种流行的路由：

• react-router
• vue-router
• svelte-spa-router
• solid-router