From a8ecfcc51fda13154e8c790751552322321e1b96 Mon Sep 17 00:00:00 2001 From: Kenny Date: Tue, 19 Aug 2025 23:58:56 +0100 Subject: [PATCH 1/8] feat: add chrome types --- packages/chrome/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/chrome/tsconfig.json b/packages/chrome/tsconfig.json index 6348cd3..abf3042 100644 --- a/packages/chrome/tsconfig.json +++ b/packages/chrome/tsconfig.json @@ -9,7 +9,7 @@ "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, - "types": ["chrome"] + "types": ["chrome", "@types/chrome"] }, "include": ["src"] } From 5af064bfb4aec0e89597b1e31ad2f7a64d698d81 Mon Sep 17 00:00:00 2001 From: Kenny Date: Tue, 19 Aug 2025 23:59:25 +0100 Subject: [PATCH 2/8] fix: build error and remove header --- packages/chrome/src/popup/Popup.tsx | 70 +++--- .../popup/components/japanese-input-form.tsx | 225 ++++++++---------- 2 files changed, 137 insertions(+), 158 deletions(-) diff --git a/packages/chrome/src/popup/Popup.tsx b/packages/chrome/src/popup/Popup.tsx index a2353f5..511a7d3 100644 --- a/packages/chrome/src/popup/Popup.tsx +++ b/packages/chrome/src/popup/Popup.tsx @@ -6,43 +6,39 @@ import { Header } from "./components/header"; import { JapaneseInputForm } from "./components/japanese-input-form"; const Popup = () => { - const [audioDataUrl, setAudioDataUrl] = useState(null); - const [error, setError] = useState(null); - const [audioElement, setAudioElement] = useState( - null, - ); - - - useEffect(() => { - return () => { - if (audioElement) { - audioElement.pause(); - } - }; - }, [audioElement]); - - return ( -
-
- - - - {error && } - - {audioDataUrl && ( - - )} -
- ); + const [audioDataUrl, setAudioDataUrl] = useState(null); + const [error, setError] = useState(null); + const [audioElement, setAudioElement] = useState( + null, + ); + + useEffect(() => { + return () => { + if (audioElement) { + audioElement.pause(); + } + }; + }, [audioElement]); + + return ( +
+ + + {error && } + + {audioDataUrl && ( + + )} +
+ ); }; export default Popup; diff --git a/packages/chrome/src/popup/components/japanese-input-form.tsx b/packages/chrome/src/popup/components/japanese-input-form.tsx index 596292e..46f67fb 100644 --- a/packages/chrome/src/popup/components/japanese-input-form.tsx +++ b/packages/chrome/src/popup/components/japanese-input-form.tsx @@ -1,132 +1,115 @@ import { useRef, useState } from "react"; export const JapaneseInputForm = ({ - setError, - setAudioDataUrl, - audioElement, + setError, + setAudioDataUrl, + audioElement, }: { - setError: (error: string | null) => void; - setAudioDataUrl: (audioDataUrl: string | null) => void; - audioElement: HTMLAudioElement | null; + setError: (error: string | null) => void; + setAudioDataUrl: (audioDataUrl: string | null) => void; + audioElement: HTMLAudioElement | null; }) => { - const [text, setText] = useState(""); - const [gender, setGender] = useState<"male" | "female">("male"); - const [loading, setLoading] = useState(false); - const formRef = useRef(null); - const [fontFamily, setFontFamily] = useState("font-stick"); + const [text, setText] = useState(""); + const [gender, setGender] = useState<"male" | "female">("male"); + const [loading, setLoading] = useState(false); + const formRef = useRef(null); - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); - setLoading(true); - setError(null); - setAudioDataUrl(null); - chrome.storage.local.remove(["savedAudioUrl"]); - if (audioElement) audioElement.pause(); - if (!chrome || !chrome.runtime || !chrome.runtime.sendMessage) { - setLoading(false); - setError("Cannot send TTS request outside of extension context."); - console.warn( - "chrome.runtime.sendMessage not available. Running in dev mode?", - ); - return; - } + setLoading(true); + setError(null); + setAudioDataUrl(null); + chrome.storage.local.remove(["savedAudioUrl"]); + if (audioElement) audioElement.pause(); + if (!chrome || !chrome.runtime || !chrome.runtime.sendMessage) { + setLoading(false); + setError("Cannot send TTS request outside of extension context."); + console.warn( + "chrome.runtime.sendMessage not available. Running in dev mode?", + ); + return; + } - chrome.runtime.sendMessage( - { - type: "TTS_REQUEST", - payload: { text, gender }, - }, - (response) => { - setLoading(false); - if (chrome.runtime.lastError) { - console.error( - "TTS Request failed:", - chrome.runtime.lastError.message, - ); - setError(`Error: ${chrome.runtime.lastError.message}`); - return; - } + chrome.runtime.sendMessage( + { + type: "TTS_REQUEST", + payload: { text, gender }, + }, + (response) => { + setLoading(false); + if (chrome.runtime.lastError) { + console.error( + "TTS Request failed:", + chrome.runtime.lastError.message, + ); + setError(`Error: ${chrome.runtime.lastError.message}`); + return; + } - if (!response?.success) { - console.error("TTS Response error:", response?.error); - setError(response?.error || "Unknown error from background script"); - return; - } + if (!response?.success) { + console.error("TTS Response error:", response?.error); + setError(response?.error || "Unknown error from background script"); + return; + } - setAudioDataUrl(response.dataUrl); - chrome.storage.local.set({ savedAudioUrl: response.dataUrl }); - }, - ); - }; - return ( -
-