1

I am new to javascript and chrome extensions so please go easy on me

problem:

I have a chrome extension that currently deals with html pages- but I would also like for it to be able to handle online embedded PDFs when viewed in my chrome browser. Hence I am trying to gain access to the library pdf.js within my content script.

Based on previous posts: Chrome Extension | How to include library in content and background scripts from cdn

load in manifest

I have tried loading the library pdf.js in manifest.json:

"content_scripts": [
    {
      "matches": [
        "<all_urls>"
       ],
     "js": ["https://mozilla.github.io/pdf.js/build/pdf.js","content.js"]
    }

But when I load the chrome extension it results in the error 'cannot load manifest.json'.

load directly in content script

I also tried resorting to chrome.tabs.executeScript to load the library directly within the content script:

 chrome.tabs.executeScript(null,{
      file:"https://mozilla.github.io/pdf.js/build/pdf.js"
    });

However this results in the error: Error in event handler: TypeError: Cannot read property 'executeScript' of undefined at gotMessage

current setup

Currently my chrome extension is set up as follows: The popup has a bunch of tick boxes and input fields that will generate data and this will be sent, via a background script, to the content script to inform it how to behave.

possible solution

I would like to add a 'tickbox' that implements notifies that the loaded document is a PDF. With this I can use an if statement in the content script to treat content page as a pdf and load the pdf.js library.

popup

  <input id="check_id" type="checkbox" />

background

  $(function(){
  if ($('#check_id').is(":checked")){
    console.log('checked');
    var msg = {pdf:'yes'}
}else{
    var msg={pdf:'no'}
}
chrome.tabs.query({currentWindow: true, active: true}, 
                   function (tabs) {
                     chrome.tabs.sendMessage(tabs[0].id, msg)
         });
 });

content

  chrome.runtime.onMessage.addListener(gotMessage);

  function gotMessage(message, sender, sendResponse) {
  if(message.pdf==='yes'){
      chrome.tabs.executeScript(null, 
       {file:"https://mozilla.github.io/pdf.js/build/pdf.js"
       });
       PDFJS.getDocument('link to online embedded pdf').then(doc =>{
       console.log("this is"+ doc._pdfInfo.numPages);
       }else{
       // treat as normal HTML page
       }
   }

overall question

Hence does anyone know how to correctly load an external library in the content script and subsequently use it?

Chris
  • 320
  • 2
  • 10
  • You can only specify files within the extension package in `content_scripts` or executeScript. – wOxxOm Jul 19 '19 at 11:28
  • @wOxxOm hi thanks for your comment. I am confused. Do you mean that I should download the file: `https://mozilla.github.io/pdf.js/build/pdf.js` to the directory where my chrome extension is contained and then call it as `"js": ["pdf.js","content.js"]`? – Chris Jul 19 '19 at 14:08
  • 2
    Yes, of course. It's a `file` after all, not an `url`. – wOxxOm Jul 19 '19 at 14:39

0 Answers0