From ed9fcb56e590bdfbba273e24eb6bd0b5307780d3 Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Tue, 8 Apr 2025 18:17:42 +0900
Subject: [PATCH 1/7] =?UTF-8?q?feat=20:tts=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/manifest.json      |  6 +++
 src/popup/component.tsx | 96 +++++++++++++----------------------------
 src/popup/index.tsx     |  6 +--
 3 files changed, 37 insertions(+), 71 deletions(-)

diff --git a/dist/manifest.json b/dist/manifest.json
index 8c70e0d..1267091 100644
--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -11,6 +11,12 @@
         },
         "default_popup": "popup.html"
     },
+    "content_scripts": [
+        {
+            "matches": ["https://*/*"],
+            "js": ["js/contentScript.js"]
+        }
+    ],
     "background": {
         "service_worker": "js/backgroundPage.js"
     },
diff --git a/src/popup/component.tsx b/src/popup/component.tsx
index f044012..fb77e89 100644
--- a/src/popup/component.tsx
+++ b/src/popup/component.tsx
@@ -1,74 +1,36 @@
-import React from "react";
-import { Hello } from "@src/components/hello";
-import browser, { Tabs } from "webextension-polyfill";
-import { Scroller } from "@src/components/scroller";
+import React, { useState } from "react";
+import "../css/app.css";
 
-// // // //
+const Component = () => {
+    const [text, setText] = useState("");
 
-// Scripts to execute in current tab
-const scrollToTopPosition = 0;
-const scrollToBottomPosition = 9999999;
+    const handleSpeak = () => {
+        if (!text.trim()) return;
 
-function scrollWindow(position: number) {
-    window.scroll(0, position);
-}
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = "ko-KR";
+        speechSynthesis.speak(utterance);
+    };
 
-/**
- * Executes a string of Javascript on the current tab
- * @param code The string of code to execute on the current tab
- */
-function executeScript(position: number): void {
-    // Query for the active tab in the current window
-    browser.tabs
-        .query({ active: true, currentWindow: true })
-        .then((tabs: Tabs.Tab[]) => {
-            // Pulls current tab from browser.tabs.query response
-            const currentTab: Tabs.Tab | number = tabs[0];
-
-            // Short circuits function execution is current tab isn't found
-            if (!currentTab) {
-                return;
-            }
-            const currentTabId: number = currentTab.id as number;
-
-            // Executes the script in the current tab
-            browser.scripting
-                .executeScript({
-                    target: {
-                        tabId: currentTabId,
-                    },
-                    func: scrollWindow,
-                    args: [position],
-                })
-                .then(() => {
-                    console.log("Done Scrolling");
-                });
-        });
-}
-
-// // // //
-
-export function Popup() {
-    // Sends the `popupMounted` event
-    React.useEffect(() => {
-        browser.runtime.sendMessage({ popupMounted: true });
-    }, []);
-
-    // Renders the component tree
     return (
-        <div>
-            <div className="mx-4 my-4 bg-black">
-                <Hello />
-                <hr />
-                <Scroller
-                    onClickScrollTop={() => {
-                        executeScript(scrollToTopPosition);
-                    }}
-                    onClickScrollBottom={() => {
-                        executeScript(scrollToBottomPosition);
-                    }}
-                />
-            </div>
+        <div className="w-64 p-4 bg-white rounded-lg shadow-lg">
+            <h1 className="text-xl font-semibold mb-2 text-gray-800">
+                VOIM TTS
+            </h1>
+            <textarea
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                placeholder="텍스트를 입력하세요"
+                className="w-full h-24 p-2 border border-gray-300 rounded resize-none text-sm"
+            />
+            <button
+                onClick={handleSpeak}
+                className="w-full mt-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm"
+            >
+                읽어줘!
+            </button>
         </div>
     );
-}
+};
+
+export default Component;
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
index eec7221..9b6adfd 100644
--- a/src/popup/index.tsx
+++ b/src/popup/index.tsx
@@ -1,11 +1,9 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import browser from "webextension-polyfill";
-import { Popup } from "./component";
+import Component from "./component";
 import "../css/app.css";
 
