Web resources allow you to include JavaScript and CSS resources into certain contexts, for example:

You can read more about web resource modules for JIRA and Confluence.

Setup

Web resources need to be loaded either from a plugin, or from specified directories. You can provide a list of directories using the system property plugin.resource.directories. It makes sense to use the default scripts directory, which is automatically created in your application "home" directory.

If you do this you can modify your setenv.sh (or .bat) script like so:

JVM_REQUIRED_ARGS='-Dplugin.resource.directories=/app/home/scripts -Dother.properties...'

You can provide multiple, comma-delimited directories if you want, in which case the resource loader will search them in order until it finds a matching file.

Reloading

There is no negative performance impact to doing this…​ when the resource is found, it is cached.

Which means that you cannot change your resource and have it instantly reloaded. After changing the resource, you need to edit the web-resource item in the UI, and update, then hard refresh in your browser.

This is not the case when running with -Datlassian.dev.mode=true, in which case reloading should just "just work". Which means you should work on your web resources in a dev environment, then transfer them to your production environment when you are finished.

Modifying CSS

Let’s take as an example the task of modifying the CSS only on blog posts . A better example would be to wire up the buttons of a custom dialog using a JavaScript resource but let’s start simple.

Go to Admin → Script Fragments → Install Web Resource. Configure the form to look like this:

web resource

Clicking Preview or Update will give you an error at this point, as you have not yet created the resource: test-resources/red-blogposts.css.

In a text editor, create this directory and file under one of the directories you have defined in plugin.resource.directories…​ if you took the advice above then this would be <app.home>/scripts. Enter the contents:

body {
    color: red !important
}

Now return to the page and click Update. If you still get an error make sure you also create the directory test-resources.

Now create a new blog post.

It should look like this once you save it (note that there are different web resource contexts for editor and preview):

red blog post

How attractive.

For how-to questions please ask on Atlassian Answers where there is a very active community. Adaptavist staff are also likely to respond there.

Ask a question about ScriptRunner for JIRA, for for Bitbucket Server, or for Confluence.