Chrome extension for YouTube

[BickleNack]

Hi everyone, I'm wondering if it's possible to integrate wavesurfer into a chrome extension? Essentially I'd like to generate an audio waveform for a youtube video directly beneath it. I have the extension set up and a div inserted and ready to go but I can seem to get it to work even when using a local file to test that it is rendering properly when given a source. Any ideas here would be great.

[entonbiba]

@BickleNack it would depend on if you have the source url of the video as audio format to render it. You can try using the following project which uses videojs and wavesurferjs combined for using videos as the source.
https://github.com/collab-project/videojs-wavesurfer

Regarding the chrome extension accessing local files, the user would need to provide access to do this for security reasons but you can try the following:
https://developer.chrome.com/articles/file-system-access/

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

[katspaugh]

AFAIR, a Chrome extension consists of three parts: a popup, a background script and a content script. You need the latter if you're planning to inject the waveform into the page. wavesufer.js downloads the media file via XHR, so that might be an issue on YouTube because of streaming and CORS.

That said, I don't see why wavesurfer.js wouldn't work in an extension. It's just like any other browser JS. Just not with Youtube videos for the above reason.

[BickleNack]

Helpful! Thank you.

I was able to basically set everything up but you are correct that the streaming/CORS issues make this challenging.