In an extension for google chrome, I specified a script that will run on the site I need.

This script should attach another script file to the page using the following option in the manifest

"web_accessible_resources": ["somescript.js"]

in the script this is the class. As a result, the script is connected like this

var functions = document.createElement('script'); functions.onload = function(){ let someObject = new SomeClass(document); someObject.doAnything(); }; functions.src = chrome.extension.getURL('somescript.js'); functions.type = 'text\/javascript'; document.head.appendChild(functions);

But it does not work. When functions.onload triggered, nothing happens and the console displays

Uncaught ReferenceError: SomeClass is not defined at HTMLScriptElement.functions.onload

That is, at the moment when functions.onload is executed, the context still does not know anything about SomeClass . And after that I can write in the console

 let someObject = new SomeClass(document); someObject.doAnything();

and everything works out fine. Maybe I need not an onload event, but some other one?

  • and what if to make function? After all, for good, you do not need to “wait” onload for the script to work (after all, at the time your script runs above, SomeClass should be already available, namely, called BEFORE from the list of scripts or above these lines). In general, you first try to call a class that is not yet connected (onload is triggered earlier than you appendChild). I think the answer is in the order of the calls. Those. try connecting a class higher than calling onload (although you don’t need it later) - alexoander
  • @alexoander, functions.onload is not a call, but a handler installation. In theory, the handler should fire when the resource is loaded. In games, pictures are loaded in the same way. - iRumba
  • The handler will work immediately in your case - alexoander
  • @alexoander, why? - iRumba
  • and yes - if you are using ES6, then when using strict, the environment itself will tell you that you do not have SomeClass declared, even taking into account the postponed call through the handler. - alexoander

1 answer 1

In fact, I said absolutely the same thing - there is no SomeClass in onload because you add it "after" the handler declaration ... forget about onload for a start. After adding somescript..js to the markup, someClass should be available everywhere. What essentially leads to the following -

 .... let functions = document.createElement('script'); functions.src = chrome.extension.getURL('somescript.js'); functions.type = 'text\/javascript'; document.head.appendChild(functions); // незачем onload если SomeText уже будет доступен после добавления в документ let someObject = new SomeClass(document); someObject.doAnything(); ....
  • Similarly. I receive Uncaught ReferenceError: SomeClass is not defined. This is not surprising, since the document.head.appendChild(functions); operation document.head.appendChild(functions); runs asynchronously. - iRumba
  • and since it is executed asynchronously (which I did not know in principle - thanks!), then it means that it should be managed as an asynchronous call through .then () and promise. Those. wait until the code is added to the site and only then we operate with a new class - alexoander