1

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

Yogort
  • 99
  • 1
  • 9
  • I don't know anything about Chrome extensions, but I would wonder whether appending a ` – Kevin Workman Dec 21 '19 at 02:46
  • 1
    Content scripts run in an "isolated world", but a DOM script element runs in the page context so they can't see each other. Your first note describes the correct approach so it's what you should do. What exactly "didn't work" there? Either edit this question or maybe open a new question with an [MCVE](/help/mcve). – wOxxOm Dec 21 '19 at 05:07

1 Answers1

-2

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!');};
user4723924
  • 15
  • 1
  • The real problem is that the content scripts run in an "isolated world", but a DOM script element runs in the page context so they can't see each other. – wOxxOm Dec 21 '19 at 05:08