Deployed 1b71106 to latest with MkDocs 1.1.2 and mike 0.5.3

latest/extensions/capabilities/common-capabilities/index.html

@@ -74,6 +74,11 @@
     <label class="md-overlay" for="__drawer"></label>
     <div data-md-component="skip">
       
+        
+        <a href="#common-capabilities" class="md-skip">
+          Skip to content
+        </a>
+      
     </div>
     <div data-md-component="announce">
       
@@ -479,11 +484,145 @@
     
     <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
     
+      
+    
+    
+      <label class="md-nav__link md-nav__link--active" for="__toc">
+        Common Capabilities
+        <span class="md-nav__icon md-icon"></span>
+      </label>
     
     <a href="./" class="md-nav__link md-nav__link--active">
       Common Capabilities
     </a>
     
+      
+<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+  
+  
+    
+  
+  
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-scrollfix>
+      
+        <li class="md-nav__item">
+  <a href="#main-extension" class="md-nav__link">
+    Main Extension
+  </a>
+  
+    <nav class="md-nav" aria-label="Main Extension">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#activate" class="md-nav__link">
+    Activate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#deactivate" class="md-nav__link">
+    Deactivate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#app-menus" class="md-nav__link">
+    App Menus
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#renderer-extension" class="md-nav__link">
+    Renderer Extension
+  </a>
+  
+    <nav class="md-nav" aria-label="Renderer Extension">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#activate_1" class="md-nav__link">
+    Activate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#deactivate_1" class="md-nav__link">
+    Deactivate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#global-pages" class="md-nav__link">
+    Global Pages
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#app-preferences" class="md-nav__link">
+    App Preferences
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#cluster-pages" class="md-nav__link">
+    Cluster Pages
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#cluster-features" class="md-nav__link">
+    Cluster Features
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#status-bar-items" class="md-nav__link">
+    Status Bar Items
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#kubernetes-object-menu-items" class="md-nav__link">
+    Kubernetes Object Menu Items
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#kubernetes-object-details" class="md-nav__link">
+    Kubernetes Object Details
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
+    </ul>
+  
+</nav>
+    
   </li>
 
         
@@ -664,15 +803,351 @@
               </div>
             
             
+              
+              
+                
+              
+              
+                <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
+                  <div class="md-sidebar__scrollwrap">
+                    <div class="md-sidebar__inner">
+                      
+<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+  
+  
+    
+  
+  
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-scrollfix>
+      
+        <li class="md-nav__item">
+  <a href="#main-extension" class="md-nav__link">
+    Main Extension
+  </a>
+  
+    <nav class="md-nav" aria-label="Main Extension">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#activate" class="md-nav__link">
+    Activate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#deactivate" class="md-nav__link">
+    Deactivate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#app-menus" class="md-nav__link">
+    App Menus
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#renderer-extension" class="md-nav__link">
+    Renderer Extension
+  </a>
+  
+    <nav class="md-nav" aria-label="Renderer Extension">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#activate_1" class="md-nav__link">
+    Activate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#deactivate_1" class="md-nav__link">
+    Deactivate
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#global-pages" class="md-nav__link">
+    Global Pages
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#app-preferences" class="md-nav__link">
+    App Preferences
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#cluster-pages" class="md-nav__link">
+    Cluster Pages
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#cluster-features" class="md-nav__link">
+    Cluster Features
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#status-bar-items" class="md-nav__link">
+    Status Bar Items
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#kubernetes-object-menu-items" class="md-nav__link">
+    Kubernetes Object Menu Items
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#kubernetes-object-details" class="md-nav__link">
+    Kubernetes Object Details
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
+    </ul>
+  
+</nav>
+                    </div>
+                  </div>
+                </div>
+              
+            
           
           <div class="md-content">
             <article class="md-content__inner md-typeset">
               
                 
                 
