feat: auto-prompt microphone permission

manifest.js

@@ -54,6 +54,8 @@ const manifest = {
         "assets/fonts/*",
         "icon-128.png",
         "icon-34.png",
+        "src/pages/permission/index.html",
+        "src/pages/permission/requestPermissions.ts",
       ],
       matches: ["*://*/*"],
     },

src/common/Settings.tsx

@@ -15,11 +15,12 @@ import {
   StackDivider,
   Flex,
   Spacer,
-} from "@chakra-ui/react";
+ useToast } from "@chakra-ui/react";
 import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
 import { useAppState } from "../state/store";
 import React from "react";
 import ModelDropdown from "./ModelDropdown";
+import { callRPC } from "../helpers/rpc/pageRPC";
 
 interface SettingsProps {
   setInSettingsView: React.Dispatch<React.SetStateAction<boolean>>;
@@ -32,13 +33,50 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
     voiceMode: state.settings.voiceMode,
     openAIKey: state.settings.openAIKey,
   }));
+  const toast = useToast();
 
   if (!state.openAIKey) return null;
 
   const isVisionModel = state.selectedModel === "gpt-4-vision-preview";
 
   const closeSetting = () => setInSettingsView(false);
 
+  async function checkMicrophonePermission(): Promise<PermissionState> {
+    if (!navigator.permissions) {
+      return "prompt";
+    }
+    try {
+      const permission = await navigator.permissions.query({
+        name: "microphone" as PermissionName,
+      });
+      return permission.state;
+    } catch (error) {
+      console.error("Error checking microphone permission:", error);
+      return "denied";
+    }
+  }
+
+  const handleVoiceMode = async (isEnabled: boolean) => {
+    if (isEnabled) {
+      const permissionState = await checkMicrophonePermission();
+      if (permissionState === "denied") {
+        toast({
+          title: "Error",
+          description:
+            "Microphone access was previously blocked. Please enable it in your browser settings.",
+          status: "error",
+          duration: 5000,
+          isClosable: true,
+        });
+        return;
+      } else if (permissionState === "prompt") {
+        callRPC("injectMicrophonePermissionIframe", []).catch(console.error);
+      } else if (permissionState === "granted") {
+        console.log("Microphone permission granted");
+      }
+    }
+  };
+
   return (
     <>
       <HStack mb={4} alignItems="center">
@@ -104,9 +142,11 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
           <Switch
             id="voice-mode"
             isChecked={state.voiceMode}
-            onChange={(e) =>
-              state.updateSettings({ voiceMode: e.target.checked })
-            }
+            onChange={(e) => {
+              const isEnabled = e.target.checked;
+              handleVoiceMode(isEnabled);
+              state.updateSettings({ voiceMode: isEnabled });
+            }}
           />
         </Flex>
       </FormControl>

src/helpers/voiceControl.ts

@@ -44,7 +44,7 @@ class VoiceControlManager {
     }
   }
 
-  public startListening = (): void => {
+  public startListening = async (): Promise<void> => {
     if (!this.recognition) {
       console.error("Speech Recognition is not initialized.");
       return;

src/pages/content/domOperations.ts

@@ -8,6 +8,7 @@ import { drawLabels, removeLabels } from "./drawLabels";
 import ripple from "./ripple";
 import { getDataFromRenderedMarkdown } from "./reverseMarkdown";
 import getViewportPercentage from "./getViewportPercentage";
+import { injectMicrophonePermissionIframe } from "./permission";
 
 export const rpcMethods = {
   getAnnotatedDOM,
@@ -19,6 +20,7 @@ export const rpcMethods = {
   removeLabels,
   getDataFromRenderedMarkdown,
   getViewportPercentage,
+  injectMicrophonePermissionIframe,
 } as const;
 
 export type RPCMethods = typeof rpcMethods;

src/pages/content/permission.ts

@@ -0,0 +1,8 @@
+export const injectMicrophonePermissionIframe = () => {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("hidden", "hidden");
+  iframe.setAttribute("id", "permissionsIFrame");
+  iframe.setAttribute("allow", "microphone");
+  iframe.src = chrome.runtime.getURL("/src/pages/permission/index.html");
+  document.body.appendChild(iframe);
+};

src/pages/permission/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Request Permissions</title>
+    <script type="module" src="./requestPermission.ts"></script>
+  </head>
+  <body>
+    <!-- Display loading or informative message here -->
+  </body>
+</html>

src/pages/permission/requestPermission.ts

@@ -0,0 +1,35 @@
+/**
+ * Requests user permission for microphone access.
+ * @returns {Promise<void>} A Promise that resolves when permission is granted or rejects with an error.
+ */
+export async function getUserPermission(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // Using navigator.mediaDevices.getUserMedia to request microphone access
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((stream) => {
+        // Permission granted, handle the stream if needed
+        console.log("Microphone access granted");
+
+        // Stop the tracks to prevent the recording indicator from being shown
+        stream.getTracks().forEach(function (track) {
+          track.stop();
+        });
+
+        resolve();
+      })
+      .catch((error) => {
+        console.error("Error requesting microphone permission", error);
+
+        // Handling different error scenarios
+        if (error.name === "Permission denied") {
+          reject("MICROPHONE_PERMISSION_DENIED");
+        } else {
+          reject(error);
+        }
+      });
+  });
+}
+
+// Call the function to request microphone permission
+getUserPermission();

vite.config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
         content: resolve(pagesDir, "content", "index.ts"),
         contentStyleGlobal: resolve(pagesDir, "content", "style.global.scss"),
         contentStyle: resolve(pagesDir, "content", "style.scss"),
+        permission: resolve(pagesDir, "permission", "index.html"),
         // TODO: current cannot support multiple content script entry files
         // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/306#issuecomment-1981885190
         // mainWorld: resolve(pagesDir, "content/mainWorld", "index.ts"),