Feat(extension, client): separate extension send token environment (#319)

* feat: VITE_GOOGLE_REDIRECT_URI 하나로 통합

* feat: extension build dev와 prod 환경 분리하도록 script, turbo.json 설정

* feat: extension build 시점에 dev, prod가 name env 기준으로 나뉘도록 앱 분리 설정

* feat: extension login popup 창 열릴 때 dev, prod 환경 분리되도록 동적 url 변수 설정

* feat: extension background webUrl 설정 시 동적으로 분기로직 추가

* setting: update extension version to 1.0.3

* fix: build script 패키지 매니저 yarn에서 pnpm으로 수정

* refactor: ALLOWED_ORIGINS 없는 경우 예외처리 추가

* refactor: split(,)에 따라 [] 배열 생성으로 인한 엣지 케이스 에러 방지 로직 추가

Author: constantly-dev

apps/client/src/pages/onBoarding/GoogleCallback.tsx

@@ -46,9 +46,7 @@ const GoogleCallback = () => {
     }
   };
 
-  const redirectUri = import.meta.env.PROD
-    ? import.meta.env.VITE_GOOGLE_REDIRECT_URI_PROD
-    : import.meta.env.VITE_GOOGLE_REDIRECT_URI_DEV;
+  const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
 
   const loginWithCode = async (code: string) => {
     try {

apps/client/src/shared/utils/handleGoogleLogin.ts

@@ -1,14 +1,13 @@
 export const handleGoogleLogin = () => {
   const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
 
-  const redirectUri = import.meta.env.PROD
-    ? import.meta.env.VITE_GOOGLE_REDIRECT_URI_PROD
-    : import.meta.env.VITE_GOOGLE_REDIRECT_URI_DEV;
+  const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
 
   if (!clientId || !redirectUri) {
     alert('Google OAuth 설정이 누락되었습니다.');
     return;
   }
+
   const googleAuthUrl =
     `https://accounts.google.com/o/oauth2/v2/auth?` +
     `client_id=${clientId}` +

apps/extension/.gitignore

@@ -15,8 +15,10 @@
 # misc
 .DS_Store
 .env.local
+.env.development
 .env.development.local
 .env.test.local
+.env.production
 .env.production.local
 
 npm-debug.log*

apps/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Pinback 핀백 - 북마크 관리와 리마인드 도구",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "action": { "default_popup": "popup.html" },
   "icons": {
     "128": "icon.png",

apps/extension/package.json

@@ -4,11 +4,13 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "dev": "vite --mode development",
+    "build": "pnpm build:prod",
+    "build:dev": "tsc -b && vite build --mode development",
+    "build:prod": "tsc -b && vite build --mode production",
     "lint": "eslint .",
     "format": "prettier -w .",
-    "zip": "vite build && node scripts/zip.mjs"
+    "zip": "pnpm build:prod && node scripts/zip.mjs"
   },
   "dependencies": {
     "@pinback/contracts": "workspace:*",

apps/extension/src/background.ts

@@ -1,5 +1,7 @@
 import { EXTENSION_MESSAGE_TYPE } from '@pinback/contracts/extension-messages';
 
+const webUrl = import.meta.env.VITE_WEB_URL || 'https://pinback.today';
+
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === 'install') {
     chrome.identity.getProfileUserInfo(function (info) {
@@ -8,7 +10,7 @@ chrome.runtime.onInstalled.addListener((details) => {
       });
       setTimeout(() => {
         chrome.tabs.create({
-          url: `https://pinback.today/onboarding?email=${info.email}`,
+          url: `${webUrl}/onboarding?email=${info.email}`,
         });
       }, 1000);
     });
@@ -21,9 +23,7 @@ chrome.runtime.onMessage.addListener((message) => {
       console.log('Token saved!');
     });
   }
-});
 
-chrome.runtime.onMessage.addListener((message) => {
   if (message.type === EXTENSION_MESSAGE_TYPE.logout) {
     chrome.storage.local.remove('token', () => {
       console.log('Token removed!');

apps/extension/src/content.ts

@@ -1,23 +1,35 @@
 import { EXTENSION_MESSAGE_TYPE } from '@pinback/contracts/extension-messages';
 
+const ALLOWED_ORIGINS = __ALLOWED_ORIGINS__;
+
+if (ALLOWED_ORIGINS.length === 0) {
+  console.warn(
+    '[Pinback] 허용된 도메인(ALLOWED_ORIGINS) 설정이 비어 있습니다. 토큰 동기화가 작동하지 않으니 .env 파일을 확인해주세요.'
+  );
+}
+
 window.addEventListener('message', (event) => {
   if (event.source !== window) return;
-  if (event.data.type === EXTENSION_MESSAGE_TYPE.setToken) {
+
+  if (!ALLOWED_ORIGINS.includes(event.origin)) return;
+
+  const { type, token } = event.data;
+
+  if (type === EXTENSION_MESSAGE_TYPE.setToken) {
     chrome.runtime.sendMessage({
       type: EXTENSION_MESSAGE_TYPE.setToken,
-      token: event.data.token,
+      token,
     });
-    chrome.storage.local.set({ token: event.data.token }, () => {
-      console.log('Token saved!');
+
+    chrome.storage.local.set({ token }, () => {
+      console.log(`[${event.origin}] Token saved!`);
     });
   }
-});
 
-window.addEventListener('message', (event) => {
-  if (event.source !== window) return;
-  if (event.data.type === EXTENSION_MESSAGE_TYPE.logout) {
+  // 토큰 삭제 (로그아웃)
+  if (type === EXTENSION_MESSAGE_TYPE.logout) {
     chrome.storage.local.remove('token', () => {
-      console.log('Token removed!');
+      console.log(`[${event.origin}] Token removed!`);
     });
   }
 });

apps/extension/src/pages/LogOutPop.tsx

@@ -1,6 +1,8 @@
 import { Icon } from '@pinback/design-system/icons';
 import LogOutImg from '/logout_chippi.svg';
 const LogOutPop = () => {
+  const webUrl = import.meta.env.VITE_WEB_URL || 'https://pinback.today';
+
   return (
     <div className="bg-white-bg common-shadow flex h-[37.5rem] w-[35.2rem] flex-col items-center justify-center rounded-[1.2rem] px-[3.2rem] py-[2.4rem] leading-normal">
       <div className="mr-auto">
@@ -25,7 +27,7 @@ const LogOutPop = () => {
         type="button"
         onClick={() => {
           chrome.tabs.create({
-            url: 'https://pinback.today/onboarding?step=SOCIAL_LOGIN',
+            url: `${webUrl}/onboarding?step=SOCIAL_LOGIN`,
           });
         }}
       >

apps/extension/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __ALLOWED_ORIGINS__: string[];

apps/extension/vite.config.ts

@@ -1,36 +1,50 @@
-// vite.config.ts
-import { defineConfig } from 'vite';
+import { crx } from '@crxjs/vite-plugin';
+import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import { resolve } from 'path';
-import { crx } from '@crxjs/vite-plugin';
+import { defineConfig, loadEnv } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 import manifest from './manifest.json';
-import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 
-export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths({
-      projects: [resolve(__dirname, './tsconfig.json')],
-    }),
-    tailwindcss(),
-    crx({ manifest }),
-    svgSpritePlugin({
-      iconDirs: ['../../packages/design-system/src/icons/source'],
-      symbolId: 'icon-[name]',
-      inject: 'body-last',
-    }),
-  ],
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  const dynamicManifest = {
+    ...manifest,
+    name: env.VITE_EXTENSION_NAME || manifest.name,
+  };
+
+  return {
+    define: {
+      __ALLOWED_ORIGINS__: JSON.stringify(
+        env.VITE_ALLOWED_ORIGINS?.split(',').filter(Boolean) || []
+      ),
+    },
+
+    plugins: [
+      react(),
+      tsconfigPaths({
+        projects: [resolve(__dirname, './tsconfig.json')],
+      }),
+      tailwindcss(),
+      crx({ manifest: dynamicManifest }),
+      svgSpritePlugin({
+        iconDirs: ['../../packages/design-system/src/icons/source'],
+        symbolId: 'icon-[name]',
+        inject: 'body-last',
+      }),
+    ],
 
-  build: {
-    outDir: 'dist',
-    copyPublicDir: true,
-  },
-  publicDir: 'public',
+    build: {
+      outDir: 'dist',
+      copyPublicDir: true,
+    },
+    publicDir: 'public',
 
-  server: {
-    port: 5175,
-    strictPort: true,
-  },
+    server: {
+      port: 5175,
+      strictPort: true,
+    },
+  };
 });