瀏覽器樣式

您的擴充套件程式可以包含使用者介面元素——瀏覽器和頁面操作彈出視窗、側邊欄和選項頁——這些元素透過以下方式定義：

建立一個 HTML 檔案來定義 UI 元素的結構。
新增一個 manifest.json 鍵（action、browser_action、page_action、sidebar_action 或 options_ui）指向該 HTML 檔案。

您可以為這些元素設定樣式，使其與瀏覽器的樣式相匹配。manifest.json 鍵包含一個可選屬性來幫助實現這一點：browser_style。如果包含此屬性並將其設定為 true，您的文件將獲得一個或多個額外的樣式表，這些樣式表有助於使其外觀與瀏覽器 UI 和使用 browser_style 屬性的其他擴充套件程式保持一致。

注意： Manifest V3 中對 browser_style 的支援已棄用。從 Firefox 115 開始，options_ui.browser_style 和 sidebar_action.browser_style 的預設值從 true 更改為 false。在 Firefox 118 中，Manifest V3 擴充套件程式將不再支援 "browser_style": true。如果您的 Manifest V3 擴充套件程式依賴於 "browser_style": true 樣式，請遵循 browser_style 的 Manifest V3 遷移指南。有關更多資訊，請參閱（Firefox bug 1827910）。如果您想將 Firefox 樣式應用於您的擴充套件程式，請參閱 Firefox 樣式指南。

在考慮是否使用 browser_style: true 時，請測試您的擴充套件程式在各種主題（內建或來自 AMO）下的表現，以確保擴充套件程式的 UI 行為符合您的預期。

警告： 當您的 Web 擴充套件程式的 manifest 中包含 browser_style: true 時，除輸入控制元件外，您的擴充套件程式 UI 中的文字選擇將被停用。如果這引起了問題，請改用 browser_style:false。

注意： 在 Manifest V2 中，Google Chrome 和 Opera 使用 chrome_style 而不是 browser_style。因此，對於跨瀏覽器擴充套件，您需要同時新增這兩個鍵。chrome_style 在 Manifest V3 中不可用。

在 Firefox 中，樣式表可以在 chrome://browser/content/extension.css 中找到。macOS 上的額外樣式表 chrome://browser/content/extension-mac.css 也被包含在內。

大多數樣式會自動應用，但有些元素需要您新增非標準的 browser-style 類才能獲得其樣式，如下表所示。

Element	示例
`<button>`	html `<button class="browser-style">Click me</button>`
`<select>`	html `<select class="browser-style" name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>`
`<textarea>`	html `<textarea class="browser-style">Write here</textarea>`
`<input>` 的父級	html `<div class="browser-style"> <input type="radio" id="op1" name="choices" value="op1"/> <label for="op1">Option 1</label>` `<input type="radio" id="op2" name="choices" value="op2"/> <label for="op2">Option 2</label> </div>`

Manifest V3 遷移

由於 browser_style 在 Manifest V3 中已棄用，您在遷移 Manifest V2 擴充套件程式時可能希望移除對它的支援。以 options_ui 為例，您可以按照以下步驟移除對 browser_style 的支援：

將 options_ui/browser_style 設定為 false。
您的擴充套件程式 UI 的外觀是否發生變化？
- 如果外觀沒有改變，則移除該鍵。
- 如果外觀發生變化，請嘗試確定存在哪些依賴關係，並在擴充套件程式的樣式表中新增相關的屬性。最有可能引起佈局更改的樣式是 box-sizing:、border-box 和 display: flex。如果您無法確定依賴關係，請在擴充套件程式中包含 extension.css 的內容，並刪除所有不相關的部分，通常是 body 和 body * 塊，因為大多數擴充套件程式不使用 browser-style 類。

Firefox 面板元件（舊版）

注意： 此功能是非標準的，並且僅在 Firefox 中有效。

chrome://browser/content/extension.css 樣式表也包含舊版 Firefox 面板元件（導航元件）的樣式。

《Firefox 舊版樣式指南》文件說明了正確用法。

Element	示例
頁首	html `<header class="panel-section panel-section-header"> <div class="icon-section-header"><img src="image.svg"/></div> <div class="text-section-header">Header</div> </header>`
頁尾	html `<footer class="panel-section panel-section-footer"> <button class="panel-section-footer-button">Cancel</button> <div class="panel-section-footer-separator"></div> <button class="panel-section-footer-button default">Confirm</button> </footer>`
標籤頁	html `<div class="panel-section panel-section-tabs"> <button class="panel-section-tabs-button selected">Tab</button> <div class="panel-section-tabs-separator"></div> <button class="panel-section-tabs-button">Tab</button> <div class="panel-section-tabs-separator"></div> <button class="panel-section-tabs-button">Tab</button> </div>`
表單	html <div class="panel-section panel-section-formElements"> <div class="panel-formElements-item"> <label for="name01">Label:</label> <input type="text" value="Name" id="name01" /> </div> <div class="panel-formElements-item"> <label for="picker01">Label:</label> <select id="picker01"> <option value="value1" selected="true">Dropdown</option> <option value="value2">List Item</option> <option value="value3">List Item</option> </select> </div> <div class="panel-formElements-item"> <label for="placeholder01">Label:</label> <input type="text" placeholder="Placeholder" id="placeholder01" /> <button name="expander" class="expander"></button> </div> </div>
Menu	html <div class="panel-section panel-section-list"> <div class="panel-list-item"> <div class="icon"></div> <div class="text">List Item</div> <div class="text-shortcut">Ctrl-L</div> </div> <div class="panel-list-item"> <div class="icon"></div> <div class="text">List Item</div> <div class="text-shortcut"></div> </div> <div class="panel-section-separator"></div> <div class="panel-list-item disabled"> <div class="icon"></div> <div class="text">Disabled List Item</div> <div class="text-shortcut"></div> </div> <div class="panel-section-separator"></div> <div class="panel-list-item"> <div class="icon"></div> <div class="text">List Item</div> <div class="text-shortcut"></div> </div> `<div class="panel-list-item"> <div class="icon"></div> <div class="text">List Item</div> <div class="text-shortcut"></div> </div> </div>`

