發布日期：2026 年 11 月 10 日
MetaMask 是自我託管的金融平台，在全球約 190 個國家/地區有超過 1 億次下載。其瀏覽器擴充功能是以開放方式開發，因此公司內外的貢獻者會持續提交提取要求。
MetaMask 使用者體驗工程師 Francis Nepomuceno 審查了許多提取要求，並希望以一致的方式協助貢獻者套用無障礙最佳做法，並使用現代網路功能。他在編輯器中已使用 Chrome 的 Modern Web Guidance，這是一組技能，可將網頁平台最佳做法和瀏覽器相容性資料提供給程式碼代理。為了向其他貢獻者提供相同的指引，他設定了一個機器人，用來審查 MetaMask 開放原始碼存放區的每個提取要求，無論作者使用什麼工具。
挑戰：跟上現代網頁功能的腳步
現代 HTML 和 CSS 持續新增功能，提升無障礙程度和使用者體驗，但要追蹤哪些功能可在不同瀏覽器上運作並不容易。如果有多位貢獻者，則必須讓每位開啟提取要求的人都能取得這項知識。
安全性是另一個值得關注的原因：MetaMask 預設會對每個第三方依附元件進行沙箱處理，因此採用原生瀏覽器功能比採用程式庫替代方案更便宜。Nepomuceno 表示：「能夠存取這些現代 API，例如不使用 JavaScript 就能使用對話方塊和下拉式選單，是一大優勢。」
解決方案：Modern Web Guidance 會審查每項提取要求
2026 年 9 月 16 日，MetaMask/metamask-extension 的提取要求新增了「運作方式」頁面，其中包含常見問題，其建構方式與大多數 React 常見問題相同：
// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
<Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}
大約五分鐘後，機器人發表了留言。並引用 search-hidden-content 指南，提出三個重點：
- 根據條件轉譯每個答案會將其從 DOM 中移除，因此瀏覽器的網頁內搜尋功能找不到收合的文字，輔助技術也更難找到。
- 原生
<details>/<summary>揭露 (自 2020 年起基準) 會將內容保留在 DOM 中，並使用正確的語意。如果是互斥面板，共用name屬性 (2024 年起新增的基準) 會自動關閉其他面板；如果是多重開啟的常見問題，請省略該屬性。 - 如果團隊偏好現有的 Disclosure 元件，至少應使用
hidden="until-found"將答案保留在 DOM 中，並使用beforematch事件監聽器同步處理aria-expanded和圖示狀態。
// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
<summary>
<Text>{question}</Text>
</summary>
<Text>{answer}</Text>
</details>
13 分鐘後，作者推送了修正程式。該元件變成原生 <details>/<summary> 揭露，收合的答案仍保留在 DOM 中，以便在網頁中尋找，且兩個導覽按鈕變成連結。
這個機器人是執行 Modern Web Guidance 的 Cursor Automation，Nepomuceno 只用了三行提示就設定完成。2026 年 10 月 21 日 (第五週)：
- 機器人已對約 480 個提取要求執行，並對其中 64 個提取要求 (57 個功能和修正提取要求，以及 7 個自動發布和同步提取要求) 發表評論，這些提取要求來自 26 位作者。
- 在功能和修正提取要求中，工程師修正了 43 項發現，並部分修正了另外 3 項，共涉及 22 項提取要求。
- 工程師迅速採取行動：在 38 個可識別修訂版本的修正中，有 19 個在 15 分鐘內完成，26 個在 1 小時內完成，從留言到修正的中位數為 15.2 分鐘。
以下說明 MetaMask 如何設定機器人、偵測到哪些內容，以及哪些地方有雜訊。
設定為三行提示
當問到自動化功能的設定方式時，Nepomuceno 回答：「當然，我們的設定其實沒什麼特別之處。我們只是保持簡潔，並限定範圍。」完整指令：
- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items
實際運作方式：
- 僅供參考：機器人在前兩天發布了「要求變更」評論 (和一項核准)，作者在處理後便將其關閉；自 9 月 18 日起，每項評論都是一則留言。不會阻擋合併，因此作者仍可決定是否採納每項建議。
- 它會引用存放區中的特定指南和檔案：在評論的 64 個提取要求中，機器人提出了 122 項發現。在 102 個功能和修正提取要求中，有 63 個要求指明瞭要套用的 Modern Web Guidance 指南，例如
search-hidden-content、state-aware-sticky-headers或sms-otp-form，並在存放區已使用建議模式時，指向存放區中的現有檔案。 - 除非提取要求涉及使用者介面，否則不會執行：在這五週內，大約 480 個提取要求中，至少有 100 個涉及使用者介面或用戶端程式碼，而機器人在每個提取要求中平均發現兩個問題。如果團隊的存放區大多是前端，則可預期系統會對較多 PR 發表評論。
提示本身適用於任何代理執行工具；Modern Web Guidance 可做為 Cursor、Claude Code、Codex、GitHub Copilot、Antigravity 和其他程式碼編寫代理的技能或外掛程式安裝。代理執行技能時，會在本機索引中查詢相符的指南 (不需 API 金鑰)，並使用團隊代理執行工具提供的模型，檢查差異。
Modern Web Guidance 發現了哪些程式碼檢查工具未偵測到的問題
靜態 Linter 可以標記單一元素缺少的屬性，但後續發現的問題則與互動行為、HTML 語意，以及元件在檔案之間的搭配方式有關。
交易手續費欄位看似可編輯，但輸入內容會遭到忽略
在 MetaMask 的進階交易手續費設定中，Gas 限制欄位 (用於限制交易可消耗的網路手續費) 雖然看似可編輯，但實際上會忽略使用者的輸入內容。這是在預估費用仍在載入或載入失敗時發生的。 同時，「儲存」按鈕已停用，但沒有提供輔助技術可讀取的說明。
機器人引用表單指南，標記了三項修正：
- 如果無法預估，請停用 Gas 限制欄位，並將顯示的狀態文字連結至該欄位，讓輔助技術讀取說明。
- 將停用的「Save」按鈕連結至相同的狀態文字，讓螢幕閱讀器知道停用的原因。
- 將欄位切換為數字輸入模式，讓行動裝置使用者看到數字鍵盤。
作者在兩個設定互動視窗中套用所有三項修正，並將其合併為單一元件。
隱藏網址的橫幅按鈕
在 MetaMask 某個交易功能的狀態橫幅中，內嵌的「FAQ」和「contact MetaMask Support」動作是以按鈕形式建構，會使用 JavaScript 開啟新分頁，而不是連結。機器人引用 HTML 和無障礙指南，在三分鐘內指出螢幕閱讀器會將這些元素讀成按鈕，且使用者會失去連結功能，例如複製網址或從內容選單在新分頁中開啟網址。此外，該模型也指出 MetaMask 程式碼集中現有的橫幅元件，該元件已將這些動作轉譯為實際連結。
十二分鐘後，作者將這兩項動作都切換為連結。Nepomuceno 表示：「我發現，一旦採用某項指引，日後的審查就會將其做為參考範例，這非常實用。」
標籤位於其他位置的驗證輸入內容
機器人能讀取多個檔案，因此在處理多步驟表單時也發揮了作用。靜態 Linter 只會看到每個步驟中含有預留位置文字的文字欄位，無法判斷顯示的標題和操作說明位於上層布局元件中。機器人引用表單和無障礙功能指南，發現預留位置是欄位的唯一標籤、上層布局中的步驟標題和操作說明與輸入內容無關，且錯誤和「重新傳送驗證碼」訊息未向螢幕閱讀器播報。15 分鐘後，這三個問題都獲得修正，而且當後續提取要求將程式碼輸入重新設計為六個視覺數字方塊時，無障礙功能線路仍保持不變。
機器人發現的其他問題
以下是同一項五週測試的其他五項發現：
- 機器人背後的工程師遺漏了 CSS 細節：Nepomuceno 自己的提取要求，用於固定首頁分頁巢狀 CSS 捲動狀態查詢，但未命名容器，並以在捲動過程中切換版面配置的方式切換邊框。機器人引用了狀態感知固定式標題指南，而他修正了這兩個問題。他發現這些評論有助於錨定位置和捲動狀態查詢。
- 滑價上限在輸入過程中即生效：自訂滑價輸入 (使用者在交易中可容忍的價格變動) 在每次輸入時都會限制超過 100% 的值，因此當使用者輸入 101 時，系統會自動將其轉換為 100。根據表單指南，修正方式是將驗證作業移至欄位失去焦點時，並新增可見的警告橫幅。
- 螢幕閱讀器無法使用的載入指標：權杖清單載入骨架將「載入中」標籤放在沒有角色的通用元素上，這是 ARIA 禁止的做法。機器人指出程式碼集中有兩個元件已使用 MetaMask 的僅限螢幕閱讀器模式 (這兩個元件在六天前經過 Modern Web Guidance 審查後更新)，作者在八分鐘後將骨架與該模式對齊。
- 未受保護的非同步動作：非同步的「在供應商網站上查看」按鈕沒有執行中保護機制，因此按兩下可能會開啟重複的分頁和背景監控程式。作者在留言後不到四分鐘內新增了防護措施。
- 未透過表單驗證按鍵輸入：「匯入 NFT」頁面會驗證每次按鍵輸入，但缺少用於提交語意的
<form>元素。兩者都在審查後 19 分鐘內修正完畢。
所有評論都是公開的，機器人的完整留言會顯示在每個連結的提取要求中，您可以在 GitHub 上瀏覽所有留言。
未修正的問題和雜訊程度
並非所有發現項目都已落地。下表顯示 MetaMask 如何統計功能和修正提取要求的 102 項發現 (另外 20 項發現來自 7 項發布和同步提取要求，這些要求不預期會變更程式碼)：
以下是 122 項發現 (包括 20 項與發布和同步提取要求相關的發現) 的主題分類：
這些數字呈現出一些模式：
- 相較於跨領域的無障礙功能變更，僅限於單一元件的修正更常發生。表單和 HTML 修正項目會保留在審查中的元件內，因此作者通常會立即套用 (31 個修正項目中有 19 個)。無障礙功能發現的問題最多 (38 個)，但只有 12 個獲得修正，通常是因為修正範圍超出提取要求，或需要尚未建立的共用設計系統元件。
- 「其他」則是不屬於網路平台指南的內容。其中 16 項發現涵蓋設計系統一致性、邏輯錯誤、文案、測試品質、深色模式和程式碼整潔度；其中 3 項已採取行動，其中一項是實際迴歸 (網路清單變更導致表單預填功能中斷)。這 16 個測試大多可以輕鬆通過，但發現迴歸問題後，就值得快速查看。
- 偽陽性結果來自代理套用指南的方式，而大部分的雜訊都可以在設定中修正。由於審查機器人是讀取差異的代理程式，而非靜態 Linter，因此誤判的原因是誤讀周圍程式碼，或套用規則時比連結指南更嚴格。接下來，顯然要調整的是略過發布和同步分支，並縮減提示，讓代理嚴格遵守指南中明確規定的規則。
Nepomuceno 說明瞭這對團隊和審查作業時間的廣泛影響：
「評論真的很有幫助。他們協助我們找出並熟悉新式 API，例如興趣叫用器和 Popover API。」
「這項工具並未增加 PR 審查時間，反而可能縮短了時間。許多工程師會使用代理來處理意見回饋。如果沒有 Modern Web Guidance，就必須由熟悉這些現代網頁技術的人工審查員，才能找出這些問題。」
MetaMask 工程師 David Murdoch 也對指南本身做出貢獻：當 CSS 版面配置指南的其中一個範例出現錯誤時，他提交了問題，而 Modern Web Guidance 團隊在兩天後合併了修正。
MetaMask 給考慮使用這項服務的團隊的建議
- 撰寫內容前，請先詳閱指南。執行
npx modern-web-guidance@latest search "accordion find in page"，查看代理會擷取哪些指南來執行工作。您也可以瀏覽完整的 Modern Web Guidance 指南。 - 首先，使用三行提示詞和已執行的代理。安裝技能 (
npx modern-web-guidance@latest install，或代理的外掛程式指令)，將可對提取要求執行的任何項目指向該技能，並指示該技能僅在有可執行的項目時才發表評論，且必須遵守指南中明確規定的規則。MetaMask 的工程師之所以仍會閱讀機器人的留言，是因為機器人在沒有問題時會保持安靜。 - 部分發現項目可能不會處理。在功能和修正提取要求的 102 項發現中，有 43 項已修正，36 項遭拒或未處理。這個比率適合用於建議審查機器人，但如果用於封鎖檢查，則會造成干擾。
- 持續進行人工審查。機器人擅長網頁平台語意、現代 CSS 和互動模式，但不瞭解產品。
此外，MetaMask 尚未評估以下項目：五週後，團隊尚未追蹤每項提取要求的成本、執行階段、模式比較，或審查機器人在 React 程式碼集以外的行為。
MetaMask 只要設定三行程式碼，就能取得審查機器人，針對大多數發現項目引用特定指南 (以及現有的存放區內範例，如果有的話)。採納的建議通常會在 1 小時內修正。