-// // // //
-
 browser.tabs
     .query({ active: true, currentWindow: true })
     .then(() => {
@@ -21,7 +19,7 @@ browser.tabs
         const container = document.getElementById("popup");
         if (container) {
             const root = createRoot(container);
-            root.render(<Popup />);
+            root.render(<Component />);
         } else {
             console.error("popup이라는 id를 가진 요소가 존재하지 않아요!");
         }

From 301405dfbda74f3789ada728a0df14c95b4ee8df Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Fri, 11 Apr 2025 12:04:44 +0900
Subject: [PATCH 2/7] =?UTF-8?q?feat=20:=20tts=20=EC=9D=BD=EC=96=B4?=
 =?UTF-8?q?=EB=82=B4=EA=B8=B0=20=EC=B2=B4=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/manifest.json      |  2 +-
 dist/popup.html         |  1 +
 src/popup/component.tsx | 38 ++++++++++++++++++++++++--------------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/dist/manifest.json b/dist/manifest.json
index 1267091..c360d1f 100644
--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -13,7 +13,7 @@
     },
     "content_scripts": [
         {
-            "matches": ["https://*/*"],
+            "matches": ["<all_urls>"],
             "js": ["js/contentScript.js"]
         }
     ],
diff --git a/dist/popup.html b/dist/popup.html
index cf39f12..898045c 100644
--- a/dist/popup.html
+++ b/dist/popup.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta charset="UTF-8" />
         <title>Chrome Extension (built with TypeScript + React)</title>
         <script src="js/popup.js"></script>
     </head>
diff --git a/src/popup/component.tsx b/src/popup/component.tsx
index fb77e89..e1f6bfb 100644
--- a/src/popup/component.tsx
+++ b/src/popup/component.tsx
@@ -2,29 +2,39 @@ import React, { useState } from "react";
 import "../css/app.css";
 
 const Component = () => {
-    const [text, setText] = useState("");
+    const [pageText, setPageText] = useState("");
 
-    const handleSpeak = () => {
-        if (!text.trim()) return;
+    const getTextAndSpeak = () => {
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            if (!tabs[0]?.id) return;
 
-        const utterance = new SpeechSynthesisUtterance(text);
-        utterance.lang = "ko-KR";
-        speechSynthesis.speak(utterance);
+            chrome.tabs.sendMessage(
+                tabs[0].id,
+                { type: "GET_PAGE_TEXT" },
+                (response) => {
+                    if (response?.text) {
+                        setPageText(response.text);
+
+                        const utterance = new SpeechSynthesisUtterance(
+                            response.text,
+                        );
+                        utterance.lang = "ko-KR";
+                        speechSynthesis.speak(utterance);
+                    } else {
+                        alert("페이지의 텍스트를 가져오지 못했어요.");
+                    }
+                },
+            );
+        });
     };
 
     return (
         <div className="w-64 p-4 bg-white rounded-lg shadow-lg">
             <h1 className="text-xl font-semibold mb-2 text-gray-800">
-                VOIM TTS
+                VOIM tts test
             </h1>
-            <textarea
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-                placeholder="텍스트를 입력하세요"
-                className="w-full h-24 p-2 border border-gray-300 rounded resize-none text-sm"
-            />
             <button
-                onClick={handleSpeak}
+                onClick={getTextAndSpeak}
                 className="w-full mt-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm"
             >
                 읽어줘!

From a0155e2efaf79a205baca9776fcc7ec9fb136cbd Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Fri, 11 Apr 2025 12:51:44 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat=20:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=84=B1=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/manifest.json      |  5 ++--
 src/popup/component.tsx | 51 ++++++++++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/dist/manifest.json b/dist/manifest.json
index c360d1f..4c7e788 100644
--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -13,8 +13,9 @@
     },
     "content_scripts": [
         {
-            "matches": ["<all_urls>"],
-            "js": ["js/contentScript.js"]
+            "matches": ["https://*.coupang.com/*"],
+            "js": ["js/contentScript.js"],
+            "run_at": "document_idle"
         }
     ],
     "background": {
diff --git a/src/popup/component.tsx b/src/popup/component.tsx
index e1f6bfb..0747646 100644
--- a/src/popup/component.tsx
+++ b/src/popup/component.tsx
@@ -2,26 +2,35 @@ import React, { useState } from "react";
 import "../css/app.css";
 
 const Component = () => {
-    const [pageText, setPageText] = useState("");
+    const [productInfo, setProductInfo] = useState<{
+        productId: string;
+        productTitle: string;
+    } | null>(null);
 
-    const getTextAndSpeak = () => {
+    const [error, setError] = useState("");
+
+    const getProductInfo = () => {
         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
             if (!tabs[0]?.id) return;
 
             chrome.tabs.sendMessage(
                 tabs[0].id,
-                { type: "GET_PAGE_TEXT" },
+                { type: "GET_PRODUCT_INFO" },
                 (response) => {
-                    if (response?.text) {
-                        setPageText(response.text);
-
+                    if (response?.matched) {
+                        const { productId, productTitle } = response;
+                        setProductInfo({ productId, productTitle });
+                        setError("");
                         const utterance = new SpeechSynthesisUtterance(
-                            response.text,
+                            `상품명은 ${productTitle}이고, 상품 아이디는 ${productId}입니다.`,
                         );
                         utterance.lang = "ko-KR";
                         speechSynthesis.speak(utterance);
                     } else {
-                        alert("페이지의 텍스트를 가져오지 못했어요.");
+                        setProductInfo(null);
+                        setError(
+                            "❗ 현재 페이지는 '식품' 카테고리가 아닙니다.",
+                        );
                     }
                 },
             );
@@ -29,16 +38,30 @@ const Component = () => {
     };
 
     return (
-        <div className="w-64 p-4 bg-white rounded-lg shadow-lg">
-            <h1 className="text-xl font-semibold mb-2 text-gray-800">
-                VOIM tts test
+        <div className="w-72 p-4 bg-white rounded-lg shadow-lg">
+            <h1 className="text-xl font-semibold mb-3 text-gray-800">
+                VOIM 상품 리더기
             </h1>
+
             <button
-                onClick={getTextAndSpeak}
-                className="w-full mt-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm"
+                onClick={getProductInfo}
+                className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
             >
-                읽어줘!
+                상품 정보 읽어줘!
             </button>
+
+            {productInfo && (
+                <div className="mt-4 text-sm text-gray-700">
+                    <p>
+                        <strong>상품명:</strong> {productInfo.productTitle}
+                    </p>
+                    <p>
+                        <strong>상품 ID:</strong> {productInfo.productId}
+                    </p>
+                </div>
+            )}
+
+            {error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
         </div>
     );
 };

From 8b64f3e1e314dc928158710fef77be6921aa9fe4 Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Wed, 16 Apr 2025 14:30:04 +0900
Subject: [PATCH 4/7] =?UTF-8?q?feat=20:=20=ED=81=AC=EA=B8=B0=20=EA=B5=B5?=
 =?UTF-8?q?=EA=B2=8C=20/=20=ED=81=AC=EA=B2=8C=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/popup/component.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/popup/component.tsx b/src/popup/component.tsx
index 0747646..895bb0d 100644
--- a/src/popup/component.tsx
+++ b/src/popup/component.tsx
@@ -36,7 +36,6 @@ const Component = () => {
             );
         });
     };
-
     return (
         <div className="w-72 p-4 bg-white rounded-lg shadow-lg">
             <h1 className="text-xl font-semibold mb-3 text-gray-800">
@@ -45,11 +44,10 @@ const Component = () => {
 
             <button
                 onClick={getProductInfo}
-                className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
+                className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm mb-2"
             >
                 상품 정보 읽어줘!
             </button>
-
             {productInfo && (
                 <div className="mt-4 text-sm text-gray-700">
                     <p>

From 0c14b3836acf9490dd807d3999400d41daa9f79a Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Wed, 16 Apr 2025 14:44:13 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refactor=20:=20index.tsx=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/popup/__tests__/test_popup.tsx          | 2 +-
 src/popup/{component.tsx => getProduct.tsx} | 0
 src/popup/index.tsx                         | 9 +++++++--
 src/popup/stories/Popup.stories.tsx         | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)
 rename src/popup/{component.tsx => getProduct.tsx} (100%)

diff --git a/src/popup/__tests__/test_popup.tsx b/src/popup/__tests__/test_popup.tsx
index c5eaf33..968e183 100644
--- a/src/popup/__tests__/test_popup.tsx
+++ b/src/popup/__tests__/test_popup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popup } from "../component";
+import { Popup } from "../getProduct";
 import renderer from "react-test-renderer";
 
 it("component renders", () => {
diff --git a/src/popup/component.tsx b/src/popup/getProduct.tsx
similarity index 100%
rename from src/popup/component.tsx
rename to src/popup/getProduct.tsx
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
index 9b6adfd..153426d 100644
--- a/src/popup/index.tsx
+++ b/src/popup/index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import browser from "webextension-polyfill";
-import Component from "./component";
+import GetProduct from "./getProduct";
 import "../css/app.css";
 
 browser.tabs
@@ -19,7 +19,12 @@ browser.tabs
         const container = document.getElementById("popup");
         if (container) {
             const root = createRoot(container);
-            root.render(<Component />);
+            root.render(
+                <div className="p-4 w-80">
+                    <h1 className="text-lg font-bold mb-4">VOIM</h1>
+                    <GetProduct />
+                </div>,
+            );
         } else {
             console.error("popup이라는 id를 가진 요소가 존재하지 않아요!");
         }
diff --git a/src/popup/stories/Popup.stories.tsx b/src/popup/stories/Popup.stories.tsx
index 5b6a145..2fa566d 100644
--- a/src/popup/stories/Popup.stories.tsx
+++ b/src/popup/stories/Popup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popup } from "../component";
+import { Popup } from "../getProduct";
 import { Meta } from "@storybook/react";
 
 // // // //

From 52019f897b07a55dab00e780146b7aff34662f12 Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Wed, 16 Apr 2025 15:20:56 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat=20:=20message=20=EC=9D=B8=EC=8B=9D=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/popup/controlFont.tsx | 33 +++++++++++++++++++++++++++++++++
 src/popup/getProduct.tsx  |  5 +++--
 src/popup/index.tsx       |  2 ++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/popup/controlFont.tsx

diff --git a/src/popup/controlFont.tsx b/src/popup/controlFont.tsx
new file mode 100644
index 0000000..1ff9ef4
--- /dev/null
+++ b/src/popup/controlFont.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+const ControlFont = () => {
+    const sendMessage = (
+        type: "ENLARGE_CONTENT_FONT" | "RESET_CONTENT_FONT",
+    ) => {
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            if (!tabs[0]?.id) return;
+            chrome.tabs.sendMessage(tabs[0].id, { type }, (response) => {
+                console.log("메시지 전송됨:", response);
+            });
+        });
+    };
+
+    return (
+        <div className="flex flex-col gap-2 mt-2">
+            <button
+                onClick={() => sendMessage("ENLARGE_CONTENT_FONT")}
+                className="w-full py-2 bg-green-500 hover:bg-green-600 text-white rounded text-sm"
+            >
+                글씨 크게
+            </button>
+            <button
+                onClick={() => sendMessage("RESET_CONTENT_FONT")}
+                className="w-full py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-sm"
+            >
+                원래대로
+            </button>
+        </div>
+    );
+};
+
+export default ControlFont;
diff --git a/src/popup/getProduct.tsx b/src/popup/getProduct.tsx
index 895bb0d..69af3bd 100644
--- a/src/popup/getProduct.tsx
+++ b/src/popup/getProduct.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "../css/app.css";
 
-const Component = () => {
+const getProduct = () => {
     const [productInfo, setProductInfo] = useState<{
         productId: string;
         productTitle: string;
@@ -11,6 +11,7 @@ const Component = () => {
 
     const getProductInfo = () => {
         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            console.log("탭 목록:", tabs);
             if (!tabs[0]?.id) return;
 
             chrome.tabs.sendMessage(
@@ -64,4 +65,4 @@ const Component = () => {
     );
 };
 
-export default Component;
+export default getProduct;
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
index 153426d..401ffba 100644
--- a/src/popup/index.tsx
+++ b/src/popup/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import browser from "webextension-polyfill";
 import GetProduct from "./getProduct";
 import "../css/app.css";
+import ControlFont from "./controlFont";
 
 browser.tabs
     .query({ active: true, currentWindow: true })
@@ -23,6 +24,7 @@ browser.tabs
                 <div className="p-4 w-80">
                     <h1 className="text-lg font-bold mb-4">VOIM</h1>
                     <GetProduct />
+                    <ControlFont />
                 </div>,
             );
         } else {

From 938ef85b038d485994fe4a17bcc98212f8328218 Mon Sep 17 00:00:00 2001
From: psm1st <psm1st@sookmyung.ac.kr>
Date: Wed, 16 Apr 2025 15:40:28 +0900
Subject: [PATCH 7/7] =?UTF-8?q?feat=20:=20=EA=B8=80=EC=94=A8=20=ED=99=95?=
 =?UTF-8?q?=EB=8C=80/=EB=91=90=EA=BB=8D=EA=B2=8C=20=EC=84=B1=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/popup/getProduct.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/popup/getProduct.tsx b/src/popup/getProduct.tsx
index 69af3bd..65b5b34 100644
--- a/src/popup/getProduct.tsx
+++ b/src/popup/getProduct.tsx
@@ -11,7 +11,6 @@ const getProduct = () => {
 
     const getProductInfo = () => {
         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-            console.log("탭 목록:", tabs);
             if (!tabs[0]?.id) return;
 
             chrome.tabs.sendMessage(