-                  <h1>Common Capabilities</h1>
-                
-                
+                <h1 id="common-capabilities">Common Capabilities<a class="headerlink" href="#common-capabilities" title="Permanent link">#</a></h1>
+<p>Common Capabilities are important building blocks for your extensions. Almost all extensions use some of these functionalities. Here is how you can take advantage of them.</p>
+<h2 id="main-extension">Main Extension<a class="headerlink" href="#main-extension" title="Permanent link">#</a></h2>
+<p>A main extension runs in the background and, apart from app menu items, does not add content to the Lens UI. If you want to see logs from this extension you need to start Lens from the command line.</p>
+<h3 id="activate">Activate<a class="headerlink" href="#activate" title="Permanent link">#</a></h3>
+<p>An extension can register a custom callback that is executed when an extension is activated (started).</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
+  <span class="nx">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;hello world&quot;</span><span class="p">)</span>
+  <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="deactivate">Deactivate<a class="headerlink" href="#deactivate" title="Permanent link">#</a></h3>
+<p>An extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
+  <span class="nx">async</span> <span class="nx">onDeactivate</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;bye bye&quot;</span><span class="p">)</span>
+  <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="app-menus">App Menus<a class="headerlink" href="#app-menus" title="Permanent link">#</a></h3>
+<p>An extension can register custom App menus that will be displayed on OS native menus.</p>
+<p>Example:</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span><span class="p">,</span> <span class="nx">windowManager</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
+  <span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">parentId</span><span class="o">:</span> <span class="s2">&quot;help&quot;</span><span class="p">,</span>
+      <span class="nx">label</span><span class="o">:</span> <span class="s2">&quot;Example item&quot;</span><span class="p">,</span>
+      <span class="nx">click() {</span>
+        <span class="nx">windowManager</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">&quot;https://k8slens.dev&quot;</span><span class="p">);</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h2 id="renderer-extension">Renderer Extension<a class="headerlink" href="#renderer-extension" title="Permanent link">#</a></h2>
+<p>A renderer extension runs in a browser context and it's visible directly via Lens main window. If you want to see logs from this extension you need to check them via View -&gt; Toggle Developer Tools -&gt; Console.</p>
+<h3 id="activate_1">Activate<a class="headerlink" href="#activate_1" title="Permanent link">#</a></h3>
+<p>An extension can register a custom callback that is executed when an extension is activated (started).</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;hello world&quot;</span><span class="p">)</span>
+  <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="deactivate_1">Deactivate<a class="headerlink" href="#deactivate_1" title="Permanent link">#</a></h3>
+<p>An extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">async</span> <span class="nx">onDeactivate</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;bye bye&quot;</span><span class="p">)</span>
+  <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="global-pages">Global Pages<a class="headerlink" href="#global-pages" title="Permanent link">#</a></h3>
+<p>An extension can register custom global pages (views) to Lens main window. Global page is a full screen page that hides all the other content from a window.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/example-page&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleRendererExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">globalPages</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">path</span><span class="o">:</span> <span class="s2">&quot;/example-route&quot;</span><span class="p">,</span>
+      <span class="nx">hideInMenu</span>: <span class="kt">true</span><span class="p">,</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">Page</span>: <span class="kt">ExamplePage</span><span class="p">,</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="app-preferences">App Preferences<a class="headerlink" href="#app-preferences" title="Permanent link">#</a></h3>
+<p>An extension can register custom app preferences. An extension is responsible for storing a state for custom preferences.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">myCustomPreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/my-custom-preferences-store&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">MyCustomPreferenceHint</span><span class="p">,</span> <span class="nx">MyCustomPreferenceInput</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/my-custom-preference&quot;</span>
+
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleRendererExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">appPreferences</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;My Custom Preference&quot;</span><span class="p">,</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">MyCustomPreferenceHint</span><span class="o">/&gt;</span><span class="p">,</span>
+        <span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">MyCustomPreferenceInput</span> <span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">myCustomPreferencesStore</span><span class="p">}</span><span class="o">/&gt;</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="cluster-pages">Cluster Pages<a class="headerlink" href="#cluster-pages" title="Permanent link">#</a></h3>
+<p>An extension can register custom cluster pages which are visible in a cluster menu when a cluster is opened.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/page&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">path</span><span class="o">:</span> <span class="s2">&quot;/extension-example&quot;</span><span class="p">,</span>
+      <span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;Example Extension&quot;</span><span class="p">,</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/&gt;</span><span class="p">,</span>
+        <span class="nx">MenuIcon</span>: <span class="kt">ExampleIcon</span><span class="p">,</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="cluster-features">Cluster Features<a class="headerlink" href="#cluster-features" title="Permanent link">#</a></h3>
+<p>An extension can register installable features for a cluster. A cluster feature is visible in "Cluster Settings" page.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">MyCustomFeature</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/my-custom-feature&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">clusterFeatures</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;My Custom Feature&quot;</span><span class="p">,</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">Description</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
+          <span class="k">return</span> <span class="p">(</span>
+            <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span>
+              <span class="nx">Just</span> <span class="nx">an</span> <span class="nx">example</span><span class="p">.</span>
+            <span class="o">&lt;</span><span class="err">/span&gt;</span>
+          <span class="p">)</span>
+        <span class="p">}</span>
+      <span class="p">},</span>
+      <span class="nx">feature</span>: <span class="kt">new</span> <span class="nx">MyCustomFeature</span><span class="p">()</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="status-bar-items">Status Bar Items<a class="headerlink" href="#status-bar-items" title="Permanent link">#</a></h3>
+<p>An extension can register custom icons/texts to a status bar area.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span><span class="p">;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">LensRendererExtension</span><span class="p">,</span> <span class="nx">Navigation</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">statusBarItems</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">item</span><span class="o">:</span> <span class="p">(</span>
+        <span class="o">&lt;</span><span class="nx">div</span>
+          <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;flex align-center gaps hover-highlight&quot;</span>
+          <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">&quot;/example-page&quot;</span><span class="p">)}</span>
+        <span class="o">&gt;</span>
+          <span class="o">&lt;</span><span class="nx">Component</span><span class="p">.</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">&quot;favorite&quot;</span> <span class="nx">smallest</span> <span class="o">/&gt;</span>
+        <span class="o">&lt;</span><span class="err">/div&gt;</span>
+      <span class="p">)</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="kubernetes-object-menu-items">Kubernetes Object Menu Items<a class="headerlink" href="#kubernetes-object-menu-items" title="Permanent link">#</a></h3>
+<p>An extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">CustomMenuItem</span><span class="p">,</span> <span class="nx">CustomMenuItemProps</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/custom-menu-item&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">kubeObjectMenuItems</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">kind</span><span class="o">:</span> <span class="s2">&quot;Node&quot;</span><span class="p">,</span>
+      <span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;v1&quot;</span><span class="p">],</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomMenuItemProps</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">CustomMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/&gt;</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>
+<h3 id="kubernetes-object-details">Kubernetes Object Details<a class="headerlink" href="#kubernetes-object-details" title="Permanent link">#</a></h3>
+<p>An extension can register custom details (content) for specified Kubernetes kinds/apiVersions.</p>
+<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
+<span class="kr">import</span> <span class="p">{</span> <span class="nx">CustomKindDetails</span><span class="p">,</span> <span class="nx">CustomKindDetailsProps</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/custom-kind-details&quot;</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
+  <span class="nx">kubeObjectMenuItems</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="p">{</span>
+      <span class="nx">kind</span><span class="o">:</span> <span class="s2">&quot;CustomKind&quot;</span><span class="p">,</span>
+      <span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;custom.acme.org/v1&quot;</span><span class="p">],</span>
+      <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
+        <span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomKindDetailsProps</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">CustomKindDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/&gt;</span>
+      <span class="p">}</span>
+    <span class="p">}</span>
+  <span class="p">]</span>
+<span class="p">}</span>
+</code></pre></div>