1

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?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for the reply. Can you say a bit more about what you mean with serializing all the files in locales? From what I can see, there is no locales folder. There is a l10n folder, is that what you mean? Also, if I want to make my own custom viewer and not use the viewer.html, do I still need to worry about that? Is the localization used by pdf.js or by viewer.js?
@DonRhummy There's a "locale" directory in build/generic/. If you want to use your own viewer, only pdf.js is needed. You can throw away all "web" things..
I saw your coment to @SergeyShevchenko and wanted to double check: when I pass the url to PDFDocument (or whatever class I need to instantiate), I pass it like path/to/file.pdf not path%2fto%2ffile.pdf, correct?
@DonRhummy Yes. Url-encoding is only needed if you pass the parameters via the query string. The relevant source for the parameter parsing is found here (as you can see, it's specific to viewer.js; you said that you were using a homebrew viewer, so this comment is not relevant to you.).
@DonRhummy You can get an absolute URL of a resource within your Chromium App with chrome.runtime.getURL
|
0

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.

Improve this answer

1 Comment

path%2Fto%2Ffile.pdf is the URL-encoded version of path/to/file.pdf. It does not have to be a relative URL, it can also be absolute, as long as the page has the permission to access the URL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.