自訂彈窗樣式

設定頁裡有一個自訂 CSS 輸入框。這裡寫的 CSS 儲存後會注入到彈窗、設定頁和說明頁的 <head>，用於覆蓋預設樣式。

範例：讓可信度標籤更顯眼

css

.confidence.high {
  background: #14532d;
  color: #fff;
  font-weight: 700;
}

.confidence.medium {
  background: #ca8a04;
  color: #fff;
}

css

:root {
  --accent: #d946ef;
  --accent-dark: #a21caf;
  --accent-soft: rgba(217, 70, 239, 0.1);
}

彈窗裡的 segment、技術連結 hover、重新整理按鈕等都引用這些 token，改完會一起變色。

css

body {
  font-size: 15px;
}

.tech-name {
  font-size: 14px;
}

所有自訂 CSS 會放進固定 ID 的 <style id="stackPrismCustomCss"> 標籤，並插入到 <head> 末尾。重新儲存會替換舊內容，不會重複追加。

不會影響普通網頁——這段 CSS 只在擴充功能自己的 UI 範圍內生效。

開啟彈窗或設定頁，右鍵 → 檢查。Elements 面板裡能看到注入的 style 標籤，方便確認選擇器是否命中。