示例

HTML

html

<header class="panel-section panel-section-header">
  <div class="icon-section-header"><!-- An image goes here. --></div>
  <div class="text-section-header">Header</div>
</header>

<div class="panel-section panel-section-list">
  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut">Ctrl-L</div>
  </div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-section-separator"></div>

  <div class="panel-list-item disabled">
    <div class="icon"></div>
    <div class="text">Disabled List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-section-separator"></div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>
</div>

<footer class="panel-section panel-section-footer">
  <button class="panel-section-footer-button">Cancel</button>
  <div class="panel-section-footer-separator"></div>
  <button class="panel-section-footer-button default">Confirm</button>
</footer>

/* Global */
html,
body {
  background: white;
  box-sizing: border-box;
  color: #222426;
  cursor: default;
  display: flex;
  flex-direction: column;
  font: caption;
  margin: 0;
  padding: 0;
  -moz-user-select: none;
}

body * {
  box-sizing: border-box;
  text-align: start;
}

button.panel-section-footer-button,
button.panel-section-tabs-button {
  color: inherit;
  background-color: unset;
  font: inherit;
  text-shadow: inherit;
  appearance: none;
  border: none;
}

/* Panel Section */
.panel-section {
  display: flex;
  flex-direction: row;
}

.panel-section-separator {
  background-color: rgb(0 0 0 / 0.15);
  min-height: 1px;
}

/* Panel Section - Header */
.panel-section-header {
  border-bottom: 1px solid rgb(0 0 0 / 0.15);
  padding: 16px;
}

.panel-section-header > .icon-section-header {
  background-position: center center;
  background-repeat: no-repeat;
  height: 32px;
  margin-right: 16px;
  position: relative;
  width: 32px;
}

.panel-section-header > .text-section-header {
  align-self: center;
  font-size: 1.385em;
  font-weight: lighter;
}

/* Panel Section - List */
.panel-section-list {
  flex-direction: column;
  padding: 4px 0;
}

.panel-list-item {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 24px;
  padding: 0 16px;
}

.panel-list-item:not(.disabled):hover {
  background-color: rgb(0 0 0 / 0.06);
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

.panel-list-item:not(.disabled):hover:active {
  background-color: rgb(0 0 0 / 0.1);
}

.panel-list-item.disabled {
  color: #999999;
}

.panel-list-item > .icon {
  flex-grow: 0;
  flex-shrink: 0;
}

.panel-list-item > .text {
  flex-grow: 10;
}

.panel-list-item > .text-shortcut {
  color: gray;
  font-family: "Lucida Grande", caption;
  font-size: 0.847em;
  justify-content: flex-end;
}

.panel-section-list .panel-section-separator {
  margin: 4px 0;
}

/* Panel Section - Footer */
.panel-section-footer {
  background-color: rgb(0 0 0 / 0.06);
  border-top: 1px solid rgb(0 0 0 / 0.15);
  color: #1a1a1a;
  display: flex;
  flex-direction: row;
  height: 41px;
  margin-top: -1px;
  padding: 0;
}

.panel-section-footer-button {
  flex: 1 1 auto;
  height: 100%;
  margin: 0 -1px;
  padding: 12px;
  text-align: center;
}

.panel-section-footer-button > .text-shortcut {
  color: gray;
  font-family: "Lucida Grande", caption;
  font-size: 0.847em;
}

.panel-section-footer-button:hover {
  background-color: rgb(0 0 0 / 0.06);
}

.panel-section-footer-button:hover:active {
  background-color: rgb(0 0 0 / 0.1);
}

.panel-section-footer-button.default {
  background-color: #0996f8;
  box-shadow: 0 1px 0 #0670cc inset;
  color: white;
}

.panel-section-footer-button.default:hover {
  background-color: #0670cc;
  box-shadow: 0 1px 0 #005bab inset;
}

.panel-section-footer-button.default:hover:active {
  background-color: #005bab;
  box-shadow: 0 1px 0 #004480 inset;
}

.panel-section-footer-separator {
  background-color: rgb(0 0 0 / 0.1);
  width: 1px;
  z-index: 99;
}

/* Example specific – not part of chrome://browser/content/extension.css */
body {
  background: #fcfcfc;
  background-clip: padding-box;
  border: 1px solid rgb(24 26 27 / 0.2);
  box-shadow:
    0 3px 5px rgb(24 26 27 / 0.1),
    0 0 7px rgb(24 26 27 / 0.1);
  box-sizing: content-box;
  margin: 2em auto 0.5em;
  width: 384px;
}

html {
  min-height: 100vh;
}

html > body {
  margin: auto;
}

.icon-section-header {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
}

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 8 月 20 日，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤

瀏覽器樣式

Manifest V3 遷移

Firefox 面板元件（舊版）

示例

HTML

結果

瀏覽器相容性

webextensions.manifest.action

webextensions.manifest.browser_action

webextensions.manifest.page_action

webextensions.manifest.sidebar_action

webextensions.manifest.options_ui

幫助改進 MDN