chrome-extension/components/CustomMessage.tsx

import React from 'react'
// 自定义消息组件
export const CustomMessage = {
  success: (content: string) => {
    showCustomMessage('success', content);
  },
  error: (content: string) => {
    showCustomMessage('error', content);
  },
  warning: (content: string) => {
    showCustomMessage('warning', content);
  },
  info: (content: string) => {
    showCustomMessage('info', content);
  }
};
type MessageType = 'success' | 'error' | 'warning' | 'info';
// 自定义消息显示函数
const showCustomMessage = (type: MessageType, message: string) => {
  // 移除已存在的消息
  const existingMessages = document.querySelectorAll('.custom-message');
  existingMessages.forEach(msg => msg.remove());

  const messageContainer = document.createElement('div');

  messageContainer.className = `custom-message fixed top-5 left-1/2 gap-2 flex justify-center items-center leading-[18px] rounded-lg px-4 py-2
   bg-[#fff] min-w-[200px] z-[10000] transition-all duration-300 shadow-[0_4px_12px_rgb(0_0_0/0.15)] -translate-x-1/2`;
  // messageContainer.style.cssText = `
  //   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  // `;

  let icon = '';
  // 根据不同类型设置样式和图标
  switch (type) {
    case 'success':
      messageContainer.style.color = '#52c41a';
      icon = '<svg t="1756881717120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" width="18" height="18"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8895" fill="#52c41a"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8896" fill="#52c41a"></path></svg>';
      break;
    case 'error':
      messageContainer.style.color = '#ff4d4f';
      icon = '<svg t="1756881654441" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8531" width="18" height="18"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8532" fill="#ff4d4f"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8533" fill="#ff4d4f"></path></svg>';
      break;
    case 'warning':
      messageContainer.style.color = '#faad14';
      icon = '<svg t="1756881803623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9161" width="18" height="18"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="9162" fill="#faad14"></path><path d="M512 688m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="9163" fill="#faad14"></path><path d="M488 576h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" p-id="9164" fill="#faad14"></path></svg>';
      break;
    default:
      messageContainer.style.color = '#1890ff';
      icon = '<svg t="1756881872206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9401" width="18" height="18"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27c40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l0.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8zM924 512h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4S687 811.7 646 829c-42.4 17.9-87.4 27-133.9 27s-91.5-9.1-133.9-27c-40.9-17.3-77.7-42.1-109.3-73.8-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47c5.3-4.1 3.5-12.5-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-0.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8 0.1-4.5-3.5-8.2-8-8.2z" p-id="9402" fill="#1890ff"></path></svg>';
  }

  messageContainer.innerHTML = `
    <span style="font-size: 16px;">${icon}</span>
    <span style="color: #181818;">${message}</span>
  `;

  document.body.appendChild(messageContainer);

  // 3秒后自动移除
  setTimeout(() => {
    if (messageContainer.parentNode) {
      messageContainer.parentNode.removeChild(messageContainer);
    }
  }, 3000);
};