第八部分 — UI 表面 options 页面模式

JamesYoung79712026-03-17 19:02

18.1 目的

选项是您持久化设置的用户界面。与弹出窗口不同，它们可以是一个真正的页面，具有导航和帮助文本。

18.2 使用场景 / 避免使用场景

使用场景：当你需要让用户能够编辑和再次访问的设置时，或者需要一个帮助文本/隐私说明的地方。

避免使用场景： UI 真正微小且短暂（弹出窗口可能就足够了），或你需要一个持久化的工具界面（考虑使用侧边栏）。

18.3 options_page vs options_ui (快速映射)

options_page: 以普通标签页/页面的形式打开。
options_ui: 可嵌入到 chrome://extensions 中（如果 open_in_tab: false）。

如果你不确定：使用 options_page（更简单的心理模型）。

18.4 最小化模式：加载默认设置 + 保存

options.js: CODE_BLOCK_71

18.5 检查列表

始终使用默认值加载
优先使用 sync 加载用户设置（如果在配额范围内）
显示清晰的"已保存"状态

最小示例

一个最小化的 MV3 安全异步消息处理器（适合作为模板）：

javascript 复制代码

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  (async () => {
    if (msg?.type !== "PING") return;
    sendResponse({ ok: true });
  })().catch((err) => sendResponse({ ok: false, error: String(err) }));
  return true; // keep channel open for async
});

18.6 常见问题

频繁向 sync 写入（配额限制）
存储密钥（不要）

18.7 参考资料

UI选项： Options