Extending Controller via "Component Configuration" (Older approach)

<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <!-- https://stackoverflow.com/a/67971791/5846045 -->
    <script id="sap-ui-bootstrap"
      src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_fiori_3"
      data-sap-ui-async="true"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatversion="edge"
      data-sap-ui-excludejquerycompat="true"
      data-sap-ui-resourceroots='{"demo": "./"}'
      data-sap-ui-loglevel="INFO"
      data-sap-ui-xx-componentpreload="off"
      data-sap-ui-xx-waitfortheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{"id": "rootComponent"}'
    ></div>
  </body>
</html>

sap.ui.define([], function() {
  "use strict";

  return {
    onInit: function() {
      alert("onInit from the extension");
    },

    onBeforeRendering: function() {
      alert("onBeforeRendering from the extension");
    },

    onAfterRendering: function() {
      alert("onAfterRendering from the extension");
    },

    onExit: function() {
      alert("onExit from the extension");
    },

    doSomething: function() {
      alert("Did something from the extension only, ignoring the base controller.");
    },
  };
});

sap.ui.define([
  "sap/ui/core/mvc/Controller",
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Main", {
    onInit: function() {
      alert("onInit from the base Controller");
    },

    onBeforeRendering: function() {
      alert("onBeforeRendering from the base Controller");
    },

    onAfterRendering: function() {
      alert("onAfterRendering from the base Controller");
    },

    onExit: function() {
      alert("onExit from the base Controller");
    },

    doSomething: function() { // will be overwritten by the extension.
      alert("Did something from the base Controller");
    },

  });
});

<mvc:View controllerName="demo.controller.Main"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true">
  <App autoFocus="false">
    <Page showHeader="false">
      <Button text="Do Something" press=".doSomething" />
    </Page>
  </App>
</mvc:View>

{
  "_version": "1.33.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui5": {
    "extends": {
      "extensions": {
        "sap.ui.controllerExtensions": {
          "demo.controller.Main": {
            "controllerNames": [
              "demo.controller.extension.CustomMain"
            ]
          }
        }
      }
    },
    "dependencies": {
      "minUI5Version": "1.92.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "rootView": {
      "viewName": "demo.view.Main",
      "id": "rootView",
      "type": "XML",
      "async": true,
      "height": "100%"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  }
}

sap.ui.define([
  "sap/ui/core/UIComponent",
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json",
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
    },

  });
});

For the newer approach, see [Extending Controller via "Controller Extension"](https://embed.plnkr.co/xnVMDtx8f2IgI91A?sidebar&deferRun&show=controller%2FRoot.controller.js,controller%2Fextension%2FDialog.js,preview:%3Fsap-ui-xx-componentPreload%3Doff).