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() . 'styles.css');

Using Various JavaScript Libraries

The Plesk’s JavaScript framework is Prototype.

If you need to load additional libraries and use them globally, on all pages, you can do this directly in global.js, for example:

$$("head").first().insert(
    new Element("script", {type:"text/javascript", src:"//example.com/example.js"})
);

If you only need a different library for your extension, include it as follows:

$this->view->headScript()->appendFile(pm_Context::getBaseUrl() . 'library.js');

or, using a full path:

$this->view->headScript()->appendFile('//example.com/example.js');

Remarks

Use of global.js and global.css

Keep in mind that the code in global.js is loaded and executed on every Plesk page. Take care not to compromise overall Plesk performance with added custom code.

Tips for developers:

  • This approach may be most useful for server-wide extensions, where the extension’s functionality affects most or all Plesk interface pages.
  • Avoid adding code that is relative only to the extension pages to global.js and global.css files. Instead, use the custom files’ inclusion.
  • Avoid including requests to external resources that take too long to complete, as this will slow down all Plesk pages loading.

Testing tips:

  • Check performance and page loading times for both: Plesk interface pages and extension’s pages.
  • global.js can be the place for possible conflicts among the JavaScript libraries used by the extension and libraries used by other extensions.
  • Check browser console/logs for JavaScript errors.

Avoiding Collisions in Naming

Add the extension’s name as a prefix to class names/variables/namespaces to differentiate them from Plesk or other extensions’ names/variables/namespaces. Failing to do so may cause naming collisions, and result in unforeseen errors that are difficult to localize and correct.

Library Licensing

Contact your legal to verify that JavaScript library license used by extension allows commercial use if your extension requires paid license to work - as it may contradict with library license and result in legal actions.