PDF.js library pane and creating a Panel Extension?

I brought PDF.js javascript and viewer.html and the ability to jump to a specific page into Panel by just hacking it into a HTML pane.

I’m looking to do some custom pdf javascript interactions that take you to a specific coordinates within the page. I have the PDF.js custom javascript working with PDFViewerApplication.pdfViewer.container.scrollTop to go to the coordinates outside of panel. But, now that I’m in Panel I need to get a reference to the Shadow DOM and the iFrame down in the HTML pane; and realizing now that I probably should be building a Panel extension for PDF.js. I found the Awesome Panel Extension documentation and the WebComponent, I was considering trying to use that as a template to create this PDF.js pane/widget. Just want to confirm that I am on the right path, and ask if there are any things I should be looking into to help with this.


I’m addressing this question first with modifications to the custom viewer.html in PDF.js. Getting comfortable with the PDF.js javascript code and events before (for if/when) I pursue a custom Panel extension.

This demonstrates what I have so far:

If you are new to javascript and typescript then I would recommend using the ReactiveHTML component.