Feat(client&extension): 온보딩<->익스텐션 데이터 통신 작업 (#99)

* feat: 익스텐션 설치 동시에 이메일 받아오기

* feat: 이메일, 토큰 각각 스토리지 업데이트

* feat: 익스텐션 배포 전 TODO 확인

Author: jllee000

apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

@@ -46,6 +46,18 @@ const MainCard = () => {
   // api 구간
   const {mutate:postSignData} = usePostSignUp();
 
+  // 익스텐션에서부터 이메일 받아오는 구간!
+  const [userEmail, setUserEmail] = useState("");
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const emailParam = params.get("email"); 
+    if (emailParam) {
+      setUserEmail(emailParam);
+    }
+  }, [location.search]);
+
+
   // FCM 구간
   const [fcmToken, setFcmToken] = useState<string | null>(null); 
   const app = initializeApp(firebaseConfig);
@@ -126,7 +138,7 @@ const [remindTime, setRemindTime] = useState('09:00');
       setRemindTime(normalizeTime(raw));
 
       postSignData({
-            "email": "tesdfdfsst@gmail.com",  // TODO : 익스텐션에게서 메일 받기
+            "email": userEmail, 
             "remindDefault": remindTime, 
             "fcmToken": fcmToken,
         },

apps/client/src/shared/apis/queries.ts

@@ -66,9 +66,18 @@ export const usePostSignUp = () => {
     mutationFn: (data: postSignUpRequest) => postSignUp(data),
     onSuccess: (data) => {
       const newToken = data?.data?.token || data?.token;
-
+      const sendTokenToExtension = (token: string) => {
+          window.postMessage(
+            {
+              type: 'SET_TOKEN',
+              token,
+            },
+            window.location.origin
+          );
+        };
       if (newToken) {
         localStorage.setItem('token', newToken);
+        sendTokenToExtension(newToken);
       }
 
       console.log('회원가입 성공:', data);

apps/extension/manifest.json

@@ -6,7 +6,7 @@
   "icons": {
     "128": "icon.png"
   },
-  "permissions": ["activeTab", "tabs", "storage", "scripting", "bookmarks"],
+  "permissions": ["activeTab", "tabs", "storage", "bookmarks", "identity","identity.email"],
   "background": {
     "service_worker": "src/background.js",
     "type": "module"

apps/extension/src/App.tsx

@@ -24,7 +24,7 @@ const App = () => {
   };
 
   const handleDuplicateRightClick = () => {
-    window.location.href = "/dashboard";
+    window.location.href = "https://www.pinback.today/";
   };
 
   return (

apps/extension/src/apis/axiosInstance.ts

@@ -28,14 +28,12 @@ apiRequest.interceptors.request.use(async (config) => {
   if (isNoAuth) return config;
 
   const email = await new Promise<string | undefined>((resolve) => {
-    chrome.storage.local.get('email', (result) => {
-      resolve(result.email);
-    });
+    chrome.storage.local.get('userEmail', (result) => resolve(result.userEmail));
   });
 
   let token = await new Promise<string | undefined>((resolve) => {
     chrome.storage.local.get('token', (result) => {
-      resolve(result.token);
+      resolve(result.token); 
     });
   });
 

apps/extension/src/background.ts

@@ -1,39 +1,24 @@
 console.log('백그라운드 기능');
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-  if (message.type === 'FETCH_OG_META') {
-    fetch(message.url)
-      .then((res) => res.text())
-      .then((html) => {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-
-        const getMeta = (prop) =>
-          doc
-            .querySelector(`meta[property="${prop}"]`)
-            ?.getAttribute('content') || '';
-
-        const makeAbsoluteUrl = (base, img) => {
-          try {
-            return img ? new URL(img, base).href : '';
-          } catch {
-            return img;
-          }
-        };
-
-        const image = getMeta('og:image');
-
-        sendResponse({
-          title: getMeta('og:title'),
-          description: getMeta('og:description'),
-          siteName: getMeta('og:site_name'),
-          image: makeAbsoluteUrl(message.url, image),
-          url: getMeta('og:url') || message.url,
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === 'install') {
+    chrome.identity.getProfileUserInfo(function (info) {
+       chrome.storage.local.set({ 'userEmail': info.email }, () => {
+          console.log(info.email);
         });
-      })
-      .catch((err) => {
-        console.error('OG fetch 실패:', err);
-        sendResponse(null);
-      });
-    return true; // async 응답
+      setTimeout(() => {
+        chrome.tabs.create({
+          url: `http://localhost:5173/onboarding?email=${info.email}`,
+        });
+      }, 1000);
+    });
   }
 });
+
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.type === 'SET_TOKEN') {
+    chrome.storage.local.set({ 'token': message.token }, () => {
+      console.log('Token saved!', message.token);
+    });
+  }
+});

apps/extension/src/content.ts

@@ -1 +1,10 @@
 console.log('컨텐츠 스크립트 로드됨');
+window.addEventListener('message', (event) => {
+  if (event.source !== window) return;
+  if (event.data.type === 'SET_TOKEN') {
+    chrome.runtime.sendMessage({
+      type: 'SET_TOKEN',
+      token: event.data.token,
+    });
+  }
+});

apps/extension/src/hooks/useSaveBookmarks.ts

@@ -39,8 +39,7 @@ export const useSaveBookmark = () => {
           console.log('크롬 북마크바에 저장 완료: ', newBookmark);
         }
       );
-
-    //  TODO: window.close();
+      window.close();
     } catch (error) {
       console.error('저장 중 오류:', error);
     }

apps/extension/src/pages/MainPop.tsx

@@ -38,9 +38,8 @@ const MainPop = ({type, savedData}: MainPopProps) => {
 
     useEffect(() => {
     if (!loading && !title) {
-        // TODO 개발 중에는 주석처리 (최종엔 주석 제거할거임)
-        // alert("이 페이지는 저장할 수 없어요 🐿️");
-        // window.close(); 
+        alert("이 페이지는 저장할 수 없어요 🐿️");
+        window.close(); 
     }
     }, [loading, title]);