Client Side Extensions for Web Resources

In places where Bitbucket supports Client Side Extensions (CSE), you can use web resources to install CSE plugins for required locations.

To check where on the page there are supported extension points for CSE, add ?clientside-extensions to the page URL address parameter.

Example: Add link to Google search the pull request name on the PR page

In this example, we add Search Branch Name to the right side of the PR page. When you select Search Branch Name, a Google search page with the branch name is opened.

1. Choose which version of CSE you need to use for your Bitbucket instance to copy and paste the code into a text editor:

   • CSE version 1.x API.
     If you want to learn more, please refer to the documentation: https://developer.atlassian.com/server/framework/clientside-extensions/reference/api/extension-points-v1-deprecated/  
     

     js
     AJS.toInit(() => {
         console.log('Client Side Extension registration')
     
         const LOCATION = 'bitbucket.ui.pullrequest.overview.summary'
     
         const registerPlugin = (registry, extensionPlugin) => {
             /*unsafe operation, but required in CSE 1.2,
             not needed in CSE 2.x in which plugin can passed as 3rd argument to registerExtension)
             */
             registry.plugins.push(extensionPlugin)
             registry.locations[extensionPlugin.location].lastPayload.descriptors.push(extensionPlugin)
         }
     
         const getGoogleUrl = context => `https://www.google.com/search?q=${encodeURIComponent(context.pullRequest.title)}`;
     
         const buttonPluginFactory = (pluginAPI, context) => ({
             label     : 'Search branch name',
             type      : 'button',
             iconBefore: 'search',
             /*
                 https://atlaskit.atlassian.com/packages/core/icon under icon explorer "click show all icons".
                  Icon id it is icon name when camel notation is changed to kebab notation without postfix Icon: SearchIcon => search
              */
             onAction  : (args) => {
                 console.log('I was clicked!', args, context)
                 window.open(getGoogleUrl(context));
             }
         })
     
         require(['@atlassian/clientside-extensions-registry'], (registry) => {
             const key = 'com.adaptavist.bb:google-search-extension-plugin'
             const googleSearchExtensionPlugin = {
                 key,
                 location  : LOCATION,
                 label     : 'loading…',
                 weight    : 100,
                 params    : {},
                 attributes: {},
                 stylClass : "",
             }
     
             registerPlugin(registry, googleSearchExtensionPlugin);
             registry.registerExtension(key, buttonPluginFactory)
     
             console.log(`Client Side Extension registered for location: ${LOCATION} `, registry)
         })
     })

   • CSE version 2.x API.
     If you want to learn more, please refer to the documentation: https://developer.atlassian.com/server/framework/clientside-extensions/
     

     js
     AJS.toInit(() => {
         console.log('Client Side Extension registration')
     
         const LOCATION = 'bitbucket.ui.pullrequest.overview.summary'
     
         const getGoogleUrl = context => `https://www.google.com/search?q=${encodeURIComponent(context.pullRequest.title)}`;
     
         const buttonPluginFactory = (pluginAPI, context) => ({
             label     : 'Search branch name',
             type      : 'button',
             iconBefore: 'search',
             /*
                 https://atlaskit.atlassian.com/packages/core/icon under icon explorer "click show all icons".
                  Icon id it is icon name when camel notation is changed to kebab notation without postfix Icon: SearchIcon => search
              */
             onAction  : (args) => {
                 console.log('I was clicked!', args, context)
                 window.open(getGoogleUrl(context));
             }
         })
     
         require(['@atlassian/clientside-extensions-registry'], (registry) => {
             const key = 'com.adaptavist.bb:google-search-extension-plugin'
             const googleSearchExtensionPlugin = {
                 key,
                 location  : LOCATION,
                 label     : 'loading…',
                 weight    : 100,
                 params    : {},
                 attributes: {},
                 stylClass : "",
             }
     
             registry.registerExtension(key, buttonPluginFactory, googleSearchExtensionPlugin)
     
             console.log(`Client Side Extension registered for location: ${LOCATION} `, registry)
         })
     })
     
     

     In both examples LOCATION constant points to the place where the plugin is visible, so your plugin key must be unique.
2. Save the file as extension.js under web-resources/com.onresolve.stash.groovy.groovyrunner directory.
3. Go to Admin > Script Fragments > Install Web Resource. 

4. Configure the form to look like this: 
   

   The Context must be one of the supported CSE extension points.

5. Click Preview to see your valid result.
   

   If you receive an error, make sure the file name and provided Resource name is the same. 

6. Click Add or Update to save your listener.

Result: When you go to the PR page, Search Branch Name appears on the right side of the screen.