Web Resource
Web resources allow you to include JavaScript and CSS resources into certain contexts, for example:
In Jira - the view issue page, or admin pages
In Confluence - blogposts or the editor
- In BitBucket - the pull request view page or create new repository page
You can read more about web resource modules for Jira and Confluence.
Setup
Web resources need to be loaded from a plugin or a specified directory. 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 use the scripts directory, you can modify your setenv.sh
(or.bat
) script with the following code:
cssJVM_REQUIRED_ARGS='-Dplugin.resource.directories=/app/home/scripts -Dother.properties...'
You can provide multiple comma-separated directories. Then, the resource loader searches the directories, in order, until it finds a matching file.
Reloading
There is no negative performance impact to adding resources. When the resource is found, it is cached.
This 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, update, and then hard refresh in your browser.
This is not the case when running with -Datlassian.dev.mode=true
, in which case reloading should work. This 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 . 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:
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
.
Injecting JavaScript into a Specific Context
You can inject JavaScript into a specific context. The example below shows how to log to the console when accessing admin pages.
- Copy and paste the snippet below in a text editor.
console.log('Javascript in admin page context')
- Save the text editor file as
console-log.js
under one of the directories you have defined as a resource director inplugin.resource.directories
. - Go to Admin > Script Fragments > Install Web Resource.
- Configure the form to look like this:
- Click Preview to see your valid result, which you can see in the above image.
If you receive an error, make sure the file name and provided Resource name is the same.
Result: As you can see in the image below, the console shows the message JavaScript in admin page context
after accessing an admin page.
A more complicated example would be to wire up the buttons of a custom dialog using a Javascript resource.