In this example, once extensions are enabled (see Step 2 above), you can add some custom CSS and JavaScript code to change the menu label font color and print text to the JavaScript console.
You will create three files; custom.css, custom.js, and index.html.
Step 1.
Locate index.html, which you created in step 4 above.This is where you will be placing your extension files, creating an entry point:
<!-- Define the link to the external style sheet -->
<link href="client/custom.css" rel="stylesheet">
<!-- Define the external JavaScript file -->
<script src="client/custom.js"></script>
Step 2.
Change the default black menu labels to orange:
Create custom.css to change the color to orange:
/* Change link text to Orange */
a span {
color: #ff5d28;
}
Step 3.
Create custom.js to send text to the JavaScript console:
//Print message to the JavaScript console
console.log('Hello World!');
Step 4.
When the files are in place, <install_dir>/sessionserver/microservices/zfe/extensions/client/index.html, the results should look like this:
And the “Hello World” text is visible in the JavaScript console: