html怎么创建设置选项页面_html Chrome extension options设置页【避坑】-html教程-PHP中文网

根本原因是 manifest.json 未声明 options_page 字段或路径错误：chrome 98+ 已弃用 options_ui，仅认 options_page；路径须为根目录下大小写敏感的相对路径（如 "options.html"），且所有 chrome. api 调用必须在 domcontentloaded 后异步执行。

html怎么创建设置选项页面_html chrome extension options设置页【避坑】

chrome.runtime.openOptionsPage() 调用失败、选项页空白、本地 options.html 打开报错——根本原因不是 JS 写错了，而是 manifest.json 里没声明 options_page 或路径不匹配，且 Chrome 98+ 已弃用旧字段名。

manifest.json 必须用 `options_page`（不是 `options_ui`）

Chrome 98 起彻底移除 options_ui，只认 options_page 字段。写错或漏掉，chrome.runtime.openOptionsPage() 会静默失败，DevTools 里也看不到明显报错。

options_page 值必须是根目录下的相对路径，比如 "options.html"，不能带 ./ 或 /options.html
路径区分大小写，Options.html 和 options.html 在 macOS/Linux 上就是两个文件
如果用了 options_ui，Chrome 会直接忽略，不会 fallback，也不会警告

`options.html` 里不能依赖 `chrome.` API 同步调用

选项页加载时，扩展上下文尚未完全就绪，chrome.storage.sync.get() 等同步读取可能返回空对象或抛出 undefined 错误，尤其在首次安装后第一次打开时。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

所有 chrome. 调用必须包裹在 document.addEventListener('DOMContentLoaded', ...) 内
读取配置建议用 await chrome.storage.sync.get(['key1', 'key2'])，避免回调嵌套
不要在 <script></script> 标签里直接写 chrome.storage...，没等 DOM 就执行，容易报 Cannot access contents of the page

选项页样式被 Chrome 默认 CSS 覆盖

Chrome 会为 options.html 注入自己的基础样式（比如重置 body margin、font-family），导致你写的 CSS 不生效或布局错乱。

显式重置关键样式：body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
避免用 input[type="checkbox"] 默认样式，加 appearance: none 并手动画勾选状态
不要依赖 :focus-visible，Chrome 选项页环境对伪类支持不稳定，优先用 :focus

保存设置后页面不刷新，用户感知不到已生效

点击“保存”后没反馈，用户可能重复点击或误以为失败。这不是 UX 细节问题，而是实际功能缺失：没有监听保存结果，也没更新 UI 状态。

保存成功后，显式修改按钮文字为 “已保存”，并加 disabled 防连点
用 chrome.storage.onChanged 监听其他地方（如 popup）改配置，实时同步 UI
别只靠 chrome.storage.sync.set() 的 callback 判定成功——它只表示写入队列，不保证落盘；加一层 get() 回读验证更稳妥

最常被忽略的是 options_page 字段的大小写和路径斜杠——看着一样，少一个点或换大小写，整个选项页就进不去。调试时先检查 manifest 是否通过 chrome://extensions 的「错误」面板报错，比查 JS 更快定位根源。