How to use PDF.js to load file included in web app (not from "file:" URL?

Question

I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:

1. Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)

2. Be able to show PDF files that are inside my myapp.crx file

3. Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?

Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?

Answer 1

1. node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
   "build" contains "pdf.js", which is the actual PDF engine.
   "web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.

2. After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf

3. PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.

There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.

Answer 2

Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:

'myfiles/pdfs/example.pdf'

With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.