Add javascript to a theme component

Is there a good way to add javascript (one file, minimized) to a theme component so that it can be used in common/header.html?

1 Like

Got it working. Just added the JS (not minimized) into the common/header.html.

See discourse-highlight-text/header.html at master · sbernhard/discourse-highlight-text · GitHub

Would be good if someone could document this behavior to the theme /component developer guide.

2 Likes

How did you use the JS in your component? I’m using the Versatile Banner component and want to add a button that calls my custom JS function. I’ve put in the head as you mention but get a CSP error:

dev.londonbikers.com/:1 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src https://dev.londonbikers.com/logs/ https://dev.londonbikers.com/sidekiq/ https://dev.londonbikers.com/mini-profiler-resources/ https://dev.londonbikers.com/assets/ https://dev.londonbikers.com/brotli_asset/ https://dev.londonbikers.com/extra-locales/ https://dev.londonbikers.com/highlight-js/ https://dev.londonbikers.com/javascripts/ https://dev.londonbikers.com/plugins/ https://dev.londonbikers.com/theme-javascripts/ https://dev.londonbikers.com/svg-sprite/". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

When calling my code via onclick="NavigateToCustomLoginUrl('facebook')" on a button.

Oh, think I answered my own question via An Introduction to Content Security Policy - HTML5 Rocks

2 Likes

Check loadScript in the codebase/meta for a systematic way to achieve this.

2 Likes