Can I add more than one SPFX extension - Application Customizer in one solution?

Question

I am trying to add more than one SPFX extension in my solution (Application customizer in this case - one for header another for footer) but after deployment I only see one extension in my site. Am I missing something here?

my elements.xml is:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="TopNavigation"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="819db51e-c5d7-447e-b4a8-3c8ae35681a3"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
    <CustomAction
        Title="Footer"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="6ea24ae1-1d36-464e-9330-a94c97134e76"
        ClientSideComponentProperties="{&quot;Top&quot;:&quot;Top area of the page&quot;,&quot;Bottom&quot;:&quot;Bottom area in the page&quot;}">
    </CustomAction>
</Elements>

and Config.JSON has entries:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "top-navigation-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/topNavigation/TopNavigationApplicationCustomizer.js",
          "manifest": "./src/extensions/topNavigation/TopNavigationApplicationCustomizer.manifest.json"
        }
      ]
    },
    "footer-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/footer/FooterApplicationCustomizer.js",
          "manifest": "./src/extensions/footer/FooterApplicationCustomizer.manifest.json"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "TopNavigationApplicationCustomizerStrings": "lib/extensions/topNavigation/loc/{locale}.js",
    "FooterApplicationCustomizerStrings": "lib/extensions/footer/loc/{locale}.js"
  }
}

TIA

Answer 1

After making the entries in the elements.xml file or clientsideinstance.xml file, do gulp clean, change the solution version, run gulp bundle —ship and gulp package-solution —ship, deploy the package in the apps catalogue