reactjsgoogle-chromegoogle-chrome-extensionaudio-recordingrecordrtc

Request audio access with popup in chrome extension


Considering chrome extensions can't request audio permissions in the manifest.json, I have read that the best way to get permission is to open a pop up asking the user for audio access.

Despite extensive reading I haven't figured out a way to do this? Is there somewhere documenting requesting permission in this way?


Solution

  • I was able to fix this by opening a new tab after receiving an error callback when capturing the user's media. The function below details this:

    const captureUserMedia = callback => {
      navigator.mediaDevices.getUserMedia({ audio: true, video: false })
        .then(callback)
        .catch(err => {
          window.chrome.tabs.create({
            url: 'request-mic.html'
          });
        });
    };
    

    request-mic.html is just an html file with a script tag referencing the request-mic.js file that requests microphone permission in the tab. This request is remembered for the extension and you will now have microphone access!

    <script src="request-mic.js"></script>