在瀏覽器擴充功能中使用 CSS modules

對於採用 module 風格命名的檔案（例如 styles.module.css），Extension.js 提供零設定的 CSS modules 支援。它會將這些檔案走 Rspack 的 CSS pipeline，使 class 名稱只在匯入它的元件內部生效。

什麼情況下適合使用 CSS modules

你需要區域 class 作用域，又不想引入完整的 CSS-in-JS。
你會在 popup、options、new-tab 介面之間共用元件。
你希望在較大的擴充功能程式碼庫中，樣式的歸屬可預期。

範本範例

`content-css-modules`

以最少設定為 content script UI 加上具區域作用域的樣式。

npx extension@latest create my-extension --template=content-css-modules

pnpx extension@latest create my-extension --template=content-css-modules

yarn dlx extension@latest create my-extension --template=content-css-modules

bunx extension@latest create my-extension --template=content-css-modules

deno run -A npm:extension@latest create my-extension --template=content-css-modules

Repository: extension-js/examples/content-css-modules

在既有擴充功能中使用

若要使用 CSS modules，請以 module 後綴命名檔案：

*.module.css
*.module.scss
*.module.sass
*.module.less

Sass 與 Less 的設定請參考對應語言的頁面。

- myComponentCss.css
+ myComponentCss.module.css

使用範例

把樣式表改名後，在你的元件中匯入並使用：

import styles from "./styles/myComponent.module.css";

const button = document.createElement("button");
button.className = styles.primary;
button.innerText = "Click here";
document.body.appendChild(button);

運作方式

Extension.js 會啟用 Rspack 的 CSS 支援，並透過 CSS module pipeline 處理 module 匯入：

預設的 import 風格會對應到樣式表（import styles from "./x.module.css"）。
Rspack 透過 CSS module pipeline 產生具區域作用域的 class 名稱。
Module class 的匯出可以直接在 JS/TS/TSX 檔案中使用。

在擴充功能頁面情境下（例如 popup、options、new tab），module 匯入會如預期產生獨一無二且具區域作用域的 class 名稱。

Content script 注意事項

Content script 與擴充功能頁面的處理方式相同。Rspack 會產生具區域作用域的 class 名稱，將它們匯出到你的 JavaScript，Extension.js 則把產生的樣式表註冊到 manifest 的 content_scripts[].css 項目，並一併註冊到 web_accessible_resources，讓它也可以被注入到 shadow root 中。匯入你需要的 class 名稱並直接套用：

import {primary} from "./styles/myComponent.module.css";

const button = document.createElement("button");
button.className = primary;

可參考上方 content-css-modules 範本中的可執行範例。

React／Preact 使用範例

在 React 或 Preact 中，可以這樣匯入並使用 CSS module：

import styles from "./styles/myComponent.module.css";

export default function NewTabPage() {
  return <button className={styles.primary}>Click here</button>;
}

Vue 使用範例

在 Vue 中，你可以在單一檔案元件（SFC）的樣式中使用 module class：

<template>
  <button :class="$style.primary">Click here</button>
</template>

<style module>
@import "./styles/myComponent.module.css";
</style>

Svelte 使用範例

在 Svelte 中，匯入 module 對應後套用 class 名稱：

<script>
  import styles from "./styles/myComponent.module.css";
</script>

<button class={styles.primary}>Click here</button>

最佳實務

將 module 樣式放在元件附近（Component.module.css），方便釐清歸屬。
盡量少用 :global(...)，僅在有意覆寫全域時才使用。
在擴充功能頁面與 class 對應較明確的框架元件中，優先採用 module 樣式。

下一步

進一步了解 Sass 與 Sass modules。
進一步了解 Less 與 Less modules。

Introduction

Browser extension fundamentals

Getting started

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

在瀏覽器擴充功能中使用 CSS modules

什麼情況下適合使用 CSS modules

範本範例

`content-css-modules`

在既有擴充功能中使用

使用範例

運作方式

Content script 注意事項

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

最佳實務

下一步

影片導覽

​什麼情況下適合使用 CSS modules

​範本範例

​content-css-modules

​在既有擴充功能中使用

​使用範例

​運作方式

​Content script 注意事項

​React／Preact 使用範例

​Vue 使用範例

​Svelte 使用範例

​最佳實務

​下一步

​影片導覽

什麼情況下適合使用 CSS modules

範本範例

`content-css-modules`

在既有擴充功能中使用

使用範例

運作方式

Content script 注意事項

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

最佳實務

下一步

影片導覽