WHY

在多人協作的專案中，MR 描述通常需要包含特定內容，包括但不限於：

• 變更內容
• 原因說明
• 測試步驟
• 風險評估
  ...

但有時在開發完成筋疲力盡後就會忘記填寫，即使有套用 GitLab 模板，一個回頭可能就會遺漏掉
所以我們可以在發送時自動檢查描述內容是否符合團隊規範，並在缺漏時給予即時提示或阻擋提交，幫助自己及團隊維持文件品質。

HOW

1. content script 偵測到 MR 編輯頁面（/merge_requests/*/edit）。
2. 取得 MR 描述欄位（textarea[name="merge_request[description]"]）。
3. 在「送出按鈕」被點擊前，自動檢查描述是否包含必要段落。
4. 若缺少則：
   • 顯示一個 Toast 提醒使用者。
   • 阻止表單送出，直到修正為止。

實作

1. manifest.json 註冊一個新的 Content Script

    {
      "content_scripts": [
        ...,
        {
          "matches": ["https://gitlab.com/*/merge_requests/*/edit"],
          "js": ["content_validate.js"]
        }
      ]
    }
   

2. content_validate.js

    (function () {
        console.log("Content Validate 已注入到 MR 頁面！");
        const REQUIRED_SECTIONS = [
            /變更內容/i,
            /測試步驟/i,
            /影響範圍/i
        ];
   
        const descField = document.querySelector('textarea[name="merge_request[description]"]');
        const submitBtn = document.querySelector('button[type="submit"]');
   
        if (!descField || !submitBtn) return;
   
        submitBtn.addEventListener('click', (e) => {
            const text = descField.value.trim();
            const missing = REQUIRED_SECTIONS.filter(regex => !regex.test(text));
   
            if (missing.length > 0) {
                e.preventDefault();
                showToast(`⚠️ 請補上以下段落：${missing.map(r => r.source.replace(/\\i/g, '')).join('、')}`);
            }
        });
   
        function showToast(message) {
            let toast = document.createElement('div');
            toast.textContent = message;
            Object.assign(toast.style, {
                position: 'fixed',
                bottom: '20px',
                right: '20px',
                background: '#ffcc00',
                color: '#000',
                padding: '10px 16px',
                borderRadius: '8px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
                zIndex: 9999
            });
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
    })()
   

   說明:
   • 使用 RegExp 檢查欄位內容：利用正則表達式搜尋文字段落的關鍵字

     /變更內容/i  // i 表示不分大小寫
     

   • 攔截表單提交：使用 e.preventDefault() 阻止表單提交，確保用戶補齊描述前無法送出 MR。

實際測試