How to use pdf.js library in a firefox addon?

Question

I'm making a Firefox add-on extension to insert a pdf document in the translated page of Google and I want to use pdf.js. Don't want to use embed or iframe tags to do it, I want to do my own pdf viewer. I'm trying to use the pdj.js library in a Firefox add-on, but it not work. I have already tried to do it adding this in manifest.json.

    "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["script.js","pdf.js"]
    }
   [enter image description here][1] ]

but when I do:

pdfjsLib.getDocument(pdf_url);

it not working, the script stop working.

I do try to add the script in the head of the page doing

var pdf_js = document.createElement('script');
pdf_js.src = 'https://mozilla.github.io/pdf.js/build/pdf.js';
document.getElementsByTagName('head')[0].appendChild(pdf_js);

and it does not work either. But when I use pdfjsLib from debug console in Firefox it works, but from the script that I use for the addon, pdfjsLib.getDocument function it not working.

I had a similar problem when I used jQuery, the library does not work in the script.

I tried watching the navigation console as suggested by Jaromanda X and I got this

ReferenceError:

pdfjsLib is not defined

when you say that the script stops working is there an error/log that you are receiving and would be relevant to show here? — TsTeaTime, May 04 '19 at 06:28
`but it not work` ... `it not working` ... `does not work either` ... yes, we get it doesn't work - check the browser console (Ctrl+Shift+J) - you'll see any errors your addon produces in there — Jaromanda X, May 04 '19 at 06:29

score 0 · Answer 1 · answered May 08 '19 at 17:17

I solved the problem. The problem was that the manifest.json in the "content_scripts", in "js", the order of scripts was is bad..

I had first and this not work because script.js (the addon script) is before that pdf.js

   "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["script.js","pdf.js"]
    }

the correct way is.

   "content_scripts": [ 
    {
      "matches":["*://translate.google.com/*"],
      "js": ["pdf.js","script.js"]
    }

in case of use Jquery, should are before of script.js too

 "js": ["jquery.min.js","pdf.js","script.js"]

score 0 · Answer 2 · edited Jul 03 '19 at 12:55

0

I solved it by adding the following line:

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

edited Jul 03 '19 at 12:55

4b0

21,981
30
95
142

answered Jul 03 '19 at 12:40

Roland Köhler

1
1

How to use pdf.js library in a firefox addon?

2 Answers2