Change chrome tts api to Web Speech API

manifest.js

@@ -46,7 +46,7 @@ const manifest = {
       css: ["assets/css/contentStyle<KEY>.chunk.css"],
     },
   ],
-  permissions: ["scripting", "storage", "tts", "activeTab"],
+  permissions: ["scripting", "storage", "activeTab"],
   optional_host_permissions: ["*://*/*"],
   optional_permissions: [],
   host_permissions: ["https://translate.google.com/*", "http://localhost:8765/*", "https://api.lingualeo.com/*"],

src/pages/background/index.ts

@@ -78,14 +78,5 @@ chrome.runtime.onMessage.addListener(function (message, _sender, sendResponse) {
       });
   }
 
-  if (message.type === "speak") {
-    console.log("speak request: ", message);
-    chrome.tts.speak(message.text, { lang: message.lang }, function () {
-      if (chrome.runtime.lastError) {
-        console.log("Error: " + chrome.runtime.lastError.message);
-      }
-    });
-  }
-
   return true;
 });

src/pages/content/components/Subs/SubItemTranslation.tsx

@@ -52,7 +52,11 @@ export const SubItemTranslation: FC<{ text: string }> = ({ text }) => {
   };
 
   const handlePlaySound = async () => {
-    await chrome.runtime.sendMessage({ type: "speak", text: currentWordTranslation.source, lang: subsLanguage });
+    const msg = new SpeechSynthesisUtterance();
+    msg.text = currentWordTranslation.source;
+    msg.lang = subsLanguage;
+    msg.rate = 0.8;
+    window.speechSynthesis.speak(msg);
   };
 
   if (subsLanguage === translateLanguage) {

src/pages/popup/Popup.tsx

@@ -16,7 +16,7 @@ const Popup = () => {
   const handleRequestPermissions = async () => {
     const tab = await getTab();
     const isGranted = await chrome.permissions.request({
-      permissions: ["scripting", "storage", "tts", "activeTab"],
+      permissions: ["scripting", "storage", "activeTab"],
       origins: [tab.url],
     });
     if (isGranted) {