content.js

// 소셜 로그인 제공업체 정의 및 감지 패턴
const socialProviders = {
  'google': {
    patterns: [
      'accounts.google.com',
      'oauth2/auth',
      'google.com/signin',
      'btn-google',
      'google-signin',
      'continue-with-google',
      'sign-in-with-google',
      'google로 로그인',
      'asset-google-symbol',
      'google로',
      'login_google',
      'sl_google',
      'icon_login_google'
    ],
    name: 'Google',
    color: '#4285f4'
  },
  'kakao': {
    patterns: [
      'kauth.kakao.com',
      'kakao.com/oauth',
      'kakaocdn.net',
      'btn-kakao',
      'kakao-login',
      'kakao_login',
      'continue-with-kakao',
      'kakao로 계속하기',
      '카카오로 로그인',
      '카카오 로그인',
      'kakao계정으로',
      'kakao 계정으로',
      'sign-in-with-kakao',
      'login-kakao',
      'oauth-kakao',
      'kakao-signin',
      'kakao-auth',
      'kakao-로그인-버튼',
      'fa-comment',
      'comment',
      'asset-kakao-symbol',
      'kakao_sign_in',
      'login_kakao',
      'sl_kakao',
      'icon_login_kakao'
    ],
    name: '카카오',
    color: '#fee500'
  },
  'github': {
    patterns: [
      'github.com/login/oauth',
      'btn-github',
      'github-signin',
      'continue-with-github',
      'sign-in-with-github'
    ],
    name: 'GitHub',
    color: '#333'
  },
  'facebook': {
    patterns: [
      'facebook.com/login.php',
      'facebook.com/dialog/oauth',
      'btn-facebook',
      'facebook-login',
      'continue-with-facebook',
      'asset-facebook-symbol',
      'facebook_sign_in',
      'login_facebook',
      'sl_facebook',
      'icon_login_facebook'
    ],
    name: 'Facebook',
    color: '#1877f2'
  },
  'naver': {
    patterns: [
      'nid.naver.com',
      'naver.com/oauth2.0',
      'btn-naver',
      'naver-login',
      'continue-with-naver',
      '네이버로 로그인',
      'naver로 로그인',
      'asset-naver-symbol',
      'naver로',
      'login_naver',
      'sl_naver',
      'icon_login_naver'
    ],
    name: '네이버',
    color: '#03c75a'
  },
  'apple': {
    patterns: [
      'appleid.apple.com',
      'btn-apple',
      'apple-signin',
      'continue-with-apple',
      'sign-in-with-apple',
      'asset-apple-symbol',
      'apple_sign_in',
      'login_apple',
      'sl_apple',
      'icon_login_apple'
    ],
    name: 'Apple',
    color: '#000'
  }
};

// 중복 감지 방지용 변수
let lastDetected = null;

// 현재 페이지에서 소셜 로그인 사용 여부를 감지하는 함수
function detectSocialLogin() {
  const currentUrl = window.location.href;
  const currentDomain = window.location.hostname;
  
  // 성능 최적화: 텍스트 검색을 최소화
  const pageContent = document.body ? document.body.innerText.toLowerCase() : '';
  const pageHTML = document.documentElement ? document.documentElement.innerHTML.toLowerCase() : '';
  
  console.log(`[조원호 짱짱맨] ${currentDomain}에서 소셜 로그인 확인 중`);
  console.log(`[조원호 짱짱맨] URL: ${currentUrl}`);
  
  // 각 소셜 로그인 제공업체의 패턴을 확인
  for (const [providerId, provider] of Object.entries(socialProviders)) {
    for (const pattern of provider.patterns) {
      // 로그인 관련 페이지나 요소가 있는지 확인
      if (currentUrl.includes('/login') || currentUrl.includes('/signin') || currentUrl.includes('/auth') || 
          currentUrl.includes('login.') || currentUrl.includes('signin.') || currentUrl.includes('auth.') ||
          pageContent.includes('로그인') || pageContent.includes('login') || pageContent.includes('sign in') ||
          pageHTML.includes('login') || pageHTML.includes('signin')) {
        
        // 실제 해당 제공업체 버튼이 있는지 확인
        if (currentUrl.includes(pattern) || 
            pageContent.includes(pattern) || 
            pageHTML.includes(pattern)) {
          
          console.log(`[조원호 짱짱맨] 로그인 페이지에서 패턴 매칭됨: "${pattern}" → ${provider.name} (${providerId})`);
          
          // 중복 감지 방지 (10초간만)
          const detectionKey = `${currentDomain}-${providerId}`;
          const now = Date.now();
          if (lastDetected && lastDetected.key === detectionKey && now - lastDetected.time < 10000) {
            return;
          }
          lastDetected = { key: detectionKey, time: now };
          
          // 귀여운 알림 표시
          showCuteLoginNotification(providerId);
          
          // 백그라운드 스크립트에 소셜 로그인 감지 정보 전송
          try {
            if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
              chrome.runtime.sendMessage({
                type: 'SOCIAL_LOGIN_DETECTED',
                data: {
                  site: currentDomain,
                  provider: providerId,
                  providerName: provider.name,
                  timestamp: Date.now(),
                  url: currentUrl
                }
              });
            }
          } catch (error) {
            console.log('Extension context not available');
          }
          
          console.log(`[조원호 짱짱맨] 소셜 로그인 감지됨: ${provider.name} → ${currentDomain}`);
          return;
        }
      }
    }
  }
}

