How to use AudioContext
Hey hopefully this is the right place to add this. My Company is moving over our chrome extension, which was built with just raw javascript, to using Plasmo.
In our ext we are using the AudioContext from the WebAudio API. I was wondering how I can get access to this in the background.ts file? It keeps showing undefined not sure if I need to import something into the file? thanks
How I'm calling it:
var context = new AudioContext();
18 Replies
@mromero1591
In your previous extension, were you using mv2 and which context were you calling AudioContext from? Was it background page?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
So the one limitation when transitioning to MV3 is that background service worker now uses "Service Worker" runtime, thus it does not have web API
the service worker runtime is very similar to the Edge runtime (if you're familiar with Cloudflare or Vercel Edge, in fact SW predated those runtime, it's just being deployed to all the edge node now cuz it's super cheap lol)
and the reason why it's cheap is bc it's very low memory overhead - there's no web API exposed in this service worker runtime. if you need any, you will have to bring a polyfill over
OR use a sandbox page and spawn it in the background popup instead
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yup, in Plasmo we polyfill the most basic node native module (process, os, zlib, etc...) with browserify, so you can likely plop in a nodejs AudioContext polyfill for nodeJS, and it should work IMO
but better yet, I think if you wanna upgrade your overall infra with webaudio, try out the AudioWorklet API - it's a worker dedicated to audio processing, and you can spawn it from your pages. I'm not sure if BGSW can spawn a worklet tho, so that's something to experiment with. But we were able to spawn normal WebWorker from popup to run a zig wasm binary
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
GitHub
Allow workers & shared workers to be created within a service worke...
Update (2022/10/10): This issue was originally making the case for workers and shared workers to be creatable by service workers to enable a chrome extension use case. Since extensions are not part...
So apparently you can't spawn worker from Service Worker ....
https://bugs.chromium.org/p/chromium/issues/detail?id=1219164
Oh wow that's @Yes_Taco who raised the original issue lol
@mromero1591 what's the user-flow that lead to the spawning of the AudioContext for your extension?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
ooh then you might be fine - spawn the webworker right from the popup OR spawn a sandbox page from your background service worker
basically
open a separate windows and use it to emulate the old "background page" behavior
the UX will be a bit clunky for user but you can justify it by adding some UX on the sandbox page to show maybe progress or some thing like a recording preview maybe
or yeah, just a simple audiometer
Then, you can leverage that sandbox page to spawn any web API you like
A bit related to this: https://github.com/PlasmoHQ/plasmo/issues/276
GitHub
[RFC] Better than Chrome Apps · Issue #276 · PlasmoHQ/plasmo
How do you envision this feature/change to look/work like? Chrome apps looks mostly like chrome extension, so a chrome app's project could be created by plasmo as it is now. What is the pur...
I haven't play around with this yet, but will do it in an experiment next month
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
docs on sandbox page: https://docs.plasmo.com/framework/sandbox-pages
Plasmo Docs
Sandbox Pages – Plasmo
Using sandbox pages with Plasmo to create secure context pages for browser extensions.
yeet you're welcome!
Sorry, this is not entirely related but where do you launch chrome.tabCapture.capture()? It seems that it can only work on popup but I could not find how to do that. It still doesn't work for me. Where did you set it up?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yes tabCapture is enabled but I need to have a better look at it. Thanks a lot for send this one. It might help.