javascriptjquerygoogle-chrome-extensionbrowser-extensioncrossrider

Crossrider external js file not loading :PDFJS is not defined


Below are my codes in extension.js. If you look at the codes, I tried different ways to load the file to my extension. No matter what, I always getting

VM3051:15 Uncaught ReferenceError: PDFJS is not defined

Tried with putting the file in different locations.

appAPI.ready(function($) {
  console.log("pdf min js loading");
  appAPI.resources.includeJS('jspdf.js');
 // appAPI.resources.includeJS('js/jspdf.js');
// appAPI.resources.includeRemoteJS('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js');
 //$.globalEval(appAPI.resources.get('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js'));
 console.log("done");
    setTimeout(function(){
        alert(window.location.href);
    if(window.location.href.indexOf(".pdf") > -1) {
        console.log("its a pdf");

        alert("pdf");
        var doc = new jsPDF();

    }else{
    alert($.trim($('div').find('h1,h2,h3,h4,h5,p,span').text()));
    }

    },6000);
});

Here is the file structure

enter image description here

I cannot modify manifest.json because the extension should be unique for all the browsers not just for chrome.


Solution

  • I'm confused, the two CloudFlare URLs in your code reference the project jsPDF. I would assume the local pdf.js does the same too.

    In your code, you're using

    PDFJS.getDocument();
    

    This syntax comes from PDF.js which is a totally different project from Mozilla.

    If you're sticking with jsPDF, your code should be something like:

    var doc = new jsPDF();
    doc.text(20, 20, 'Hello world.');
    doc.save('Test.pdf');
    

    Or you'll need to include the correct library for PDF.js.

    After the edits you've made and your comments, it seems you've switch completely over to jsPDF but you're still getting the same error which clearly mentions PDF.js.

    Are you sure you're debugging the correct and last version of your app which is only using jsPDF?

    I've setup a small reproduction example on Crossrider using only jsPDF.

    Project structure

    The extension.js code is the following:

    appAPI.ready(function($) {
      console.log("pdf min js loading");
    
      appAPI.resources.includeJS('jspdf.js');
    
      console.log("done");
    
      var doc = new jsPDF();
    
      console.log(doc);
    });
    

    When debugging the extension, I'm getting this result:

    Output

    doc is an object containing an instance of jsPDF which I can later use.

    There should be no mention of PDF.js whatsoever. My only guess could be that you're running / debugging a version of your extension still containing references to this project.