WXT 指南

WXT 是 Chrome Web Extensions Toolkit（扩展工具包）的一个实现，用于处理和 bundling 你的扩展文件。它通过将扩展文件放置在 entrypoints/ 目录中来打包你的扩展。这些文件可以是 HTML、JS、CSS 或者 Vite 支持的类型（Pug、TS、JSX、SCSS、SASS、LESS 等）。

以下是 WXT 的基本使用指南：

入口点

WXT 会将 entrypoints/ 目录中的文件作为输入进行打包。它们可以是单个文件或目录，其中包含一个 index.html 文件或其他类型的入口点文件。

列表 vs 非列表入口点

在 Web 扩展中，有两种类型的入口点：

• 列表入口点：被定义为列表项的入口点。
• 非列表入口点：不被定义为列表项的入口点。

以下是两种入口点类型的示例设置：

列表入口点

<!-- 带有列表的入口点 -->
<menu:items>
  <menu:app>
    <!-- 入口点内容 -->
  </menu:app>
</menu:items>

非列表入口点

<!-- 不带列表的入口点 -->
<main:app>
  <!-- 入口点内容 -->
</main:app>

添加入口点

WXT 提供了定义入口点的方法。你可以通过以下方式定义入口点：

• 单文件入口点：直接指定文件路径。
• 目录入口点：指定包含多个文件的目录路径。

单文件入口点

// entrypoints/content.ts
export default defineContentScript({
  // 入口点配置选项
})

目录入口点

// entrypoints/popups/
// 包含多个入口点文件

定义 manifest 选项

大多数列表入口点都有选项可以配置。你可以通过以下方式定义这些选项：

// entrypoints/content.ts
export default defineContentScript({
  // 入口点的配置选项
})

入口点类型

以下是几种常见的入口点类型及其示例：

背景

背景入口点用于在 Chrome 和 Firefox 中显示扩展内容。Chrome 支持 MV2，Firefox 支持 MV3。

背景入口点示例

<!-- 在 Chrome 中 -->
<background.html>
  <script defer src="content-scripts/content.js"></script>
</background.html>

<!-- 在 Firefox 中 -->
<background/index.html>
  <script defer src="content-scripts/content.js"></script>
</background/index.html>

Bookmarks

书签入口点用于在扩展中显示书签页面。

书签入口点示例

<!-- 在 Chrome 中 -->
<bookmarks.html>
  <!-- 入口点内容 -->
</bookmarks.html>

<!-- 在 Firefox 中 -->
<bookmarks/index.html>
  <!-- 入口点内容 -->
</bookmarks/index.html>

Content Scripts

内容脚本入口点用于在扩展中显示内容脚本。

内容脚本入口点示例

<!-- 在 Chrome 中 -->
/content.html>
  <script defer src="content-scripts/content.js"></script>
</content.html>

<!-- 在 Firefox 中 -->
/content/index.html>
  <script defer src="content-scripts/content.js"></script>
</content/index.html>

Devtools

开发工具入口点用于在扩展中显示开发者界面。

开发工具入口点示例

<!-- 在 Chrome 中 -->
<devtools.html>
  <!-- 入口点内容 -->
</devtools.html>

<!-- 在 Firefox 中 -->
<devtools/index.html>
  <!-- 入口点内容 -->
</devtools/index.html>

History

历史入口点用于在扩展中显示历史记录。

历史入口点示例

<!-- 在 Chrome 中 -->
<history.html>
  <!-- 入口点内容 -->
</history.html>

<!-- 在 Firefox 中 -->
<history/index.html>
  <!-- 入口点内容 -->
</history/index.html>

Newtab

新标签页入口点用于在扩展中显示新标签页。

新标签页入口点示例

<!-- 在 Chrome 中 -->
<newtab.html>
  <!-- 入口点内容 -->
</newtab.html>

<!-- 在 Firefox 中 -->
<newtab/index.html>
  <!-- 入口点内容 -->
</newtab/index.html>

Options

选项入口点用于在扩展中显示配置选项。

选项入口点示例

<!-- 在 Chrome 中 -->
<options.html>
  <!-- 入口点内容 -->
</options.html>

<!-- 在 Firefox 中 -->
<options/index.html>
  <!-- 入口点内容 -->
</options/index.html>

Popup

弹出窗口入口点用于在扩展中显示弹出窗口。

弹出窗口入口点示例

<!-- 在 Chrome 中 -->
<popup.html>
  <!-- 入口点内容 -->
</popup.html>

<!-- 在 Firefox 中 -->
<popup/index.html>
  <!-- 入口点内容 -->
</popup/index.html>

Sandbox

沙盒入口点用于在扩展中显示沙盒页面。

沙盒入口点示例

<!-- 在 Chrome 中 -->
<sandbox.html>
  <!-- 入口点内容 -->
</sandbox.html>

<!-- 在 Firefox 中 -->
<sandbox/index.html>
  <!-- 入口点内容 -->
</sand box/index.html>

Side Panel

侧边栏入口点用于在扩展中显示侧边栏。

侧边栏入口点示例

<!-- 在 Chrome 中 -->
<sidepanel.html>
  <!-- 入口点内容 -->
</sidepanel.html>

<!-- 在 Firefox 中 -->
<sidepanel/index.html>
  <!-- 入口点内容 -->
</sidepanel/index.html>

Unlisted CSS

未列出的 CSS 入口点用于在扩展中显示未列出的 CSS。

未列出的 CSS 入口点示例

<!-- 在 Chrome 中 -->
<unlisted.css>
  <!-- 入口点内容 -->
</unlisted.css>

<!-- 在 Firefox 中 -->
<unlisted/index.html>
  <!-- 入口点内容 -->
</unlisted/index.html>

Unlisted Pages

未列出的页面入口点用于在扩展中显示未列出的页面。

未列出的页面入口点示例

<!-- 在 Chrome 中 -->
<unlisted.html>
  <!-- 入口点内容 -->
</unlisted.html>

<!-- 在 Firefox 中 -->
<unlisted/index.html>
  <!-- 入口点内容 -->
</unlisted/index.html>

Unlisted Scripts

未列出的脚本入口点用于在扩展中显示未列出的脚本。

未列出的脚本入口点示例

<!-- 在 Chrome 中 -->
<unlisted.js>
  <!-- 入口点内容 -->
</unlisted.js>

<!-- 在 Firefox 中 -->
<unlisted/index.html>
  <!-- 入口点内容 -->
</unlisted/index.html>

结论

通过以上指南，你可以轻松配置你的 Chrome Web 扩展，并确保其在不同场景下正确运行。如果你有任何问题或需要进一步的帮助，请随时联系我们！