ExpressionEngine add javascript to CP head

Question

I have been struggling with this for a while now and am stuck I am writing an extension for ExpressionEngine 2 (not a module) and need to add a script tag to the header of the page.

I have tried:

$script = "<script type='text/javascript'>alert('added');</script>";
$this->EE->cp->add_to_head($script);

but im guessing this only works when its a module, i have also tried (which i am pretty sure should work):

$this->EE->cp->load_package_js('file');

but i get the following error:

Call to a member function plugin() on a non-object in expressionengine/libraries/Cp.php on line 766

I have also tried using the hook cp_js_end which loads the file but its loaded after everything else thus it does not work as intended.

Any Ideas?

EDIT

After playign around with this it looks as if you can only use $this->EE->cp->load_package_js('file'); for modules and not extensions.

I will close this issue

Answer 1

Loading assets within an add-on can be tricky if you don't know how to do it properly. For instance, your code is likely failing because it's relying the CP (control panel) to serve the assets. So, if the CP class is not instantiated, your code will fail.

I suggest you take a look at Theme Loader, my open source library I use for all my add-ons. It works very well, and it will automatically make your script with RequireJS too (an added bonus of using the Theme Loader abstraction). The best part about Theme Loader, is it makes it also compatible with the Master Config boostrap, and supports changing the default place to store the add-ons. For instance, if you move your stuff above webroot, Theme Loader automatically takes care of it.

https://github.com/objectivehtml/Theme-Loader

Make sure you do the following:

1. Make sure your add-on has a directory inside of "themes/third_party". Without this, your assets will fail to be served properly.
2. Make sure your add-on asset directly structure is correct, which should be at a minimum:
   • themes/third_party/your_addon
   • themes/third_party/your_addon/css
   • themes/third_party/your_addon/javascript

(Obviously if you don't need JS, don't include that directory. But this is the default structure Theme Loaders expects, so follow it and you will be good.)

Example Code

$this->EE->load->library('theme_loader');
$this->EE->theme_loader->module_name = 'your_module'; // Note, your addon doesn't have to be a real "module".

$this->EE->theme_loader->css('styles');
$this->EE->theme_loader->js('app');
$this->EE->theme_loader->output('alert("do something");');

Answer 2

Turns out that you cant load javascript in an extension as you would a module. The above worked fine in a module but errors are produced.

After speaking with a colleague it may be possible to do this with an Accessory hack.