FEATURE: Load the plugin in all modules with Neos 8.3 and prevent duplicate registration

Author: Sebobo

Configuration/Settings.Neos.yaml

@@ -33,7 +33,17 @@ Neos:
               - 'UI.NodeVariantCreationDialog.createAndCopy'
               - 'CR.Nodes.unfocus'
 
+    moduleConfiguration:
+      # This setting will register the plugin with all backend modules which is only supported in Neos 8.3+
+      additionalResources:
+        javaScripts:
+          Shel.Neos.CommandBar: 'resource://Shel.Neos.CommandBar/Public/Module.js'
+        styleSheets:
+          Shel.Neos.CommandBar: 'resource://Shel.Neos.CommandBar/Public/Module.css'
+
     modules:
+      # These settings are for Neos 8.2 and below as the global additionalResources setting is not supported yet
+      # A check in the plugin code will prevent the plugin from being loaded twice
       administration:
         submodules:
           users:

packages/module-plugin/src/index.tsx

@@ -8,10 +8,14 @@ if (process.env.NODE_ENV !== 'production') {
     require('preact/debug');
 }
 
-// Register & add the debug web component, tagName and attributes are automatically read from the component
-register(App, null, null, App.options);
+function initializeApp() {
+    // Prevent registering the custom element twice
+    if (window['SHEL_NEOS_COMMANDBAR_INITIALIZED']) return;
+    window['SHEL_NEOS_COMMANDBAR_INITIALIZED'] = true;
+
+    // Register & add the debug web component, tagName and attributes are automatically read from the component
+    register(App, null, null, App.options);
 
-window.addEventListener('neoscms-i18n-initialized', () => {
     // Get the top bar left container and create a custom element to render the command bar into
     const topBarLeft = document.querySelector('.neos-top-bar-left');
     const pluginContainer = document.createElement('command-bar-container');
@@ -24,4 +28,11 @@ window.addEventListener('neoscms-i18n-initialized', () => {
     pluginContainer.setAttribute('styleuri', commandBarStyleTag.href);
 
     topBarLeft.appendChild(pluginContainer);
-});
+}
+
+// If the api is already initialized, initialize the app as the event listener wouldn't be called anymore
+if (window.NeosCMS?.I18n?.initialized) {
+    initializeApp();
+} else {
+    window.addEventListener('neoscms-i18n-initialized', initializeApp);
+}