CSS 模块

CSS 模块是纯样式覆盖 —— 为某个站点做主题化、重设样式或夜间模式。它使用与 JS 模块相同的 module.json 清单,但实质是样式表。

文件布局

my-theme/
├── module.json    # 必需
├── main.js        # 必需 —— 可以是近乎为空的桩
├── style.css      # 实际样式
└── icon.png       # 可选

仍需 main.js

即便是纯 CSS 模块也需要一个 main.js(可以是最小的桩)。把 runAt 设为 DOCUMENT_START,使你的样式尽早生效,避免未设样式内容的闪现。

module.json

{
  "id": "dark-reader-lite",
  "name": "Dark Reader Lite",
  "description": "一个简单的夜间主题",
  "category": "THEME",
  "runAt": "DOCUMENT_START",
  "urlMatches": [
    { "pattern": "*://news.ycombinator.com/*" }
  ],
  "permissions": ["CSS_INJECT"]
}

使用 category: "STYLE_MODIFIER" 或 "THEME"。市场的 hasCss 标志必须为 true 且必须存在 style.css —— 校验器会检查两者一致。

CSS 如何注入

当模块有 CSS(cssCode / style.css)时,它会在 JS 运行之前作为 <style id="ext-module-<id>"> 元素注入。你的 main.js 仍可在需要时操作 DOM。

style.css 示例

:root {
  color-scheme: dark;
}
body {
  background: #111 !important;
  color: #ddd !important;
}
a {
  color: #60a5fa !important;
}

可工作的 DOCUMENT_START 样式模块示例见 modules/ 下内置的 web-tint 模块。