Build your own Chrome Extension to control Jenkins Jobs

We @ Via ❤ Jenkins and use it for just about everything.
From Testing, Production Deployments and Android builds to Configuration management. While it justly earned its’ status as a proverbial Swiss knife in the IT world, it’s not a secret it is not the friendliest nor the easiest to navigate tool for newcomers in the organization. For those of us who require a simpler and more straight forward tools to handle their tasks, we developed a few Chrome Extensions that trigger and control a more complicated Jenkins Jobs and Pipelines. One of those tasks is setting up our platform on a Kubernetes based back end clusters. Since Via operates in about 40 (and counting) cities worldwide, almost each back end build requires a somewhat different set of toggles and variables to operate correctly. The process of building such platform from Jenkins can be a daunting task for newcomers and Via veterans alike which necessitated an easier solution. Enter “Bob The Builder”, a friendly Chrome Extension that eliminates much of the clutter and allows a simple selection of a platform we want to build, accompanied by a very short list of buttons and text inputs to finish up the desired build configuration for the server.

The solution architecture is very simple:

So how do we create a Chrome Extension which allows us to control a Jenkins Job?

Fairly easily, even if you are a JavaScript and Python beginner.

Here are some prerequisites we gonna need for this tutorial:

1. Have a Jenkins instance you have an admin rights to or build one up. Should be easy enough using one of the following tutorials
2. Set up an API user with a password on Jenkins. Write the credentials somewhere safe, as we are going to need them later.
3. Set up a new “Freestyle Project” job. Let’s name it something like “chrome_extension_job”
4. Mark this project as being parameterized under the General tab.
5. Add to this job 3 string parameters under General tab. The parameters would be:
   CITY_NAME, COUNTRY_NAME, COUNTRY_LANGUAGE

6. Under Build Environment add an Execute Shell just to make sure all the parameters we sent out from the Extension arrived safely after being processed in the Web Service.

Add the following shell command that simply echoes the received parameters:

echo The city that was sent in the request is: $CITY_NAME which resides in $COUNTRY_NAME and people there speak $COUNTRY_LANGUAGE!

7. Create a new Python 3.7 project with an accompanying virtual environment.

That is all, we are ready to roll!

The nitty gritty parts

Our solution has 2 parts. The Chrome Extension part will be written in HTML/JavaScript and the Server app will be written in Python with the wonderful Flask library and the super friendly Jenkins library for Python. The whole code is here in this repository, you can just clone it and hit the road, though I am encouraging you to dive deeper with me and get to know this helpful tool. Here we go.

Python/Flask part

The Python server is fairly simple; It contains a simple Flask server with one endpoint. The endpoint receives a POST request with an attached JSON from the Chrome Extension, and will start a small process of extracting some additional parameters before forwarding a request to the Jenkins server.

Boilerplate

Here’s the boilerplate code before we start digging deep into the process:

What we do here is the following:

• Importing all the libraries we gonna need for our project and also import the configuration fetcher that we’ll get into a bit later.
• Fetching the configurations for the Jenkins operation including our Jenkins URL, Job name, User and of course, Password.
• Defining the success message that we’ll send out if we succeeded or the failure message, if we unfortunately fail.
• Initiate the Flask service.
• Initiate the Jenkins server object that we will later use to send the commands to.

Configuration parts

In order to keep our work clean, we are going to create a confiuguration.py file, to handle all the sensitive configuration parts. In this file we handle fetching the configurations and an app_config.yml file which includes all our credentials, URLs and job names.

The configuration.py file shall looks something like this:

These lines open the app_config.yml file, parses the parameter name and returns its value to the requesting function.

The app_config.yml file is actually as simple as it looks:

get_language and get_country functions

This code returns the language and the country name of a specified city and it allows us to get the parameters needed for the Jenkins job:

Endpoint request code

The code for the endpoint request looks something like this:

And here’s a breakdown of what happens:

• The received POST request is processed.
• The city_name parameter is extracted from json
• The country_language and country_name parameters are extracted from get_language() and get_country() functions
• Jenkins library fires a request to our Jenkins server with the following parameters:
• CITY_NAME, COUNTRY_NAME and COUNTRY_LANGUAGE
• If the request succeeds we get a success message. If not, we get a failure one.
• The bottom part includes the app’s entry point with the flask definition of the operating part and the debug status.

Requirements

Last, but not least… The requirements.txt should look like this:

The Chrome extension code

Our Chrome extension is very bare bones so I hope I’ll be able to explain what I have done.

First of all, here’s a short tutorial on what Chrome Extension is.

The extension code includes 5 files, which are:

• jenkins.png -> the icon file for the extension
• jquery-<x.x.x>.js -> the jquery library we’ll use for our project. Can be embedded remotely but let’s do it locally for this tutorial. The file can be downloaded from here
• manifest.json -> This JSON has all our extension’s configurations in order to work on Chrome.
• popup.js -> This is the file where the actual logic of our extension resides.
• popup.html -> This file has the HTML markup of the extension.

The HTML part -> popup.html

This part is rather simple and it includes a dropdown selector with 5 cities and a trigger button:

Extension’s configuration -> manifest.json

The manifest.json is a mandatory file for any Chrome Extension and it defines everything Chrome needs to know before it attempts to run it. It contains all the file names we included in the project and versioning

The JavaScript part -> popup.js

This code simply checks the selected city in the dropdown box and sends it out as a POST request inside a JSON object to further processing in the Python server we run in IDE/Command line

The extension icon -> jenkins.png

This is simply a png icon that will appear after installing the extension in Chrome. You can use this one

Chrome extension installation.

This one is rather simple and explained well here

And that is all! After finishing the installation you should see the little Chrome logo in the extensions pane in your Chrome.

Testing!

Now the fun part begins!
Click on the extension and verify you have a choice between 5 selectable cities.
Select one and press on Click Me! button

Next, let’s connect to our Jenkins UI and see whether we successfully triggered the test job using the extension.

Go to the chrome_extension_job we created, select Console Output and look for the following:

If you find this in the output, congratulations! You just made your first Chrome extension to control Jenkins!

The city that was sent in the request is: New York City which resides in the USA and people there speak English!

That is all! If you have any problems, please feel free to ping me in the comments.

The full code can be cloned from here:

Cheers and happy coding!