WXT选项页开发：创建options页面、open_in_tab与设置持久化

Options：扩展的设置页

本教程共 45 篇 · 第 9 篇 · 更新于 2026-08-13 · 约 3 分钟阅读

WXToptions选项页设置页浏览器扩展storage

本节目标：认识选项页入口，学会创建 options 页面、用 open_in_tab 控制打开方式，理解它与弹窗的分工和设置持久化思路。

选项页是什么

options 是扩展的「设置中心」。用户右键工具栏图标选「选项」，或者在扩展管理页（chrome://extensions）点「扩展程序选项」，就能打开它。对应 manifest 里的 options_ui / options_page 字段，WXT 自动生成。

创建选项页

和弹窗一样的套路：

📂 entrypoints/
   📄 options.html          # 写法一

📂 entrypoints/
   📂 options/
      📄 index.html         # 写法二
      📄 main.tsx

控制打开方式：open_in_tab

选项页有两种打开方式：嵌入式小窗（默认）或独立标签页，用 open_in_tab 控制：

<!-- entrypoints/options/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="manifest.open_in_tab" content="true" />
    <title>设置</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

内容多、需要大空间时用独立标签页。mkext 的设置页就是如此：完整页面布局，登录后还会以标签页形式跳转过去。HTML 里还可以配 manifest.chrome_style / manifest.browser_style 控制浏览器原生风格。

Note

在 Chrome、Firefox 里都写入 options_ui.open_in_tab 字段；chrome_style / browser_style 是另一组独立的原生风格选项。WXT 构建时会按目标浏览器写入正确位置，你只需要写 meta 标签。

与弹窗的分工

弹窗和选项页容易混淆，记住一句话：弹窗给频繁、快速的操作，选项页给低频、复杂的设置。

弹窗：即用即走，每次打开重新加载，适合快捷开关（§08）；
选项页：空间大、可长驻，适合表单、列表、多分区设置。

用户怎么找到选项页

选项页有两条公开入口：右键工具栏图标，菜单里选「选项」；或者打开扩展管理页，在扩展详情里点「扩展程序选项」。用户打开的是同一个 options.html，不用你做任何额外工作。

设置持久化：选项页不背数据

新手最容易踩的坑：选项页里改了配置，关掉再打开，值没了。原因和弹窗一样——页面每次打开都是全新加载。选项页本身只是「界面」，数据要写进扩展存储。

思路是先声明一个存储项，再在选项页里读写：

// 存储项定义（wxt/storage 的封装，如 §18 所述）
export const settings = defineItem('local:settings', {
  defaultValue: { theme: 'auto' },
});

选项页里读取和保存：

const value = await settings.getValue();
await settings.setValue({ ...value, theme: 'dark' });

选项页、弹窗、后台读的是同一份存储。改设置 → 写存储 → 其他环境监听变化自动更新，这是扩展设置的标准姿势。存储的完整模型、默认值与订阅机制见第 18 章。

用户不一定从右键菜单进来。扩展管理页、直接访问

都会打开同一个选项页，所以页面要能独立工作、优雅处理未初始化的状态，不要假设「总是从工具栏进入」。

真实示例

mkext 的选项页复用主界面组件，与弹窗共享布局，只是不设紧凑宽度：

// entrypoints/options/main.tsx
const Options = () => (
  <Layout>
    <Main />
  </Layout>
);

mount(<Options />);

弹窗与选项页功能重叠时，抽公共组件、两个入口各自组装，是常见的工程做法。

Note

/ browser_style 让页面套用浏览器原生控件风格，适合想「融入浏览器」的简单设置页；自定义品牌界面则保持默认样式即可。

小结

选项页是扩展的「设置中心」：低频、复杂的设置放这里，高频操作留给弹窗。
open_in_tab 控制嵌入式小窗还是独立标签页，Chrome、Firefox 都写入 options_ui.open_in_tab。
选项页不背数据：设置要持久化就写存储（§18），弹窗与选项页可共享组件。