# Add javascript to a theme component
**URL:** https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480
**Category:** Development
**Created:** [May 23, 2020, 7:36pm UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480 "2020-05-23T19:36:57Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 23, 2020, 7:36pm UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480/1 "2020-05-23T19:36:58Z")
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?
---
### Author:  [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 24, 2020, 7:54am UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480/2 "2020-05-24T07:54:45Z")
Got it working. Just added the JS (not minimized) into the common/header.html.
See [discourse-highlight-text/common/header.html at master · sbernhard/discourse-highlight-text · GitHub](https://github.com/sbernhard/discourse-highlight-text/blob/master/common/header.html)
Would be good if someone could document this behavior to the theme /component developer guide.
---
### Author:  [@Amethi](https://meta.discourse.org/u/Amethi)
#### Post date: [June 17, 2020, 12:10pm UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480/3 "2020-06-17T12:10:41Z")
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.
---
### Author:  [@Amethi](https://meta.discourse.org/u/Amethi)
#### Post date: [June 17, 2020, 12:19pm UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480/4 "2020-06-17T12:19:39Z")
Oh, think I answered my own question via [Content security policy | Articles | web.dev](https://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful)
---
### Author:  [@fzngagan](https://meta.discourse.org/u/fzngagan)
#### Post date: [June 17, 2020, 4:08pm UTC](https://meta.discourse.org/t/add-javascript-to-a-theme-component/152480/5 "2020-06-17T16:08:18Z")
Check `loadScript` in the codebase/meta for a systematic way to achieve this.