Trouble adding third party libraries to chrome extension

Question

Problem

I am trying to add third party libraries to a chrome extension I am building. I am trying to dynamically add the script. I downloaded jquery and added it to the project. Then I tried to dynamically add p5.min.js and p5.dom.min.js using jquery.

• Errors arose.

Image of error message -- p5.dom.min.js is loaded, but p5.min.js is not?

Code

• In manifest.json:

  "js": [
                   "jquery-3.2.1.min.js", "content2.js"
              ],
  

• In content2.js:

  var script1 = document.createElement('script');
  script1.src = 'jquery-3.2.1.min.js';
  document.getElementsByTagName('head')[0].appendChild(script1);
  
  $('head').append("<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js'>");
  $('head').append("<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js'>");
  
  var s = function(sketch){
    //lotsa code.
  }
  
  
  var myp5 = new p5(s);
  

Notes

• I also tried downloading p5.min.js and p5.dom.min.js and adding it to the project and the manifest.json file directly, but that didn't work either
  • https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js
• I have also watched Daniel Schiffman (The Coding Train)'s videos on using p5.js in chrome extensions. When I try to mimic his videos, however, I still get errors.

Answer 1

You don't need jquery for this. Where's your...

 script1.type='text/javascript';

You may also want to consider...

 script1.async=true;

For instant testing you can also include...

 script1.onload=function(){alert('Script loaded!');};