feat/extension-get-username (#158)

* feat: 백준룸즈의 로컬스토리지에서 username, provider 받아와서 서버에 보내기

* feat: 로그인 시 로컬스토리지에 userInfo 저장 / 로그아웃 시 삭제

* feat: userInfo에서 username대신 providerId 받아오기

* refactor: authContext -> authProvider

client/src/components/Chat.tsx

@@ -1,6 +1,7 @@
 import { FaArrowRight } from 'react-icons/fa6';
 import Message from './Message';
 import { useAuthContext } from '../contexts/AuthProvider';
+
 import { ChatEvent, MessageInterface } from '../types/Message';
 import { Socket } from 'socket.io-client';
 

client/src/components/Profile.tsx

@@ -2,7 +2,13 @@ import { useAuthContext } from '../contexts/AuthProvider';
 
 export default function Profile() {
   const { user } = useAuthContext();
-
+  const userInfo = { provider: user?.provider, providerId: user?.providerId };
+  if (
+    !localStorage.getItem('userInfo') ||
+    localStorage.getItem('userInfo') !== JSON.stringify(userInfo)
+  ) {
+    localStorage.setItem('userInfo', JSON.stringify(userInfo));
+  }
   // TODO: AuthContext쪽 UserType 재정의
   return (
     <div className="mb-6 flex items-center justify-center gap-3">

client/src/types/RoomCreateType.ts

@@ -1,13 +1,12 @@
-import { User } from "./UserType";
+import { User } from './UserType';
 
 export interface RoomCreateType {
-    code: string;
-    host: User;
-    users: User[];
-    endAt: string;
-    updatedAt: string;
-    deletedAt: string;
-    id: number;
-    createdAt: string;
-  }
-
+  code: string;
+  host: User;
+  users: User[];
+  endAt: string;
+  updatedAt: string;
+  deletedAt: string;
+  id: number;
+  createdAt: string;
+}

extension/background.js

@@ -1,4 +1,5 @@
 let isActive = false;
+let userInfo;
 
 chrome.action.setBadgeText({ text: 'off' });
 chrome.action.setBadgeBackgroundColor({ color: '#c0c0c0' });
@@ -7,52 +8,31 @@ chrome.runtime.onMessage.addListener(function (req) {
   if (req.data === 'toggle') {
     isActive = !isActive;
   } else {
-    isActive = req.data;
+    isActive = req.isActive;
   }
 
   if (isActive) {
     chrome.action.setBadgeText({ text: 'on' });
     chrome.action.setBadgeBackgroundColor({ color: '#528BFF' });
+    userInfo = req.userInfo;
   } else {
     chrome.action.setBadgeText({ text: 'off' });
     chrome.action.setBadgeBackgroundColor({ color: '#c0c0c0' });
   }
 });
 
-chrome.webRequest.onBeforeRequest.addListener(
-  function (details) {
-    if (isActive) {
-      if (details.method === 'POST') {
-        const sourceCode = details.requestBody.formData.source[0];
-        console.log(sourceCode);
-        // fetch('', {
-        //   method: 'POST',
-        //   headers: {
-        //     'Content-Type': 'application/json',
-        //   },
-        //   body: JSON.stringify(sourceCode),
-        // });
-      }
-    }
-  },
-  { urls: ['https://www.acmicpc.net/submit/*'] },
-  ['requestBody'],
-);
-
 chrome.webRequest.onHeadersReceived.addListener(
   function (details) {
     if (isActive) {
       if (details.method === 'POST') {
         const submitURL = details.responseHeaders.filter((item) => item.name === 'location')[0].value;
-        console.log(submitURL);
-
-        // fetch('', {
-        //   method: 'POST',
-        //   headers: {
-        //     'Content-Type': 'application/json',
-        //   },
-        //   body: JSON.stringify(submitURL),
-        // });
+        fetch('https://api.baekjoonrooms.com/submission', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: { submitURL, provider: userInfo.provider, providerId: userInfo.providerId },
+        });
       }
     }
   },

extension/manifest.json

@@ -4,7 +4,7 @@
   "description": "Multiplayer rooms for BOJ",
   "version": "0.1",
   "permissions": ["webRequest"],
-  "host_permissions": ["https://www.acmicpc.net/submit/*"],
+  "host_permissions": ["https://www.acmicpc.net/submit/*", "https://api.baekjoonrooms.com/*"],
   "background": {
     "service_worker": "background.js"
   },

extension/scripts/content.js

@@ -1,6 +1,5 @@
-const observer = new MutationObserver((mutationRecords) => {
-  mutationRecords.forEach(injectScript);
-});
+const observer = new MutationObserver(injectScript);
+let isRoom = false;
 
 const targetNode = document.body;
 const config = { childList: true, subtree: true };
@@ -9,14 +8,17 @@ observer.observe(targetNode, config);
 
 function injectScript() {
   const urlPattern = /^http:\/\/localhost:5173\/room\/.*$/;
-  if (urlPattern.test(window.location.href)) {
-    chrome.runtime.sendMessage({ data: true });
+  if (urlPattern.test(window.location.href) && !isRoom) {
+    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
+    chrome.runtime.sendMessage({ isActive: true, userInfo });
+    isRoom = true;
   }
 
   const roomExitButton = document.getElementById('room-exit-button');
   if (roomExitButton) {
     roomExitButton.addEventListener('click', () => {
-      chrome.runtime.sendMessage({ data: false });
+      chrome.runtime.sendMessage({ isActive: false });
+      isRoom = false;
     });
   }
 }