Adjust pages by JavaScript and CSS

In your extension, you can adjust Plesk functionality and appearance by
means of JavaScript and Cascading Style Sheets (CSS). These technologies
enable you to do a variety of customizations to the Plesk interface, for
example, adding new GUI elements and hiding existing ones.

Global Adjustments to Plesk UI

To make Plesk load your JavaScript or CSS code on every page of Plesk,
put the code in the files global.css and global.js inside the
/htdocs directory.

Adjusting Selected Pages

To load the code only on certain pages, use a construction like the
following:

if ("/smb/file-manager/list" != window.location.pathname) {
      return;
}

Adjusting Only the Extension Pages

To include JavaScript and CSS only on your extension’s screens, use the
following approach:

1. Create separate files (for example, custom.js and custom.css)
   and place them in the /htdocs directory,

2. Where necessary, load these files in appropriate controllers as
   follows:

   $this->view->headScript()->appendFile(pm_Context::getBaseUrl() . 'custom.js');
   $this->view->headLink()->appendStylesheet(pm_Context::getBaseUrl() <span…