// DOM 변경사항을 관찰하여 동적으로 추가되는 로그인 버튼 감지
function observeLoginButtons() {
  if (!document.body) return;
  
  let detectTimeout;
  const observer = new MutationObserver(() => {
    clearTimeout(detectTimeout);
    detectTimeout = setTimeout(detectSocialLogin, 100);
  });
  
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 리다이렉트 처리 (OAuth 플로우에서 발생)
function handleRedirects() {
  if (window.location.href !== document.referrer) {
    detectSocialLogin();
  }
}

// 페이지 로딩 상태에 따른 초기화 (Chrome extension 환경에서만 실행)
if (typeof chrome !== 'undefined' && chrome.runtime) {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      setTimeout(() => {
        detectSocialLogin();
        observeLoginButtons();
        handleRedirects();
      }, 100);
    });
  } else {
    setTimeout(() => {
      detectSocialLogin();
      observeLoginButtons();
      handleRedirects();
    }, 100);
  }
}

// 클릭 이벤트 후 소셜 로그인 감지 (Chrome extension 환경에서만)
if (typeof chrome !== 'undefined' && chrome.runtime) {
  let clickTimeout;
  document.addEventListener('click', (event) => {
    // 로그인 관련 버튼 클릭만 감지
    const target = event.target.closest('button, a, [role="button"]');
    if (target) {
      const text = target.textContent.toLowerCase();
      const className = target.className.toLowerCase();
      if (text.includes('로그인') || text.includes('login') || text.includes('signin') || 
          className.includes('login') || className.includes('signin') || className.includes('btn')) {
        clearTimeout(clickTimeout);
        clickTimeout = setTimeout(detectSocialLogin, 100);
      }
    }
  });
}


// 이미 표시된 알림을 추적
const shownNotifications = new Set();

// 화면 오른쪽 하단에 귀여운 알림을 표시하는 함수
function showCuteLoginNotification(providerId) {
  const provider = socialProviders[providerId];
  if (!provider) return;
  
  // 중복 방지
  if (shownNotifications.has(providerId)) {
    return;
  }
  shownNotifications.add(providerId);
  
  console.log(`[조원호 짱짱맨] ${provider.name} 귀여운 알림 표시`);
  
  // 알림 창 생성
  const notification = document.createElement('div');
  notification.style.cssText = `
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    color: #333 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08) !important;
    animation: slideInBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    cursor: pointer !important;
    user-select: none !important;
    max-width: 280px !important;
    line-height: 1.4 !important;
  `;
  
  notification.innerHTML = `최근에 ${provider.name}로 로그인하셨습니다! ✨`;
  
  // 애니메이션 키프레임 추가
  if (!document.querySelector('#cute-notification-keyframes')) {
    const style = document.createElement('style');
    style.id = 'cute-notification-keyframes';
    style.textContent = `
      @keyframes slideInBounce {
        0% { transform: translateY(100px) scale(0.8); opacity: 0; }
        50% { transform: translateY(-5px) scale(1.02); opacity: 0.9; }
        100% { transform: translateY(0) scale(1); opacity: 1; }
      }
    `;
    document.head.appendChild(style);
  }
  
  document.body.appendChild(notification);
  
  // 클릭 시 제거
  notification.addEventListener('click', () => {
    notification.remove();
  });
}

// 페이지 언로드 전 마지막 감지 시도
window.addEventListener('beforeunload', () => {
  detectSocialLogin();
});