在之前我們改善了 popup 頁面 UIUX 體驗，但通知只用 alert 視窗提醒，醜醜的
今天就來讓通知的樣式更好看吧！

為了不干擾使用者體驗，我們選擇用 Toast
讓通知文字可以短暫浮現，幾秒後自動消失

方法跟我們加入複製按鈕類似，那我們就來實作吧！

實作

1. 在 content_script.js 中新增一個可以建立 toast 的 function

   function showToast(message) {
        // 建立一個 div
        const toast = document.createElement("div");
        toast.innerText = message;
   
        // 基本樣式
        toast.style.position = "fixed";
        toast.style.top = "20px";
        toast.style.right = "20px";
        toast.style.background = "rgba(0,0,0,0.7)";
        toast.style.color = "#fff";
        toast.style.padding = "8px 12px";
        toast.style.borderRadius = "6px";
        toast.style.zIndex = "9999";
        toast.style.fontSize = "20px";
        toast.style.transition = "opacity 0.3s ease";
        toast.style.opacity = "1";
   
        document.body.appendChild(toast);
   
        // 幾秒後自動消失
        setTimeout(() => {
            toast.style.opacity = "0";
            setTimeout(() => toast.remove(), 300);
        }, 2000);
    }
   

2. 接著我們改寫複製成功 alert 的部分

    navigator.clipboard.write([clipboardItem]).then(() => {
        showToast("✅ 已成功複製通知文字！");
    }).catch(() => {
        showToast("❌ 複製失敗，請再試一次");
    });
   

這樣我們就可以得到一個好看的 Toast 訊息囉！

實際測試

1. 打開一個 GitLab Merge Request 頁面
2. 點擊 Content Script 注入的"複製"按鈕
3. 複製成功後，查看顯示效果