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?