WHY

在多專案環境中，我們常會：

• 忘記在 MR 標題中加上專案代碼或類別。
• 不同團隊使用不同格式（如 [FE] 修正登入頁錯誤、[API] 更新後端參數）。

若能讓 extension 自動根據專案 URL 或設定檔，幫忙加上 prefix，不但可節省時間，也能維持團隊命名一致性。

HOW

1. 由 content script 監聽 MR 頁面載入。
2. 抓取當前專案代碼（從 URL 或 localStorage 取得）。
3. 偵測 MR 標題輸入框（input[name="merge_request[title]"]）。
4. 自動於輸入時加上 prefix（若尚未存在）。
5. 使用 MutationObserver 確保動態渲染的頁面也能正常運作。

實作

1. 在 manifest.json 註冊一組新的 content script

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

   說明：僅在「新建 MR 頁面」注入，避免干擾其他頁面

2. content_prefix.js 主要邏輯

    const PREFIX_MAP = {
        'frontend': '[FE]',
        'backend': '[BE]',
        'api': '[API]'
    };
   
    // 取得專案代號（例如從 URL）
    function getProjectKey() {
        const url = window.location.href;
        const beforeDash = url.split('/-/')[0];
        const parts = beforeDash.split('/');
        return parts.pop() || '';
    }
   
    //如果沒有取得專案名稱則使用預設值
    const projectKey = getProjectKey();
    const prefix = PREFIX_MAP[projectKey] || `[${projectKey.toUpperCase()}]`;
   
    // 偵測 MR 標題輸入框
    const titleInput = document.querySelector('input[name="merge_request[title]"]');
   
    if (titleInput) {
        const applyPrefix = () => {
            const value = titleInput.value.trim();
            if (!value.startsWith(prefix)) {
                titleInput.value = `${prefix} ${value}`;
            }
        };
   
        // 使用者手動輸入時自動補上 prefix
        titleInput.addEventListener('blur', applyPrefix);
   
        // 初始時也執行一次
        applyPrefix();
    } else {
        console.warn('未找到 MR 標題欄位，可能是 GitLab UI 延遲渲染。');
    }
   

   說明：

   • 使用 location.pathname 自動判斷專案。
   • 防止重複加上 prefix。
   • 使用 blur 事件避免輸入過程中干擾使用者。

3. 進階 — background 傳設定值(Optional)
   若希望 prefix 可由使用者自訂，可以讓 popup 頁面設定各專案的 prefix，並透過 message passing 傳給 content script。

    // popup.html
    chrome.storage.sync.set({
      prefixes: {
        'frontend': '[FE]',
        'backend': '[BE]'
      }
    });
   

   // content_prefix.js
    chrome.storage.sync.get('prefixes', ({ prefixes }) => {
      const projectKey = getProjectKey();
      const prefix = prefixes[projectKey] || `[${projectKey.toUpperCase()}]`;
      applyPrefix(prefix);
    });
   

延伸應用

• 自動補上 MR 描述模板: 當偵測到「新建 MR」頁面時，自動插入團隊模板（如「變更項目」、「測試步驟」）
• 自動加上 Reviewer: 根據專案自動選 reviewer