diff --git a/dist/manifest.json b/dist/manifest.json index 8c70e0d..c360d1f 100644 --- a/dist/manifest.json +++ b/dist/manifest.json @@ -11,6 +11,12 @@ }, "default_popup": "popup.html" }, + "content_scripts": [ + { + "matches": [""], + "js": ["js/contentScript.js"] + } + ], "background": { "service_worker": "js/backgroundPage.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 @@ + Chrome Extension (built with TypeScript + React) diff --git a/src/popup/component.tsx b/src/popup/component.tsx index f044012..e1f6bfb 100644 --- a/src/popup/component.tsx +++ b/src/popup/component.tsx @@ -1,74 +1,46 @@ -import React from "react"; -import { Hello } from "@src/components/hello"; -import browser, { Tabs } from "webextension-polyfill"; -import { Scroller } from "@src/components/scroller"; - -// // // // - -// Scripts to execute in current tab -const scrollToTopPosition = 0; -const scrollToBottomPosition = 9999999; - -function scrollWindow(position: number) { - window.scroll(0, position); -} - -/** - * 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"); - }); +import React, { useState } from "react"; +import "../css/app.css"; + +const Component = () => { + const [pageText, setPageText] = useState(""); + + const getTextAndSpeak = () => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + if (!tabs[0]?.id) return; + + 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("페이지의 텍스트를 가져오지 못했어요."); + } + }, + ); }); -} - -// // // // + }; -export function Popup() { - // Sends the `popupMounted` event - React.useEffect(() => { - browser.runtime.sendMessage({ popupMounted: true }); - }, []); - - // Renders the component tree return ( -
-
- -
- { - executeScript(scrollToTopPosition); - }} - onClickScrollBottom={() => { - executeScript(scrollToBottomPosition); - }} - /> -
+
+

+ VOIM tts test +

+
); -} +}; + +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(); + root.render(); } else { console.error("popup이라는 id를 가진 요소가 존재하지 않아요!"); }