這篇說明如何修改FlexFox的各種參數， 不過更重要的是如何即時預覽對`userChrome.css`所做的修改， 這樣才能所見即所得，調整到自己想要的效果。 首先到`about:config`將下面三個選項設為true和false "devtools.chrome.enabled", true "devtools.debugger.remote-enabled", true "devtools.debugger.prompt-connection", false 這三個選項的作用是開啟瀏覽器介面的工具箱，遠端除錯，和連線時是否提示。 如果經常使用瀏覽器工具箱，每次連線都要提示詢問很麻煩， 所以建議設為false。 開啟後按 Ctrl + Shift + Alt + I 打開瀏覽器工具箱， 按Ctrl + " + / - " 可以放大縮小文字。 選「樣式編輯器」，在「過濾樣式表」填入`uc`，打開`uc-variables.css`， 這裡面以"--uc"開頭的變數就是我們可以快速修改調整FlexFox顯示效果的地方。 裡面的變數大多有簡單的註解說明其作用，可以依照自己的喜好修改。 譬如說我們想要修改擴展面板每一列顯示的圖示大小和個數， 先按下工具箱右上角的三個點點點，將「不自動隱藏彈出型視窗」打勾， 然後按下瀏覽器的擴充套件（拼圖）按鈕，將擴展面板保持打開。 目前預設是20px每一列4個 https://i.imgur.com/RnBL3Tz.png /* Icon size in the uni-extensions panel */ --uc-uei-icon-size: 20px; /* Number of icons per row in the uni-extensions panel */ --uc-number-of-extensions-in-a-row: 4; 我想改成每列8個而且圖示更大一點 https://i.imgur.com/Q77DWcE.png --uc-uei-icon-size: 32px; --uc-number-of-extensions-in-a-row: 8; 一邊改數字的同時，瀏覽器的擴展面板就會跟著你改動的數字變化。 調整到你滿意的效果後，按下`uc-variables.css`旁的「儲存」就可以將結果保存。 /* ==== userContent ==== */ 要修改`userContent.css`就比較麻煩，我們以`uc-pdf.js.css`為例， 隨便打開一個pdf，按下 Ctrl + Shift + I 打開網頁開發者工具， 選「樣式編輯器」，結果會發現在這裡完全找不到`uc-pdf.js.css`。 按下「檢測器」旁邊的箭頭，然後將滑鼠移到pdf上叫出工具列， 對著工具列按下左鍵，「檢測器」的HTML就會展開到`toolbar`的位置。 點選`toolbar`，然後在右側窗口的「過濾樣式」裡填入`uc`， 就會顯示`uc-pdf.js.css`的規則，按下規則旁`uc-pdf.js.css`的連結， 就會跳轉到「樣式編輯器」， 這時`uc-pdf.js.css`就神奇地出現在「樣式編輯器」裡面了。 我們在這裡對`uc-pdf.js.css`所做的修改也會即時更新在畫面上。 /* ==== Sidebery ==== */ 最後是用`userContent.css`修改Sidebery，雖然Sidebery本身有內建樣式表編輯器， 在Sidebery內部就可以修改Sidebery的顯示效果， 但是如果想要用瀏覽器的參數控制Sidebery，還是必須使用`userContent.css`。 首先到`about:debugging#/runtime/this-firefox`找到Sidebery， 按下「檢測」，找到右邊三個點點點旁邊的分割框架的圖案， 然後選`/sidebar/sidebar.html`， 接著「樣式編輯器」裡面就會出現`uc-sidebery.css`， 以下就如法泡製。 -完- --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.163.81 (臺灣) ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Browsers/M.1732532100.A.104.html 這個其實是英文文件，我只是把它整理了一下轉過來:P https://tinyurl.com/3b5cp7bk ※ 編輯: YuQilin (61.228.163.81 臺灣), 11/25/2024 20:08:54