bug-fix: add error handling for button click when content script is not loaded

manifest.config.ts

@@ -2,23 +2,23 @@ import { ManifestV3Export } from '@crxjs/vite-plugin';
 
 const manifest = {
   manifest_version: 3,
-  name: 'HSU 시간표 마법사',
+  name: 'HSU 시간표 마슐사',
   version: '1.2.2',
   description: '한성대학교 종합정보시스템 시간표 및 수업계획서 조회 페이지의 가독성을 높입니다.',
   action: {
     default_popup: 'index.html',
     icons: {
-      '16': 'images/icon/icon-16.png',
-      '32': 'images/icon/icon-32.png',
-      '48': 'images/icon/icon-48.png',
-      '128': 'images/icon/icon-128.png',
+      '16': 'images/icon/16.png',
+      '32': 'images/icon/32.png',
+      '48': 'images/icon/48.png',
+      '128': 'images/icon/128.png',
     },
   },
   icons: {
-    '16': 'images/icon/icon-16.png',
-    '32': 'images/icon/icon-32.png',
-    '48': 'images/icon/icon-48.png',
-    '128': 'images/icon/icon-128.png',
+    '16': 'images/icon/16.png',
+    '32': 'images/icon/32.png',
+    '48': 'images/icon/48.png',
+    '128': 'images/icon/128.png',
   },
   content_scripts: [
     {

src/popup/App.tsx

@@ -4,9 +4,7 @@ import { loadDataFromStorage, saveDataToStorage } from '@/hooks/storage';
 
 function App() {
   const [toggleState, setToggleState] = useState<string>('false');
-
   useEffect(() => {
-    // 초기 토글 상태 불러오기
     loadDataFromStorage('toggleState', (data: string | null) => {
       if (!data) {
         saveDataToStorage('toggleState', 'false');
@@ -21,14 +19,11 @@ function App() {
     setToggleState(newState);
     saveDataToStorage('toggleState', newState);
 
-    // 현재 활성 탭의 콘텐츠 스크립트로 메시지 전송
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       if (tabs[0].id) {
         chrome.tabs.sendMessage(tabs[0].id, { action: 'toggle', isToggled: newState === 'true' }, (response) => {
           if (chrome.runtime.lastError) {
-            console.error(chrome.runtime.lastError.message);
-          } else {
-            console.log('메시지 전송 응답:', response);
+            console.log('해당 페이지는 종합정보시스템이 아닙니다.');
           }
         });
       }

vite.config.ts

@@ -6,31 +6,33 @@ import { defineConfig } from 'vite';
 
 import manifest from './manifest.config';
 
-export default defineConfig({
-  base: './',
-  plugins: [
-    react(),
-    tsconfigPaths(),
-    /**
-     * npm run dev 시 주석 처리 해주세요
-     */
-    crx({
-      manifest,
-      contentScripts: {
-        injectCss: false,
+export default defineConfig(({ mode }) => {
+  const isDev = mode === 'development';
+  return {
+    base: './',
+    plugins: [
+      react(),
+      tsconfigPaths(),
+      // dev 환경에서는 crx 플러그인을 제외
+      !isDev &&
+        crx({
+          manifest,
+          contentScripts: {
+            injectCss: true,
+          },
+        }),
+    ].filter(Boolean),
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
       },
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
     },
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        popup: 'index.html',
+    build: {
+      rollupOptions: {
+        input: {
+          popup: 'index.html',
+        },
       },
     },
-  },
+  };
 });